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.
Related
With a WP plugin, I'll be adding "read time" to each article. NOTE: Read time simply shows how long it takes to read the article, not how long a user has read my article.
I want to pull this value into Google Analytics as a custom dimension. I'd like to compare how long people are on the page (avg. time on pg.) against how long it should take to read the whole article (read time).
I understand I need to add a key for "read time" to the data layer, and pull that key into GTM. However, the documentation does not make it clear what key to add to data layer for a value like read time. Or how to create a key for it that Google Analytics will understand if that is possible.
Any possible solutions?
The key can be anything you like. Assuming this info should be available when the article loads, you can push information to the dataLayer from the page code, or from a custom HTML tag in GTM using a window loaded page view trigger.
<script>
// Example of getting the read time value from a
// DOM element with a class "read-time"
var readTime = document.querySelector('.read-time').innerText;
dataLayer.push({
// Give an event name so that we know exactly when
// the data becomes available in the dataLayer.
event: "Article Viewed",
// Add the data
article: {
readTime: readTime,
title: "How to write a blog post",
// other useful article-related properties
}
});
</script>
When you have your dataLayer push working successfully, you can add a dataLayer variable in GTM to make read time available to other tags. The dataLayer key in my code example is article.readTime.
To send this value to GA as a custom dimension:
Add a custom dimension to GA. Set the scope to "hit" and make note of the index for later.
In GTM, add a Universal Analytics tag and set "Track Type" to Event. "Event category" could be "article," "event action" could be "article viewed" and "event label" could be the GTM built-in variable for Page URL or Page Path.
This is important: set "non-interaction hit" to "True."
"Google Analytics Settings" should be your GA settings variable. Check the "Enable overriding settings in this tag" box. Expand "More Settings" and "Custom Dimensions."
Click "Add Custom Dimension" and input the index of the custom dimension that you defined in GA for this purpose. Then, in the value field, put your dataLayer variable for read time.
Add a trigger of type "Event." In the "Event Name" field, put the event name of your dataLayer push ("Article Viewed" in my example). Save the trigger and make sure it's added to the tag.
Save the tag and test it in preview mode.
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 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 want to have custom page tags, which are different from URLs I have, in my Google Analytics report page.
For instance,
Actual URL : /news/today_news.php
Page tag on Google Analytics : /news/today_news.php/Category.News/TodayNews
How can I make the custom page tag with Google Analytics Data Collection API?
There are several straightforward ways to do this (change the GA default name for a given page on your GA-tracked Site).
I. Passing the custom name in as a parameter to "_trackPageview"
This is probably the most common way to do this and probably the most straightforward.
The primary GA Method, _trackPageview, is usually called without passing in any parameters, i.e., pageTracker._trackPageview().
You can however, pass in a string for the name you wish to use for that page. In other words, find the call to _trackPageview on each page whose name you wish to change and insert your new name as a string between the parentheses, e.g.,
pageTracker._trackPageview("the_new_name_for_this_page");
Strictly speaking, the parameter you pass in actually changes the Request URI value to the string you passed in.
To verify: open the relevant Profile in your GA account, then click "Content" in the left-hand side menu, then "Top Content." This will cause a Table to render in the main viewing window of the GA Browser. The left-most column of that Table displays the Page (actually the Request URI). Check the contents of this column for your re-named pages.
GA uses two ways to identify pages in their Reports under the "Content" rubric--by Request URI and by Page Title. The Table displayed when you click on "Top Content" for instance, shows the former in the left-most column (the column is named "Page.") On the other hand, the Table displayed when you click the Report just below "Top Content", which is "Content by Title", shows pages by their title ("Page Title" is the left-most column header). "Page Title" here just refers to whatever appears between the title tag in the head of your page. In other words, the two techniques i just mentioned will not affect the Page's Title (the report "Content by Title" will not be changed).
II. Use a "Filter"
For instance, GA has a custom filter type called a "search and replace" filter, which is probably the best option among the GA filter types. The advantage of this techniques is that it doesn't require any code in the page.
Click "Analytics Settings" > "Profile Settings" (top left in the orange navigation bar), then scroll until you see "Filters Applied to this Profile"; click "+ Add Filter" to the far right. Because each filter type (pre-defined versus custom, which in turn is comprised of six different filter types) is set differently, it's probably best if i just refer you to a relevant GA resource.
III. Use "Custom Variables"
This is technique requires the most effort (though it's still not difficult); it's also the most sophisticated of the three techniques; for instance, using CVs you can re-map a given page to more than one name, which is useful when you want to group your content hierarchically. So for instance, you might wish give a particular page in your e-commerce Site three labels, to describe merchandise category, sex, and Brand, e.g., "Footwear", "Men's", and "Teva", or "Footwear/Mens/Teva". So for instance,
pageTracker._setCustomVar(
1, // 'Index' for this CV (an integer, 1-5)
"MerchandiseCategory", // 'Name' for this CV
"Footwear", // 'Value'--set upon call to _trackPageview
3, // 'Scope' an integer, 1-3, use '3' here because
// i have scoped this particular CV to 'page level'
// (1 and 2 are for visitor and session, respectively)
)
The code above initializes the CV, so it needs to be placed before your call to _trackPageview, because it's that call that sets the value of this variable.
After you've done this, and data has been recorded for your CVs, then you can begin using them. Remember, CVs are not Reports per se, rather than are indeed 'variables' which is much better because you can use them to create any reports you wish through the "Custom Reporting" feature in GA.
For instance, click "Custom Reporting" in the middle of the left-hand navigation panel in the GA Browser (once you have selected a particular profile). Then click "Custom Reports" then "+ Create new custom report" in the top right hand corner. Now click "Dimensions", the green navigation 'button' on the left-hand side, then click "Visitors." Scroll through the values for the 'Visitor' Dimension, and near the end of the list you will see additional values reserved for Custom Variables. If for instance, you had defined a CV called "Visitor Type" with possible values of "RegisteredUser" and "Prospect", that CV would show up here and therefore be available for you to use to create Custom Reports.
Here's what i believe is the Google Analytics Team's most useful explanation of Custom Variables.
And here is an excellent Blog post from a GA Consultant on CVs.