Custom Page tagging in Google Analytics - google-analytics

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.

Related

Can I populate a custom dimension in google analytics from page metadata?

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.

Virtual page view issues -datalayer- GTM

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}}

Google Tag Manager - Returning a href from another element when a click tag is fired

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 Do I Measure a Single Page Website That Uses URL Fragments with Tealium/GA?

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.

How to Get GA to do Site Search with Tumblr

In Tumblr, searches are set up so that the query is a method/parameter of the search controller. Basically it looks like this: /search/:query.
I've been playing around from the client side trying to edit it so that it posts in this format:
/search/example?q=example
I'm doing this because GA looks for a parameter in searches. My problem is is that from the JavaScript to the form methods and actions, I cannot get the thing to spit out a query parameter at the end.
Is there anyway to tell Google to look for /search/:query instead of looking for a parameter in the URI?
Yes, you can do this by creating an advanced filter.
Go to your account Admin and then either click on the Account > All filters button on the left, or else the View > Filters button the right. Which one you use depends on whether you want this to be applied to all properties/views of the account, or only to an individual view.
Then, click the + New Filter button.
Enter in a name for your Filter Name such as "search string"
For filter type, select Custom filter radio button.
Then select the Advanced radio button.
Then from the Field A->Extract A dropdown, select Request URI. In the input field to the right of this, enter in ^\/search\/(.*)
Then from the Output To->Construtor dropdown, select Search Term. In the input field to the right of this, enter in $A1
Then save the filter and you should be good to go.

Resources