Search code examples
google-analyticstealium

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?

Solution

  • 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:

    1. jQuery selector (or selectors) to pay attention to
    2. "Trigger On" event type (this will be Click in this example)
    3. Tracking event type to run (View event in this case)
    4. Variable & values to set Tealium jQuery onHandler extension config
    5. 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:

    1. jQuery Selector: '#MyID_1, #MyID_2, #MyID_3' -- yes you can pass a list of selectors or nearly any other valid jQuery selector statement
    2. Trigger On: 'click'
    3. Tracking Event: 'view'

    4. 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.

    1. my_path gets mapped to page in the GA mapping toolbox
    2. page_name gets mapped to title
    3. 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.