Tracking Custom Attributes using Google Tag Manager

Custom attributes are used to put visitors in different buckets, and allow you to filter based on this information. Zuko offers device and browser segmentation out of the box - this functionality allows you to keep adding new segments based on information you are already collecting in your GA and GTM setup.

Common attributes tracked by visitors might include new v returning, visitors that see a particular version of a page in an AB test, their basket size and where the visitor came from.


Importantly, you may wish to use attributes that are set at the start of the visitor sessions, rather than during the session as you would with custom event tracking. This might not always be the case however, but is a good rule of thumb.

Setting up custom attributes is very simple and involves just two steps:

  1. Amend your existing activity tracking code with an additional line of code
  2. Choose a key that makes sense to you and use {{}} to pick from your pre-existing variables

Here’s how it works in more detail:

The tag

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>

<script></script>

  Zuko

    .trackForm({

      target: document.getElementById('mailing-list-signup'),

      slug: 'YOUR FORM SLUG'

    })

    .setAttribute('KEY', 'VALUE')

    .trackEvent(Zuko.FORM_VIEW_EVENT)

You’ll notice that most of the above is in fact the normal Zuko activity tracking tag with one change. The key difference is the addition of the following line:

.setAttribute('KEY', 'VALUE')

This sets the attribute. The Key becomes the heading under which you’ll see the values when looking at the filter drop down in Zuko:

The Key can be whatever you think will be clearest in the Zuko app. 

For the value, you will want to latch onto a Variable set in GTM. To do this, simply type in ‘{{‘ and GTM will show you a list of options:

Here I’ve selected the Referrer Variable:

When this tag loads, if the variable is set and present, this will be pushed into Zuko. For each new referrer, a new line will be created automatically and appear in Zuko in your reporting:

Note that both the attribute value is limited to 85 characters long. If it is longer than 85 characters the attribute will not be accepted.

The trigger

With Custom Attributes, most of the time you’ll want to set these early in the session (so you’ll get data on both completed and abandoned form sessions). You’ll want to use something like Page View or Window Loaded and your form URL:

NOTE - If you’re simply amending your main Form Activity Tracking code to include the setting of custom attributes, you may already have the trigger set up. In this case it is fine to keep the trigger as it was - as long as the variable is set at the time the code loads, the custom attribute will be set for that session.

To summarise for those wanted to set an attribute when the form is loaded and who have a suitable variable set up::

  1. Amend your existing activity tracking code with an additional line of code
  2. Choose a key that makes sense to you and use {{}} to pick from your pre-existing variables

That’s it!

Remember anything you’ve already got collecting as a variable can be used to set attributes:

Example:

In the above, I have added an extra line to the main Activity Tracking Code to set an attribute of ‘Referrer’ using my referrer variable in GTM. The trigger remains the same (firing on Window Loaded on my form page).

Setting attributes during a session (not at the beginning)

You can also push attributes through to Zuko during a session.

In this case, you’ll need a separate tag to your main Zuko Activity Tracking code that will look like this:

<script>
window.zuko = window.zuko || {};
window.zuko.attributes = window.zuko.attributes || {};
window.zuko.attributes['ATTRIBUTE NAME'] = '{{VARIABLE}}';
</script>

You’ll then need to use a trigger to fire the above when that Variable can been set and can be safely pushed into Zuko.

Useful Tag Manager Articles

Setting up a data layer 

This essentially pushes information from your website and about your visitors into a place that other Google products can then access them. Basket size, products, and anything else can be pushed into this data layer: https://support.google.com/tagmanager/answer/6164391?hl=en

Creating a data layer variable

This allows you to turn that information you’ve pushed into the data layer into variables you can view inn GTM and then set triggers based on them: https://www.analyticsmania.com/post/data-layer-variable/

Using Lookup Tables

These can be used to clean up noisy variable values and make them nice and easy to read. For example you can create a lookup table that turn 

?utm_source=twitter.com&utm_medium=social&utm_campaign=tweets

Into

Twitter


Find out more here - https://www.searchviu.com/en/lookup-tables-google-tag-manager/

See more guides
zuko full colour logo
Formisimo Ltd, Colony, 5 Piccadilly Place, Manchester, M1 3BR
VAT Number: GB181252425
Registered in England as company number 08859680
New Business: sales@zuko.io
Support: support@zuko.io