{"id":4284,"date":"2020-05-21T06:16:11","date_gmt":"2020-05-21T03:16:11","guid":{"rendered":"https:\/\/trackingchef.com\/?p=4284"},"modified":"2023-07-02T12:04:04","modified_gmt":"2023-07-02T09:04:04","slug":"generic-event-tracking-in-google-tag-manager","status":"publish","type":"post","link":"https:\/\/trackingchef.com\/google-analytics\/generic-event-tracking-in-google-tag-manager\/","title":{"rendered":"Generic event tracking in Google Tag Manager"},"content":{"rendered":"\n
\n

UPDATE:
<\/strong>This type of event tracking was a great solution for working on Google Analytics Universal. With it’s sunset and migration to GA4, I feel like this solution is now obsolete and don’t recommend using it.<\/p>\n<\/blockquote>\n\n\n\n

When working with a client to implement a measurement plan in Google Tag Manager (GTM), I often need to set up multiple events to capture different user interactions.<\/p>\n\n\n\n

These can range from SaaS (e.g. Sign up) or user engagement (e.g. Form Submissions). For ecommerce events, I usually choose to stick o the standard naming convention and data layer schema.<\/p>\n\n\n\n

To simplify the setup, I usually create a generic set of a Custom Event and Data Layer Variables that can be reused across any event I want to track. This also enables me to add additional events down the line without altering the current GTM setup.<\/p>\n\n\n\n

Let’s break it down<\/h2>\n\n\n\n

Custom event<\/h3>\n\n\n\n

The first step is creating a Custom Event that will be used as a Trigger. I like to name this event ‘ga_event’ as I mostly use it for Google Analytics events, but it can be named anything you like. The important thing is to be consistent in its naming across whichever events you trigger.<\/p>\n\n\n\n

To create the trigger, navigate to the Triggers page in GTM and click “New.<\/p>\n\n\n\n

Select the trigger type ‘Custom Event’ and set the Event name to ‘ga_event’. The trigger should fire on all custom events.<\/p>\n\n\n\n

\"\"
Setting up the Custom Event<\/figcaption><\/figure>\n\n\n\n

Data Layer Variables<\/h3>\n\n\n\n

To pass the data of the event, I like to use GA4’s event schema which is more flexible than what UA offered.<\/p>\n\n\n\n

In practice, this means we can use multiple event parameters to pass as many values as it can make sense.<\/p>\n\n\n\n

For example, a CTA button can send:<\/p>\n\n\n\n

    \n
  • event name: cta click<\/li>\n\n\n\n
  • position: footer<\/li>\n\n\n\n
  • text: free trial<\/li>\n\n\n\n
  • color: pink<\/li>\n\n\n\n
  • destination: app.example.com<\/li>\n<\/ul>\n\n\n\n

    To pass the data you need to create matching Data Layer Variables (DLV). <\/p>\n\n\n\n

    Custom Variable Template<\/h4>\n\n\n\n

    When using a Generic Event, you need to map all the possible event parameters to the Tag, even though some will apply only to certain events and will be empty for the rest. An issue with this setup is the persistence of the data layer values, in a way that can pass event parameters between consecutive events leading to bad data.<\/p>\n\n\n\n

    To overcome this we can use a great Custom Variable Template by Simo Ahava, called Data Layer Picker. Simply put, it only prints the value from the most recent data layer push, so parameters that weren’t sent will return null<\/code>.<\/p>\n\n\n\n

    To add this template to your GTM container, navigate to the Templates tab and click Search Gallery under the Variables table. Search for ‘Data Layer Picker’ and click Add to workspace. You can then use this variable just like any other standard variable in GTM.<\/p>\n\n\n\n

    Creating new variables for event parameters<\/h4>\n\n\n\n

    To create the DLVs, navigate to the Variables page in GTM, and under the User-Defined Variables click New.<\/p>\n\n\n\n

    Select the variable type as ‘Data Layer Picker’. Next, select ‘Specific property’ and set the Property name to ‘some_parameter’. Save the variable and repeat for any other event parameter you wish to send.<\/p>\n\n\n\n

    The reason for writing ‘some_parameter’ instead of ‘Some Parameter’ is simply because of standard JS naming conventions aligned with GA4 (i.e. snake_case).<\/p>\n\n\n

    \n
    \"image-1927611\"
    Setting up the Data Layer Variable<\/figcaption><\/figure><\/div>\n\n\n

    Creating a variable for the event name<\/h4>\n\n\n\n

    The event name is a specific data layer value that we need to map to the GA4 event. In this case, since it will change on each event, we can use a simple Data Layer Variable in GTM.<\/p>\n\n\n\n

    To create the DLVs, navigate to the Variables page in GTM, and under the User-Defined Variables click New.<\/p>\n\n\n\n

    Select the variable type as ‘Data Layer Variable’. Set the Data Layer Variable Name to ‘event_name’ and save the variable.<\/p>\n\n\n\n

    \"image-7156523\"<\/figure>\n\n\n\n

    Creating a generic Google Analytics event<\/h2>\n\n\n\n

    Now that we have the Custom Event and DLVs ready, we can create our generic Google Analytics event.<\/p>\n\n\n\n

    Navigate to the Tags page in GTM and click New. Select the Tag Type ‘Google Analytics: Universal Analytics’ and set the Track Type to ‘Event’.<\/p>\n\n\n\n

    You can now add the DLVs you created in their relevant slots. <\/p>\n\n\n\n

    Make sure you pair the Google Analytics Config to the relevant tag.<\/p>\n\n\n

    \n
    \"image-1964650\"
    Adding the DLVs to the Google Analytics event<\/figcaption><\/figure><\/div>\n\n\n

    Now that the tag is set up, you can select a trigger that will fire it. Click on the Triggering section and select the Custom Event you created.<\/p>\n\n\n\n

    \"\"
    Adding the Custom Event trigger to the Google Analytics event<\/figcaption><\/figure>\n\n\n\n

    And that’s it, your event is ready to fire.<\/p>\n\n\n\n

    Triggering the generic event<\/h2>\n\n\n\n

    To trigger the event, you need to run the following script on the user interaction you want to capture.<\/p>\n\n\n\n

    The value of ‘event’ should always be ‘ga_event’ (as this is the name of the Custom Event). The value of the DLVs can change according to the data you want to pass.<\/p>\n\n\n\n

         dataLayer.push({\n       'event' : 'ga_event',\n       'event_parameter1' : event_parameter1,\n       'event_parameter2' : event_parameter2,\n       'event_parameter3' : event_parameter3\n     });\t<\/code><\/pre>\n\n\n\n
    Form submission tracking<\/h3>\n\n\n\n
    In this example, I want to send form submission data, so the event’s category is form submission and the event action will carry the form’s name.<\/p>\n\n\n\n
         dataLayer.push({\n       'event' : 'ga_event',\n       'event_name' : 'form submission',\n       'form_name' : 'contact us',\n       'form_id' : '19'\n     });\t<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    When working with a client to implement a measurement plan in Google Tag Manager (GTM), I often need to set up multiple events to capture different user interactions.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,39],"tags":[],"class_list":["post-4284","post","type-post","status-publish","format-standard","hentry","category-google-analytics","category-google-tag-manager"],"_links":{"self":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/comments?post=4284"}],"version-history":[{"count":7,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4284\/revisions"}],"predecessor-version":[{"id":5679,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4284\/revisions\/5679"}],"wp:attachment":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/media?parent=4284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/categories?post=4284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/tags?post=4284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}