We are struggling with how to achieve the following:
Imagine you have 3 images on a web page distributed vertically on a page.
If we create a Tag for Visibility based on a class (say .viewed) that all images share, then every time the user scrolls to each image, the Tag fires.
At this point we would like to associate some data to each images that triggered the Tag.
dataLayer.push({
'variableName': { 'id': $('#promos .viewed').attr('id'), 'group': 'HomeBottom' }
});
This code will push the variable so that it will be available to the tag manager. But how can we get the id and group for each image without having to create separate variables and tags.
Any help would be appreciated.
Related
I'm trying to report on website performance for a website with editors in various UK regions (Eg. South-West, North, North-East) that don't map to regions that GA understands.
Is it possible to embed the region into the metadata of the page and then read that via Google Analytics as a hit for a custom dimension? If so how do I format the metadata tag on the page?
You can absolutely do this. On your page, below wherever it is that you have the Google Tag Manager script, you'll want to push your values into the data layer. I recommend something along the lines of the following:
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'uk-region': 'South-West' //As applicable
});
</script>
And then you'll need a couple of things in GTM in order to pick this up. First, create a new Data Layer Variable and populate the "Data Layer Variable Name" with the "uk-region" name I used above, or whatever else you want to identify it with. Give it a useful name like "uk-region" at the top.
In your Google Analytics page view tag then, you'll need to set up the custom dimension mapping. Click the box for "Enable overriding settings in this tag" and a dropdown will appear with "More Settings". Expand the "Custom Dimensions" and click the "+ Add Custom Dimension" button. Specify the number custom dimension you wish to populate under Index and in the value, we'll specify the variable we created with {{uk-region}}.
Test your container to ensure it's getting picked up as it should, then publish to commit the container to your website.
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 having an issue with Google Tag Manager and Wordpress/WooCommerce
(I can't access to the backend).
I need to track when a specific type of product is purchased, the Sample of the main products (most of the products have their Sample).
The Sample can be purchased with other products or on its own.
I found a common element in the source code that is shown every time a Sample is purchased (see below). The element colour-card-a5 appears when the sample is bought on the checkout page in two different areas:
Area #1
dataLayer.push({
"pagePostType":"page",
"pagePostType2":"single-page",
"pagePostAuthor":"root",
"ecommerce":{
"currencyCode":"EUR",
"purchase":{
"actionField":{
"id":"22481",
"affiliation":"",
"revenue":"1.70",
"tax":"0",
"shipping":"0.00",
"coupon":""
},
"products": [
{
"id":13487,
"name":"Genert",
"sku":"AQA021",
"category":"Contemporary",
"price":1.7,
"currency":"EUR",
"stocklevel":null,
"quantity":1,
"variant":"colour-card-a5,interior-design"
}
]
}
},
"event":"gtm4wp.orderCompletedEEC"
});//]]>
Area #2
<td class="woocommerce-table__product-name product-name">
<a href="https://www.example.com/product/genert/?attribute_pa_size=colour-card-a5&attribute_pa_finish=interior-design">
Genert - Colour Card (A5), Interior Design
</a>
<strong class="product-quantity">× 1</strong>
</td>
As the checkout page is example.com/checkout/order-received, I implemented this a Trigger:
Trigger type: Element Visibility
Method: CSS Selector
Element Selector: colour-card-a5
When to fire this trigger: Once per page
Minimum Percent Visible: 1
This trigger fires on: Some Visibility Events
Fire this trigger when an Event occurs and all of these conditions are true:
Page URL | contains | order received
But once I buy the Sample, the tag it's not fired.
I'm sure I'm missing something but can't realise what.
Anyone can help?
Thanks in advance
Your CSS selector provided (colour-card-a5) does not match any elements in your provided HTML. You should use a[href*="colour-card-a5"], which will select any anchor, which has a href attribute, that contains colour-card-a5 string in it.
You should also check, if the element is present in the DOM during page load, or it is added later by a script. In this latter case, you should enable DOM inspection in the trigger setting, to allow triggering for any added elements.
I'm working on Google Tag Manager/Analytics for a site, here's an example page that a tag is being fired on:
https://www.forktrucktraders.co.uk/listings/refurbished-combilift-multi-directional-gas/
The tag is fired when the "Send Message" button on the contact form is clicked:
https://imgur.com/a/qTPb3Ci
Right now I've got the event's action returning the URL of the current page the form was sent from, but I'd like to know if it's possible to get the href from the "Visit dealer's website" link on the page, as it would give a faster idea of which dealer the listing is coming from. Probably a long shot to make this happen solely through Tag Manager (if not possibly just a hidden bit of data that just has the dealer's name in on the "Send Message" button) but I'd appreciate any input.
You most certainly can. Off the top of my head something along the lines of the following should work...
It depends on whether you prefer just having the url or breaking it down further.
Just the URL:
Create the following in a custom HTML tag within GTM
<script>
//This selects your desired href:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
//This pushes the value into the dataLayer temporarily for use later:
window.dataLayer.push({
event: 'formSubmit',
dealer: dealerURL
})
</script>
Ideally, this should be fired on page load of all your listings pages.
Next create a new User-Defined Variable of the dataLayer var type
within GTM corresponding to dealer, this will store the value to be
pulled through in your event.
Now just change your event action to {{dealer}} (or whatever you
ended up naming the datalayer variable), and this value should be
pulled through in your event.
Getting the dealer name:
Now presuming the href format is always the same across the site you could split this by a delimiter instead:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
var dealerSplit = dealerURL.split("/");
var dealer = dealerSplit[4];
The above would leave you with a variable containing the string 'hitec'.
This however is quite prone to breaking if the page path does not always follow the same format, as such it would be better to use RegEx instead.
To answer your specific question, you would need to create a variable to target that specific link element that contains the dealer's website's url. The simplest way is probably to add an id to the <a> element and create a variable in GTM to track it.
I had a quick look at your site and I think you have more problems with the form.
Your even triggers without validating the form, this would lead to extra events.
The event category, action and label could use some work in organizing it to help you analyze the data
You also have a mix of gtag.js and GTM snippet on the page, I would say this is not normal practice, usually, GTM is enough. You can contact me through my profile if you'd like to chat more about it.
How can i use event tracking feature in a iframe if the parent document uses the same Google Analytics ID but i don't want to double the pageview number?
Can I disable the default page tracking or switch to "manual tracking"?
The story in brief: The parent document displays the comments in a iframe and i want to track some clicks inside the comment frame. I don't want to use different GA account to parent and child and also I don't want to merge the iframe into the parent document. I hope you can help me, I'll give you a FREE virtual BEER if you want some.
Iframe documents can detect that they are being iframed.
You can revert the logic and fire the GA tracking code only when outside of a frame:
if (window.self === window.top) { /* I'm NOT in a frame! */
// GA tracking code
_gaq.push(['_trackPageview']) ;
}
Does this answer your question ?