I have n number of components and right now I am creating separate tags and triggers for each component. But I want to automate this process. Means if there is way to create a template or format and automatically the tags and triggers get creates in GTM.
Is it possible? Also I am using GA-4 for analysis.
I tried templates in gtm but was not able to automate the process of creating tags and triggers.
GTM has an API that allows you to create tags, triggers and control your containers/versions programmatically.
For your use case, however, instead of creating tags and triggers for each component, you could just have one tag and trigger for all of them, or group the components together and have one tag and trigger per group.
This approach is easily and commonly used via the dataLayer implementation.
So, say, you'd have groups of components like: buttons, accordions, modals, dialogues, messages, etc.
Let's take a look at the messages group. It would have four types of messages: success, info, warning and errors. And The push structure would look as follows (message as an example):
dataLayer.push({
'event': 'message',
'action': '< shown | dismissed >',
'type': '< success | info | warning | error>',
'message': '<the text of the message>',
'location': '< header | body | footer | console>'
});
now using this template you're effectively covering all message components with one dataLayer message template and one tag/trigger in GTM. This is a very simple model to manage on both sides: the front-end and GTM.
Simlar with, say, buttons:
dataLayer.push({
'event': 'button click',
'type': '< general navigation | back | continue | product CTA | advertisement | external link | social media>',
'message': '<the text of the button>'
});
One tag/trigger covering all buttons. GTM will still be perfectly able to inject custom logic and override any field with JS in case front-end sends garbage and there are no resources to fix it properly.
Related
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'm working with this preebuild ecommerce system, all of the checkout is in an iframe. And the event below is pushed at every major step, 'checkout 1','checkout 2','payment details' and 'transaction complete' page & title reflects each steps. But NOTE the event name 'VirtualPageview' is the same for all steps mentioned above.
{
event: 'VirtualPageview',
page: '/Test/test',
title 'test | test',
gtm.uniqueEventId:25
}
Visual in gtm debugger:
https://gyazo.com/6356cc13f6b63cad73e55d10abc90154
Now i'm wondering if there is any way to track this as pageviews in analytics? (My primary goal is to create a funnel visualization)
I've read through so much information and as a beginner i'm quite overwhelmed, i would appreciate a little info to point me in the right direction.
Here is what i've done this far, not sure if i'm on the right path.
I feel limited with this setup, because the trigger will trigger on all steps because event name is the same, that would be fine if i could somehow grab page and page title from datalayer dynamically.
GTM TAG
https://gyazo.com/6f7ea35307bca9694835359485b9f74d
GTM Trigger
https://gyazo.com/4c3b489f627dd72e17816e5b5f61f299
You have to create a DataLayer variable called page and another called title (names of your variables) and use them as field values like this: {{page}}
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 was asked to capture the analytics on a website. The website is made up of 5 web pages, but I now realize that the domain is the same and the only thing that changes is the URL fragment, i.e. www.domain.com#a, www.domain.com#b. The only info that comes through to GA is the domain and it does not include the URL fragments. The tracking code I'm using is Tealium and the data is being sent back to Google Analytics. How can I set this up so that i can see the entire URL in GA including the URL fragments?
So, from Tealium's perspective we need to trigger a view event when a new fragment is loaded (if I am understanding this correctly).
If we assume that the fragment change occurs on a link click then we need to trigger the view event when the link click occurs.
From the GA perspective, we need to trigger a view that captures the new information. For a view this is likely to be location, path and title.
Therefore, we need Tealium to construct the new data points and then pass them in a view event to GA.
The simplest way to do this in Tealium (all things being equal) is via a jQuery onHandler Extension
The jQuery extension requires the following information:
jQuery selector (or selectors) to pay attention to
"Trigger On" event type (this will be Click in this example)
Tracking event type to run (View event in this case)
Variable & values to set
Tealium jQuery onHandler extension config
note it's always a good idea to set a condition on your jQuery extensions so that they only run when needed instead of all the time and everywhere
In this extension, I have set the following:
jQuery Selector: '#MyID_1, #MyID_2, #MyID_3' -- yes you can pass a list of selectors or nearly any other valid jQuery selector statement
Trigger On: 'click'
Tracking Event: 'view'
3 Variables:
a. 'page_name' : $(this).text(); //get the link text
b. 'my_url' : utag.data['dom.url']+$(this).attr('href') //building the full URL including the fragment
//utag.data['dom.url'] is a variable/datapoint that Tealium automatically generates
c. my_path : utag.data['dom.pathname']+$(this).attr('href'); //building the path
//utag.data['dom.pathname'] is a variable/datapoint that Tealium automatically generates
NOTE: make sure to set the type for each these to "JS Code" otherwise your JavaScript will be quoted out as a string.
Why these three variables? As I understand GA, these are the values it would expect for a new page view -- location/URL, path, and Title so we are constructing those values in the extension to pass them to GA on the view event.
Now, we just need to map these new variables to GA.
my_path gets mapped to page in the GA mapping toolbox
page_name gets mapped to title
location isn't a default option in the mapping toolbox so we need to add a custom destination variable called location and map my_url to it.
custom variable mapping for GA
That's how you do it from within Tealium and minimal coding. If for some reason you don't want to / can't do it inside of Tealium, this provides us with a very nice template for a custom function to add to our codebase:
`$(document.body).on('click', '#altID', function(){
utag.view({
"page_name": $(this).text(),
"my_url": utag.data['dom.url'] + $(this).attr('href'),
"my_path": utag.data['dom.pathname'] + $(this).attr('href')
})
})`
See both in action over here at CodePen.
I use Google Tag Manager for several weeks now. Recently I had a special request and I have not found an answer. Is it possible that several containers share the same datalayer? In the Js code of two containers, I tried to give the same name to datalayer : the result is rather surprising ... All tags in each containers are executed twice.
Specifically, I try to send an event in two tags which are in two different containers. I'd like to avoid having maximum countless number call on my onclick (hence the idea of having a single data layer)
It is possible to use the same dataLayer for multiple containers. It is also possible to include a second container through the first one (As a tag).
But the "All pages" rule will fire once for each container included on the page. So if you have 3 containers, every tag fired on "All pages" will be fired 3 times.
(The same is true for other events like "gtm.js"...)
We found a simple solution for this problem. Just include a "page_loaded" event on every page and change the "All pages" rule accordingly:
<script>
var dataLayer = [];
</script>
<!-- Google Tag Manager -->
<!-- End Google Tag Manager -->
<script>
dataLayer.push({"event": "page_loaded"});
</script>
The page_loaded event will only fire once, independent from the number of containers used on the page.
This might be obvious (and I haven't tested it) but have you tried to make a copy of your dataLayer ? If you just add below your datalayer variable an assignment
dataLayer2 = dataLayer
and configure you second container to user dataLayer2 ? That would surely be a PITA with dynamically pushed variables, but everything that is rendered at page load should work.
One way that seems to work for us so far is to rename the datalayer variable of the second container like Eike said. GTM allows you to change the name of the variable when it initializes as explained here: https://developers.google.com/tag-manager/devguide#renaming
To track events on both containers you will have to manually push to each:
var data = {some:'data'};
dataLayer.push(data);
otherDataLayer.push(data);
You can have different triggers on each of the container for selectively fire tracking events to GA or other.