How to set up and track custom events in Google Tag Manager

Author:

Google Tag Manager (GTM) is a powerful tool that allows you to manage and deploy marketing tags (snippets of code) on your website without needing to modify the code directly. One of the most useful features of GTM is its ability to set up and track custom events. Custom events can help you track user interactions on your site, such as clicks, form submissions, video views, or other user actions that aren’t covered by the standard events in Google Analytics.

In this guide, we’ll go over how to set up and track custom events in Google Tag Manager, step by step.

1. Set Up Google Tag Manager

Before diving into custom events, you need to make sure that Google Tag Manager is correctly installed on your website.

  1. Create a GTM Account: If you don’t have one already, go to the Google Tag Manager website and create a new account. After signing in, you’ll be prompted to create a new container for your website. A container holds all the tags, triggers, and variables associated with your website.
  2. Install GTM on Your Website: After creating your container, GTM will provide you with a code snippet. This snippet should be added to your website’s HTML, typically in the <head> and <body> sections of each page. This enables GTM to fire tags on your website.
  3. Verify the Installation: You can verify that GTM is properly installed by using the “Preview” mode within GTM. This allows you to see which tags are firing in real time as you interact with your website.

2. Understanding Custom Events

Custom events in GTM allow you to track specific actions or interactions on your website that don’t have predefined triggers in Google Analytics. Examples of custom events include:

  • Button clicks (e.g., “Download Now” or “Sign Up”)
  • Form submissions
  • Video plays or video completions
  • Scroll depth tracking
  • Custom JavaScript actions

These actions can be tracked by setting up custom triggers that will fire specific tags when a certain condition is met.

3. Creating Custom Events in Google Tag Manager

Step 1: Set Up the Trigger

A trigger defines when a tag should fire. For custom events, the trigger will listen for a specific action, like a click or form submission. Here’s how to set up a custom event trigger:

  1. Log into Google Tag Manager and select the container for your website.
  2. Go to Triggers on the left sidebar.
  3. Click on “New” to create a new trigger.
  4. Choose a Trigger Type. For a custom event, select the trigger type based on the action you want to track:
    • Click Trigger: To track clicks on specific elements like buttons or links.
    • Form Submission Trigger: To track form submissions.
    • Custom Event Trigger: For tracking JavaScript events or custom actions that don’t fit into other categories.

    For example, to track a button click, you would choose the “Click – All Elements” trigger.

  5. Configure the Trigger: Customize the trigger to target specific elements. For example:
    • Click Trigger: You can specify the CSS class, ID, or other attributes of the button that you want to track. This ensures that only specific clicks are tracked.
    • Form Trigger: Specify the form’s ID or class if you want to track a particular form submission.

    For a custom event, you’ll need to define the event name. For instance, if you’re tracking a form submission, you can set a custom event name such as formSubmitted.

  6. Save the Trigger.

Step 2: Set Up the Tag

A tag in GTM defines what action is taken when a trigger is fired. In this case, the tag could be a Google Analytics event tag or a custom HTML tag.

  1. Go to Tags in GTM.
  2. Click on “New” to create a new tag.
  3. Choose Tag Type: Select the type of tag you want to use. If you’re sending data to Google Analytics, choose “Google Analytics: Universal Analytics” as the tag type. If you are tracking events in Google Analytics, select “Event” under the tag configuration.
  4. Configure the Tag: Enter the event category, action, and label that will be sent to Google Analytics when the trigger is fired. For example:
    • Event Category: “Button Click”
    • Event Action: “Download Button”
    • Event Label: “PDF Download”
  5. Link the Tag to Your Trigger: Under the “Triggering” section, select the custom event trigger you created earlier. This ensures that the tag will fire whenever the defined custom event is triggered.
  6. Save the Tag.

Step 3: Testing Your Setup

Before deploying your changes to your website, you should test the custom event tracking setup to ensure everything is working as expected.

  1. Enable Preview Mode: In GTM, click the “Preview” button in the top right corner. This allows you to test the tags in real time.
  2. Test the Custom Event: Navigate to your website and perform the action that should trigger the custom event (e.g., clicking the button or submitting the form).
  3. Check the GTM Debug Panel: The GTM preview mode will show you which tags are firing. If your custom event trigger works correctly, you’ll see that the relevant tag is firing when the custom event is triggered.
  4. Use Google Tag Assistant (Optional): You can also use the Google Tag Assistant Chrome Extension to check if the Google Analytics tag is sending the right information to GA.

Step 4: Publish Your Changes

Once you’re confident that your custom events are being tracked correctly, it’s time to publish the changes:

  1. Go back to GTM and click on the “Submit” button in the top right.
  2. Create a Version Name and Description for the new setup. This helps keep track of changes made in GTM.
  3. Publish the Changes.

4. Using Google Analytics to Track Custom Events

After setting up custom event tags in GTM, you’ll want to verify that your events are appearing in Google Analytics.

  1. Log into Google Analytics and go to your property.
  2. Navigate to Behavior > Events > Overview. Here, you’ll see the event category, action, and label you defined earlier in GTM.

    If you configured everything correctly, you should see the events being tracked, such as clicks on a specific button or form submissions.

  3. Use Event Data for Reporting: You can use custom events to create custom reports in Google Analytics, analyze user interactions, and optimize your website based on user behavior.

5. Advanced Custom Events (JavaScript and Data Layer)

Sometimes you may need to track more complex interactions that aren’t easily captured by GTM’s built-in triggers. In this case, you can use JavaScript to push custom events to the GTM data layer.

  1. Push Events to Data Layer: Use the JavaScript dataLayer.push() method to send custom data to GTM. For example:
    javascript
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
    'event': 'formSubmitted',
    'formName': 'Contact Us'
    });
  2. Create a Custom Event Trigger for Data Layer Events: In GTM, you can create a trigger that listens for this custom event, using the “Custom Event” trigger type. Set the event name as formSubmitted (the name you used in the dataLayer).

By combining custom events with the data layer, you can track more complex user interactions and send them to Google Analytics or other platforms.

6. Best Practices for Tracking Custom Events

  • Use Descriptive Names: When naming your events (event category, action, label), ensure they are descriptive and easy to understand. This will help when analyzing data in Google Analytics.
  • Keep It Organized: Set up naming conventions for events to keep your tracking system organized.
  • Test, Test, Test: Always thoroughly test your custom events to ensure they are firing correctly before publishing changes.

Conclusion

Tracking custom events with Google Tag Manager is a powerful way to understand how users interact with your website. By following these steps to set up triggers, tags, and custom events, you can monitor user behavior and gain valuable insights into which actions on your site are driving conversions and engagement. With a well-structured custom event tracking setup, you can make data-driven decisions that help improve your website’s performance and user experience.

Categories: Digital Marketing