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:
Related
I created trigger to fire when the view_item event occurs by using a custom event and setting the "Event" equals "view_item". in preview mode when I check the view_item event, the built-in dataLayer.push is showing the item name. I created a variable that will pull the dataLayer information from the "name" key. When I inspect the "view_item" event, the variable I created shows up with the correct value of the item name. However, in my tag, the {{Item Name}} variable is showing up as undefined. I've tried to look for Google documentation on the hierarchy of the "view_item" event and the firing of the tags, but I couldn't find anything explicit.
Why is my "Custom HTML" tag that uses my {{Item Name}} variable showing as "undefined" when the "Variables" section for this partcular event shows the proper value?
Here is my custom html tag:
<script type="text/javascript">
voyage.event(6157, { productName: '{{Item Name}}', productViewed: '{{Page URL}}' })
</script>
The {{Page URL}} built in variable is showing properly. I know it's loaded when the container loads. But the {{Item Name}} variable is not showing. It (the data.push()) is pushing the correct data on the view_item event, but why is my variable not displaying the data correctly.
If this is a hierarchy issue, how do I make sure that I fire this tag after the view_item event happens.
Also, what puzzles me is that I also have a GA4 tag that is triggered by the same "view_item" event and the parameters I set for this event also use the {{Item Name}} variable and the value is showing up correctly in this tag.
Furthermore, subsequent events such as DOM Ready or Window Loaded do not show that my user defined "Item Name" variable contains a value. I was under the impressions that data.push() on the view_item event was adding to the data layer, but it would appear not. It seems that my user defined variable is only good on the view_item event.
And finally, although the Google Tag Manager preview window shows that my data layer on the final Window Loaded event only contains the below data, when I use javascript to access window.dataLayer my data is all there.
{
event: "gtm.load",
gtm: {uniqueEventId: 10, start: 1644552712402},
developer_id: {dOGY3NW: true}
}
I'm extremely confused, as I thought the data layer was reset on each page load, but it would seem that the data layer object (according to the preview mode) is being reset on each event, or the data.push() items are not persistent till the final Window Loaded event. BUT, the actual javascript object IS being added to.
I have a project that uses GTM and GA4. In GTM I have an event (connected with GA), that needs to track user input (search bar).
The trigger seems to work right - it fires when required. When I look at the dataLayer from the click event (after search input was typed in), I can see that the value of the search bar can be found under: gtm.click.value.
That's why I've created a custom variable. But for some reason the custom variable always returns "" (empty string). I don't understand why, because when I check the dataLayer in my console, I see the right value. I've double-checked, if I'm tracking the right click event - and I do: the gtm.uniqueEventId is the right one.
Can someone tell me what's wrong? How can I access the gtm.element.value?
Try making a Custom JS varialbe and have this in it:
funciton(){
return {{Click Element}}.value;
}
See if it returns the value of your clicked element.
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.
kindly ask you to help me with custom dimensions, as i'm newbie for GA/GTM and did everything per manual.
1) So i created 3 new dimensions for ecommerce in GA:
here is dimensions from GA with indexes
2) I've created snipped in GA and added it into head section of my site:
<script> gtag('event', 'page_view', {
'send_to': 'AW-XXXXXXX',
'ecomm_pagetype': 'page_type',
'ecomm_prodid': 'product_ids',
'ecomm_totalvalue': 'total_value',
'user_id': ‘userId’ }); </script>
along with global site tag.
3) Finally i've created new variables in GTM:
for example for page_type
and in Tag itself.
but i constantly getting error on debug:
{index: '1', dimension:undefined}
screenshot is here
will really appreciate any help!
p.s. sorry for links with images instead embedding, i have not enough reputation here yet.
You clearly are mistaken the gtag which stands for global site tag with the tag manager code.
Instead of using gtag use dataLayer.push, this is the method to push information to Google Tag Manager.
An example:
dataLayer.push({
'ecomm_pagetype' : Variable1,
'ecomm_prodid' : Variable2,
'ecomm_totalvalue' : Variable3
});
Here you have the docs for further reference: docs
Remember to place this tag under the Tag Manager snippet. or remember to initialize an empty dataLayer as the doc states.
Code on page
On your page, before your GTM container snippet add the following (I've used sample values for type, id and value), your code should look like below:
<script>
dataLayer = [{
'ecomm_pagetype': 'MyPageType',
'ecomm_prodid': 'EXAMPLE0000001',
'ecomm_totalvalue': '4000',
}];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
GTM - Data Layer Variables
In GTM, create 3 data layer variables for "ecomm_pagetype", "ecomm_prodid", "ecomm_totalvalue" like so:
Type in the key(name) that's in the datalyer object, you can set a default value if you like, otherwise, it will be "undefined" for pages without this variable defined.
Next create a "Google Analytics Settings" variable, this is to simply GA tag configuration, we will link the custom dimensions here.
Put in your own GA property ID, under "More Settings" expand to "Custom Dimensions", click on "ADD CUSTOM DIMENSION". Put in "1" for to reference the index for "ecomm_pagetype" CD in GA. For value, use the variable we created earlier. Do this for all 3 CDs.
Now your Variables page should look something like this:
GTM - Tags, adding CDs to GA tag
Now for your tag. You should have a Google Analytics tag configured in GTM. Looks like you know how to do that, to add the custom dimensions by using the new "My GA Variable" under "Google Analytics Settings". Don't forget to have this trigger on "All pages" or pick your own trigger as you see fit.
I am experimenting with getting datalayer variables into GA. I am just experimenting so the values are just for testing.
So I paste this link with a datalayer push onto a page:
<a href="http://www.google.com"
onclick="dataLayer.push({
'test': 'okay'
});">Customize Color</a>
I do the necessary configuration in GTM as well as GA.
However, in the debug console of Chrome I get this into the datalayer:
However, this doesn't come into GA custom dimension as you can see below:
One small note, if I paste the datapush directly under the datalayer script, I get the datalayer variable in the custom dimension. However, in that case I do not have a onclick with the URL.
What I suspect could be happening is that there is a misalignment when that dataLayer push is being made, and when you are grabbing the value to populate your custom dimensions. You should push an event ALONG with the CD value:
dataLayer.push{(
'event': 'someEvent',
'test': 'okay'
})
and then you should trigger your event tag to fire on the someEvent trigger, and at the same time, populate your CD with the test value.
EDITS:
Your trigger should be simply this:
There is absolutely no need to define an event variable that's used in an eventTrigger that fires on someEvent. I believe doing it that way causes issues.
Nyuen, great, that was exactly the issue! I didn't see the VALUE of the first declared variable of the datalayer_push also having to be the name of the custom event. I was constantly pairing it in the condition section.... I still don't see the logic of it, but ey, it works! Many thanks!