Lucas Callado | Blog    About    Archive

22 Aug 2016

Tracking Google Analytics Goals using dataLayer on Google Tag Manager

The goal of this article is to provide an alternative to the click action with JavaScript such as ga('send', 'event', 'category', 'action', 'label') that is not available/defined through Google Tag Manager when creating a Google Analytics tag.

Creating a ga call on your code (webpage) to send data back to Google Analytics will generate an error like: ga is not defined.

The alternative to this problem is to create a dataLayer structure and push that data through the existing structure that Google Tag Manager provides.

Google Tag Manager (GTM) has a built-in structure called dataLayer. It can be used to push data into Google Analytics Goals.

The script tag for Google Tag Manager looks like the following — except that you need to use your GTM ID —  and the dataLayer variable can be found in the code.

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YOUR_ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-YOUR_ID');</script>
<!-- End Google Tag Manager -->

The next step is to create a default Google Analytics Tag in GTM. The Track Type should be Event. In addition to that, you will need to create specific variables to be used as parameters to configure the tag — Parameters are “Category”, “Action”, and “Label”.

GTM-01

These Data Layer Variables can be created as follows — one for each parameter (category, action, label — all lower case):

GTM-09

The next step is to create a Trigger for the Event

GTM-02

Choose “Custom Event“. I recommend using the same Title for Trigger Name and Event Name. In my case, Event-NAME-Here

GTM-03

Now, you will see your new Trigger associated to your new Google Analytics Tag. Go ahead and Save your tag.

You have completed all the steps on Google Tag Manager. Let’s jump to Google Analytics to associate this tag to a new Google Analytics Goal.

Go to Google Analytics Admin — on a View that you want to setup this Goal.

GTM-04

Hit +New Goal

GTM-05

Select “Custom”

GTM-06

Enter the Goal Name and Selec Type “Event”

GTM-07

Now you will have to define the “Category Name“, “Action Name“, and “Label Name“. This will be used on the dataLayer structure that is built through the JavaScript on the Conversion Page.

Following is the dataLayer code that needs to be added to a Landing Page with a conversion Form of any kind. Examples of marketing conversions forms are Free Trial and Premium Content like White Papers, Webinars, Brochures, Technical Videos, and so on.

<script>
 dataLayer.push({
                'event':'Event-NAME-Here',
                'category':'Category-NAME-Here',
                'action': 'Action-NAME-Here',
                'label': 'Label-NAME-Here'
 });
</script>

Conversion Pages are capturing personal information. From a business standpoint, sales and marketing cycles are initiated through this online activity that captures name, email, company, location, and any other relevant information that leads into a future contact or prospect.

In my specific case, Marketo is the marketing automation tool of choice. You can also build your own set of conversion forms and custom functions to validate fields and submit forms to your back-end.

For that, it is recommended to add a validation to make sure that you are pushing the dataLayer structure after the visitor submits a specific form.

<script>
MktoForms2.whenReady(function (form) {
  form.onSuccess(function(values, followUpUrl) {
    window.alert('Hello World');
    dataLayer.push({
                'event':'Event-NAME-Here',
                'category':'Category-NAME-Here',
                'action': 'Action-NAME-Here',
                'label': 'Label-NAME-Here'
 });
});
</script>

The ‘Hello World’ is just a flag to indicate the form has been submitted on success and the dataLayer is now ready to push this event back to Google Analytics.

Note: If everything is working as expected your Goal will show up on Google Analytics. You will see the new Event coming through your Google Analytics Real Time -> Events data.

Event Category and Event Action will match with the information submitted by the dataLayer.push after the form gets submitted.

GTM-10

 

Related Posts