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.
Related
I ran into this inconsistent behavior on my Gatsby site I have GTM set up to track events for GA4.
Here's my code
<button onClick={(e) => {
e.preventDefault();
window.dataLayer.push({
event: 'get_case_info'
});
}}>
See Info
</button>
And my tag and trigger settings:
It will get triggered a total of 11 times each time I click. What's more odd is that if I change the event name and set the trigger to occur on the changed name (see_case) then it only gets triggered once per click. It's odd because other events don't get triggered another 10 times on top of the initial event despite have the same setup of keeping a consistent name throughout the dataLayer event and Google Analytics event name.
I found the issue. According to the docs you do not need to create the Custom Event in GA4 as well. The Custom Events are designed to trigger when a condition is met a lot like GTM. Say you want to record a conversion based on Purchases made in the US. You would create a new custom event called "US Purchases" then add the conditions for event_name equals 'purchase' and currency equals 'USD'. I assume the 10x was an infinite loop that Google added a limit to. My set up is correct with the data layer push going to the trigger then finally sending the event name to GA4.
The only thing you would need to add in GA4 was if you added some custom parameters to the event like so:
window.dataLayer.push({
event: 'get_case_info',
caseNumber: 1234
})
You would set up the custom parameters to get tracked via the custom dimensions set up.
I'm using an Element Visibility trigger to track a value that appears on a page. However, I want to track this value even when the user doesn't scroll to the area of the page where the element is (i.e. when the page is loaded, and the value is displayed below the fold, but the user doesn't scroll down there). Is there a way of doing this?
Suppose that you want to track a value when a certain element is present on the DOM but not depending on the visibility, then there is a 4-steps-way to do it as follows:
Assumption: you know the class or id of the element you are looking for. In the
following example, I will use a class because it allows me to report not just one but a collection of elements being part of the DOM.
We can create a trigger to detect every page visited, without any limitations due to the element we want to track could be everywhere.
Then, we can create a TAGS (called "SCRIPT detect element" on the example) of the type "Custom HTML".
Triggering will be the trigger created in step 1.
Knowing the class of the element we want to track, the script to write will be:
<script>
window.dataLayer = window.dataLayer || [];
// get all elements with a given class name
var els = document.getElementsByClassName("classname-to-look-for");
Array.prototype.forEach.call(els, function(el) {
var evtElementPresent = {
'event': 'wantedElementRendered'
}
// push event per each element.
window.dataLayer.push(evtElementPresent);
});
</script>
At this point, we will be reporting events (with event name = "wantedElementRendered") from the website to the TAG MANAGER every time an element with the classname equals to classname-to-look-for is part of the DOM, despite if it is in the viewport or not.
Now, with that in mind, we need to create a new trigger on TAG MANAGER. This time the type of the trigger will be "Custom Event" and we will make this trigger happen only if the event name is wantedElementRendered.
Final step: Let's create a tag that will create a GA4 event reporting it to google analytics.
Tag name: "Report X Element is present"
Type: "Google Analytics: GA4 Event"
Event Name: the name we want to declare on analitycs, eg: "X-Element-Present".
Triggering: will be the trigger created on step 3 -> "X Element Rendered".
Now, let's take a look how it works:
Final notes:
What if we want to track the presence of a lot of elements on the page without taking into account the visibility of each one, but also taking care of each element representing different things, like products?
Then, we can send to Google Analytics not just an event name each time an element is part of the DOM, but an event parameter as well, with the product ID. This will allow us to create reports in analytics, asking not only how many times a product appears as part of pages, but to refine the question: "How many times X product appears across pages?".
Altering steps 1-4 to contemplate events attributes, that can be done in a beautiful way. If anyone is interested, I am open to sharing this alternative as well.
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:
Google Tag Manager (GTM) has a built in trigger called "Just Links". In my VueJS application, using Vue Router, GTM fires a "History Change" event before firing the "Just Links" trigger.
(the "History Change" event has nothing to do with page view events)
Because of this, the Page Path GTM data-layer variable, which is supposed to be the path that the event was triggered on, is the same value as the Click URL GTM data-layer variable, which is the href value in the <a/> tag.
For instance:
User is on /support
User clicks on link to /about
Vue Router update browsers history
History Change event fires and updates all the internal values of Google Tag Manager data layer (including location and page path)
"Just Links" event fires, Page Path and Click URL values are now both /about
I'm assuming GTM/Google Analytics have some type of built in deferment strategy in place to not interfere with other things running on the main Javascript thread. So Vue Router changes routes (hence triggering the history change) before GTM/Google Analytics fire the "Just Links" trigger event.
(Strangely enough, when you use the built in Click - All Elements in GTM, the events fire in the right order.)
Has anyone else encountered this issue and come up with any type of solution? There might be a solution with just using Click - All Elements but that by default doesn't traverse the DOM tree with <a/> and strip the href for the Click URL value, which means extracting the href value on nested elements within an <a/> doesn't work. However, Just Links does do this.
Thanks!
You can look at tag firing priority. Adjust the click tag to have higher priority than the tag that's dependent on the history change trigger.
I just ran into this problem due to a site update. Instead of switching all of my "Just Links" to "All Elements" and dealing with the many headaches, I created a new Variable to reference for the page path instead of the built-in "Page Path" Variable. This Variable is basically storing what "gtm.linkClick" now treats as the previous page path because of the History Change. I'm just at beginner-level JS, so I'm sure there is a better way to write the code, but it works.
The first step is to create a new Custom HTML Tag (name it whatever you want) set to fire on All Pages and History Changes. The Tag will first attempt to store the current page path into Session Storage, or fallback to a cookie if Session Storage is not accessible. I used the {{JS - setCookie}} Variable method that was created by Simo Ahava to set cookies. There is a 2 second delay before writing the page path to storage, which is plenty of time for the "Just Links" Trigger to fire and receive the "correct" value before it is overwritten on the next pageview or history change. I gave the sessionStorage and cookie the same name "gtm.truepage".
Custom HTML Tag
<script>
function truePage() {
try {
var page = document.location.pathname;
var storage = window.sessionStorage;
if(storage) {
setTimeout(function() {
storage.setItem("gtm.truepage", page);
},2000);
} else {
setTimeout(function() {
{{JS - setCookie}}("gtm.truepage",page,1800000,"/",window.location.hostname);
},2000);
}
} catch (e) {
}
}
truePage();
</script>
Custom HTML Tag Screenshot
1st Party Cookie Variable
The next step is to create a new 1st Party Cookie Variable named "gtm.truepage". This Variable will be used as a reference for the Custom Javascript Variable. Therefore, if you change the name, you will also need to change the name in the next part.
Cookie Variable Screenshot
Custom Javascript Variable
The final step is to create a Custom Javascript Variable (whatever name you want) that you will use for your "Clicks - Just Links" Trigger. The script will first attempt to retrieve the page path that was set by the Custom HTML Tag from Session Storage and then try the 1st Party Cookie Variable.
function() {
return window.sessionStorage.getItem('gtm.truepage') || {{gtm.truepage}};
}
Custom Javascript Variable Screenshot
You can add an after hook to your router to create a custom path variable like this:
router.afterEach((to) => {
window.vuePath = to
}
Then in Google Tag Manager create a new User-Defined Variable with the JavaScript Variable type called Vue Path. Set Global Variable Path to window.vuePath.
Now you can use Vue Path instead of Page Path in your Triggers to get the correct page path.
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!