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.
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'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:
I have an area on my site where there are some dropdowns that filter a list of items based on what is selected. There is also a search bar that will search the list. What I would like to do is have a Custom Report in GA that tracks how many times each option from the dropdowns are selected, as well as what search terms people are entering.
My question, is how do I properly configure the event / dimensions / metrics to report on this data? I imagine a report like this:
Composer Hits
Mozart 102
Beethoven 83
Stravinski 72
So far I am collecting the items in custom dimensions (one per dropdown), which are triggered by an event, like this (angular / typescript):
(window as any).dataLayer.push({
'event': 'filter-guest-artist',
'GuestArtist': this.currentComposer
});
The tags are firing correctly in the GTM debugger, but my issue is I'm not sure if I should use a custom metric or event to track the hits. Right now in my custom report there's no data because I don't have a proper metric to track by. I've used custom dimensions in a similar way but they were collected on Page View and I used the Page View as my metric, but that isn't applicable here since these are triggered by events.
In your case I would go with an event. As I can infer from your description, the dropdown is used to filter the results. Every time a user selects one of your dropdown values and filters the results, fire an event with event label as the name of the filter. For example
event category: {{title of the list}}
event action: 'filter'
event label: {{name
of the selected item}}
Then I could easily answer my question through the Analytics interface on the events section. Filter by event action == 'filter' and as the event label as a dimension. The metrics TotalEvents and UniqueEvents will give you the insights you require.
For the search terms that users type on your page you can use the build in search term report that requires some small configuration. See more here
If cannot implement that, I would advise you use another custom event with the structure ase below
event category: {{title of the list}}
event action: 'search'
event label: {{search tem}}
This way you would see the search terms as event labels in your event report after you apply the correct filters.
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!