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}}
Related
I use Google Tag Manager to install GA4 for SPA (single page application).
I search a lot of articles about setting SPA and it seems like I need to add a page field.
I tried to put the value as below but not one succeeded. I used Google Tag Manager debug mode to check the page view event was hit.
{New History Fragement}
{Page Path}{New History Fragement}
{Page Path}#{New History Fragement}
constant like /testGTM
custom javascript like below
function() {
return window.location.pathname + window.location.search + window.location.hash;
}
Even I put the constant like testGTM, I still can not see the data contain testGTM. The page view data is collected but the URL is not the same as I expected.
Did anyone meet the same problem? Or the field page doesn't work anymore.
Thank you.
Sample Setting GA4 in Google Tag Manager
I found out how to solve this problem.
First, click 「event」->「All event」.
Second, click「custom definition management」.
Last, click 「create custom dimension」and enter "page" in the parameter name.
After the above instruction, we can get the "page" data as normal.
How to Check
There are 3 ways to check
1.Engagement -> Event -> + custom(event scope)
2.Engagement -> Event -> click each event -> see past 30mins event's parameters
3.Engagement -> Event -> click each event -> scroll down to see parameter
P.S. I use the Japanese version so maybe the translations are different.
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'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.
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 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!