I have a tag that sends purchase event to Facebook that looks like this:
<script>
fbq('track', 'Purchase', {
value: {{reservationValue}},
currency: 'ILS',
});
</script>
The reservationValue is a variable that the GTM gets from the page before the tag is fired.
For some reason, when i'm using the preview mode, I see that the HTML code that is sent to Facebook is:
<script type="text/gtmscript">fbq("track","Purchase",
{value:google_tag_manager["GTM-XXXXXXX"].macro(2459),currency:"ILS"});</script>
screenshot here
The same variable is used to send value of purchase to AdWords and when I preview the AdWords tag, the value is passing as it should.
I did Tag Sequencing and fired the pageview Facebook pixel before the purchase tag.
Any suggestions?
Thanks
I think this is normal behaviour because the syntax of GTM variables with the double curly brackets is the GTMs own syntax. what you saw there happens to every GTM variable. The GTM variables get "translated" to regular javascript again.
If you open the console within a browser and type in "google_tag_manager["GTM-yourContaienrId"].macro(2459)" you should be able to se the value assuming the Tag has been fired of course. You could also console.log the variable to see if it is being filled correctly.
The reason why you didn't see that behaviour on the AdWords tag is probably because it is a "native" tag type in the GTM and the other one is just plain html.
Change into:
<script>
fbq('track', 'Purchase', {
value: '{{reservationValue}}',
currency: 'ILS',
});
</script>
Related
I'm stuck with setting up correctly FB pixel code, events like page view and content view work fine, but seems I missing something with tracking button clicks like "AdToCart" or "InitiateCheckout" events. Tried to play with a code, but didn't figure out it.
Here is the original code I tried to implement from Facebook for Add to Cart event.
<script>
<button id="button add-to-cart-button">AddtoCart</button>
<script type="text/javascript">
$('#addToCartButton').click(function() {
fbq('track', 'AddToCart', {currency: "EUR", value: {{ option.price }}});
});
</script>
What am I doing wrong?
First, you cannot have multiple ids to one element. The id is unique, so id="add-to-cart-button"
Second, the id is 'add-to-cart-button', so the jquery selector should match that: #add-to-cart-button not #addToCartButton
I have a R Shiny app that I have connected to Google Analytics using Google Tag Manager (R Shiny app means AJAX website). I am currently tracking the standard stuff like PageViews, and have set up a tag to track which Tab a user clicks on (Using Click Element).
In most tabs, I have a drop-down menu/list (can be seen in the picture). When clicking on this list to select/change the input, the click element does not fire. So clicking does not work here.
In the same picture, I have included the source html code. I highlighted what I think is important. The default input is "Age Group (Discrete)." The "option value=" and "selected" changes the input (changed to "Pyramid (Discrete)"). And it also changes in the div class="item" data-value=..." line.
I do not know how to capture when a user changes the input using Google Tag Manager. I am however able to successfully track this if I put this GA code in my JavaScript file.
$(document).on('change', 'select', function(e) {
ga('send', 'event', 'widget', 'select data', $(e.currentTarget).val());
});
But the above only works if I also have this included:
ga('create', 'UA-######', 'auto');
ga('send', 'pageview');
Which means it is double-counting pageviews (tracking page-views on GTM and the GA code above).
I prefer to track what I want using just GTM. Any help would be appreciated. Let me know if the image is hard to see (May need to zoom in). Thanks
one possible solutions is using GTM custom events:
1) adjust your code to trigger custom event instead of sending GA event:
$(document).on('change', 'select', function(e) {
dataLayer.push({
'event': 'widget data selected',
'selected_value': $(e.currentTarget).val()
});
});
This will trigger specific widget data selected select that can be catched with Custom Event Trigger. Then just use that trigger for your regular Analytics Event GTM tag.
Additionally, you might set up user-defined Data Layer variable to read the selected option value from dataLayer and use it in your tag.
I have started using Google Tag Manager recently and I don't understand why one of my variables remains undefined while everything seems to be set up correctly.
Here is first the code that I use to create my datalayer:
<script>
window.dataLayer = [{
'pageCategory': 'test1',
'Device' : 'test2',
'Manufacturer': 'test3'
}];
</script>
I have created custom dimensions based on those variables and I can find them in Google Analytics. So far, everything is all right.
I then want to track a click on a button that leads the users to an external link. I use the following code:
window.dataLayer.push({
'ShopURL': url,
'ShopName': shop_name,
'PriceOffer': price,
'event': 'ClickPrice'
});
I have checked the content of each variable with a console.log and they all display the correct values.
In GTM, I have created datalayer variable for each one of them, I have created a custom event to push them to Google Analytics. I have taken "ShopName" for event_category, "Device" for event_action, "PriceOffer" for event_label.
When I look at the data in Google Analytics I see that event_category is undefined while event_action has the correct value. It looks like the event is fired correctly because I can only see it in GA when I click on the button but somehow some variables are not populated correctly.
You can see it in action here: https://www.mobilemultimedia.be/en/nokia/price-nokia-8.1 (click on one of the "check offer" button to trigger the event)
With GTM preview in the browser I see all the correct values.
Any idea?
Additional info
Here is a screenshot of the variable configuration in GTM:
I'm sorry, it's in French but you can see the variable with the right name.
I believe you have your trigger set incorrectly.
I think it might be an element click trigger right now, but you need it to be a "custom event" trigger and you should have "ClickPrice" as the event name you use to trigger.
Like so:
I am doing some work on a site. A message is passed to the dataLayer updating the variable "u1".
I have searched the container tag and am still unsure of how this is working,
this happens when a user hits the homepage, no push elements on the site.
URL: "premierline.co.uk"
Another example of this is the "u3" variable
URL: https://www.quote.premierline.co.uk/AWE/Container.aspx?CurrentStep=NewClient&CurrentWorkflow=CommercialB2C&ProductTarget=CompleteRetailerUnderwriting
Please help.
Thanks
The "u1" and "u3" parameters are being populated via onpage scripting. When you look at the source code on those pages and search for "dataLayer", you'll see this:
<script>
dataLayer = [{
'u1': 'QWEB MISC'
}];
</script>
and on the other link you'll see this:
<script type="application/x-javascript">
dataLayer = [{
'u3': 'XXRX'
}];
</script>
I have a banner on my sites home page, It has multiple links and the html code is written within tag and does not contains any anchor links, instead it has a href link only.
My IT heads says its not possible to embedd a onclick event tracking code to track all the links.
Please let me know how will i track this?
A pure unobtrusive javascript solution (derived from Googles example, working but not necessarily the most complete or beatiful code) :
function addListener(element, type, callback) {
if (element.addEventListener) element.addEventListener(type, callback);
else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
links = document.getElementsByTagName('a');
for(i=0,cnt=links.length;i<cnt;i++) {
addListener(links[i], 'click', function() {
ga('send', 'event', 'button', 'click', 'nav-buttons');
});
}
If you put that in an external js file or an inline script it will "decorate" all links in the page (you would need a more specific selector instead of "all links") with a click event that fire google event tracking when somebody clicks the link. No embedded click code in the link tags necessary (that's bad practice in any case).
If you are already using jQuery (since that's probably the most popular javascript library) you can simply do
$( "a" ).click(function() {
ga('send', 'event', 'button', 'click', 'nav-buttons');
});
(again, choose a more specific selecor).
Both examples assume Universal Analytics, for classic you'd need to change the event tracking code (see DalmTos answer for examples).
The following examples will depend on if you are running classic VS universal analytics.
For Classic Analtyics look for ga.js in your tracking code:
Play
For Universal Analytics look for Analtyics.js in your tracking code:
Play
I don't see any reason why you wouldn't be able to track it in your banner.