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.
Related
I have a project that uses GTM and GA4. In GTM I have an event (connected with GA), that needs to track user input (search bar).
The trigger seems to work right - it fires when required. When I look at the dataLayer from the click event (after search input was typed in), I can see that the value of the search bar can be found under: gtm.click.value.
That's why I've created a custom variable. But for some reason the custom variable always returns "" (empty string). I don't understand why, because when I check the dataLayer in my console, I see the right value. I've double-checked, if I'm tracking the right click event - and I do: the gtm.uniqueEventId is the right one.
Can someone tell me what's wrong? How can I access the gtm.element.value?
Try making a Custom JS varialbe and have this in it:
funciton(){
return {{Click Element}}.value;
}
See if it returns the value of your clicked element.
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'm using Google Analytics via Google Tag Manager. I'm on Chrome and checking tags using Google Tag Assistant.
I've noticed that for many, if not most of the events I have tagged, the parameters will not pass through unless the link or key webpage they are clicking on opens in a new tab.
In HttpFox the result is a NS_BINDING_ERROR or something along those lines.
For example, if you visit this site, you can see there are two means of navigating to the "submit report" page - the CTA on the top right and in the main nav. I'd like to understand how the CTA performs compared to the main nav so have set up events, but the event only fires if I open the links in new tabs.
What does this error mean and what should I do about it?
To get rid of the ns binding error, have the onclick return false - Documentation Here.
In regards to the event not getting passed, I'm seeing in httpfox that the tid (on the event) is UA-34035531-[1-6]. That doesn't look quite right. How are you setting the account id?