How to Track Divi Buttons and Events with Google Tag Manager

How to Track Divi Buttons and Events with Google Tag Manager

We hear a lot about Google Analytics. It’s an essential tool for tracking the traffic of your website. It shows where your traffic came from, how long they spent on your site, what pages they looked at, and more. What we don’t hear a lot is that Google has several tools for tracking your website.

One such tool is Google Tag Manager, which tracks events such as individual button clicks. This is great for tracking newsletter signups, CTA clicks, product clicks, and lots more. In this article, we’ll see how to track your Divi buttons and event with Google Tag Manager

Setup Google Tag Manager

Setup Google Tag Manager
  • Google+
  • Facebook
  • Twitter

Go to the Google Marketing Platform website and create a free Tag Manager account.

Setup Google Tag Manager
  • Google+
  • Facebook
  • Twitter

Enter the account name, container name, and choose Web to create a tab that will work on your Divi website.

Setup Google Tag Manager
  • Google+
  • Facebook
  • Twitter

Once you click Create you’re provided with two code snippets to add to your website. The two are identified for you as head and body. You’ll paste them within the head and body code fields in Divi. Once you’ve pasted them you can click OK to close this to see the Tag Manager dashboard.

Adding Google Tag Manager Code to Divi

Adding Google Tag Manager Code to Divi
  • Google+
  • Facebook
  • Twitter

Go to the Integration tab in your Divi theme options (in the WordPress dashboard – Divi > Theme Options > Integration). Enable header and body code and paste the code into their proper fields.

Tracking Events

Google Tag Manager tracks button clicks through Data Layer Event Code and Auto-Event Tracking. To use them you’ll need to create and configure Tags and Triggers. In this tutorial, we’ll use Auto Event Tracking.

Enable Clicks

Enable Clicks
  • Google+
  • Facebook
  • Twitter

In the Google Tag Manager dashboard, select Variables in the menu on the left. This shows the built-in variables. Select Configure in the upper right corner.

Enable Clicks
  • Google+
  • Facebook
  • Twitter

Scroll down to Clicks and select each of the options. There are several options checked by default. You can leave them checked. Click the X at the top when you’re done.

Enable Clicks
  • Google+
  • Facebook
  • Twitter

Next, select Triggers from the menu on the left, and then New to create a new trigger.

Enable Clicks
  • Google+
  • Facebook
  • Twitter

This opens a modal to create the trigger. Give it a name and click Trigger Configuration.

Enable Clicks
  • Google+
  • Facebook
  • Twitter

Under Click, select All Elements. This closes the modal.

Enable Clicks
  • Google+
  • Facebook
  • Twitter

You’ll see the trigger type and a couple of options of how the trigger fires. This will be a site-wide trigger, so select All Clicks and then save the trigger.

Enable Clicks
  • Google+
  • Facebook
  • Twitter

Next, you’ll need to publish the trigger to use it on your Divi website. Click Submit in the upper right corner.

Enable Clicks
  • Google+
  • Facebook
  • Twitter

This opens a modal with configuration options. Provide a version name and description, view your choices, and select Publish.

Enable Clicks
  • Google+
  • Facebook
  • Twitter

You now have a new trigger that can track your Divi button clicks.

Preview Mode

Preview Mode
  • Google+
  • Facebook
  • Twitter

In the Workspace tab of the Tag Manager dashboard is a button called Preview. Click this button to enable the Tag Manager toolbar on your website.

Preview Mode
  • Google+
  • Facebook
  • Twitter

Your Divi website will now display the Tag Manager toolbar on your homepage. Only you will see this, so your visitors will see the page as normal. Selecting Preview again disables this toolbar. Here, you can see data for each click including tags, variables, data layer, and errors.

Preview Mode
  • Google+
  • Facebook
  • Twitter

It shows the data for each button click individually. I’m viewing the variables, which displays the variable, variable type, return type, and value. This is click number 7. The Click Classes variable shows the button name in code, which is my newsletter button. Use this information to create detailed tags and events.

Preview Mode
  • Google+
  • Facebook
  • Twitter

This is the Data Layer. It shows the code for the click event.

Preview Mode
  • Google+
  • Facebook
  • Twitter

Select the down arrow on the right to minimize the window.

Tracking a Specific Button

Tracking a Specific Button
  • Google+
  • Facebook
  • Twitter

Rather than tracking every button click, we can also track a single button. I want to track the newsletter button. Go to the click events in the Tag Manager of your website, select Variables, and copy the Value of Click Classes. Don’t copy the quotation marks.

Tracking a Specific Button
  • Google+
  • Facebook
  • Twitter

In your Tag Manager dashboard, open your site-wide trigger and make a few edits. Select Some Clicks.

Tracking a Specific Button
  • Google+
  • Facebook
  • Twitter

Make sure Click Classes and contains are selected in the first and second fields from the left. In the right field, paste in the name of the button you want to track. I’ve also changed the name of the trigger to be more descriptive. Click Save.

Tracking a Specific Button
  • Google+
  • Facebook
  • Twitter

Now it will track the clicks on my newsletter button, but to use it we need to add the trigger to a Tag.

Creating a Tag

Creating a Tag
  • Google+
  • Facebook
  • Twitter

In your Tag Manager dashboard, select Tags and then click New.

Creating a Tag
  • Google+
  • Facebook
  • Twitter

This opens an editor where you can give the tag a title, choose the tag configuration and triggering, and save the tag. Give it a title that makes sense (I’ll name mine Newsletter Button Analytics) and select Tag Configuration.

Creating a Tag
  • Google+
  • Facebook
  • Twitter

Next, choose the type of tag you want to create. To track button clicks and events, select Universal Analytics.

Creating a Tag
  • Google+
  • Facebook
  • Twitter

Now, select the track type. You have lots of options including page view, event, and more. Since we’re tracking button clicks and events, I’m selecting Event.

Creating a Tag
  • Google+
  • Facebook
  • Twitter

Now, we can provide tracking parameters including category, action, label, value, etc. This will build the variables that the tracking code will use. Each parameter uses the same variables and you can use as few or as many as you want. I’ve labeled mine:

  • Category – Newsletter Button Clicks
  • Action – Click
  • Label – Page Path

Creating a Tag
  • Google+
  • Facebook
  • Twitter

Under the fields you’ll see Google Analytics Settings. Open this and set up a tracking ID. Click the question mark to get information about your tracking ID. Leave Cookie Domain to auto. Click Save. It will ask for a name for the variable. I chose Newsletter Button Analytics Settings.

Creating a Tag
  • Google+
  • Facebook
  • Twitter

It takes you back to the Tag settings. Click Triggering. This allows you to add your trigger to the Tag.

Creating a Tag
  • Google+
  • Facebook
  • Twitter

Select the trigger you set up earlier from your choices. Mine is named Newsletter Button Clicks.

Creating a Tag
  • Google+
  • Facebook
  • Twitter

Now, click Save and Google Tag Manager now tracks your specific button.

Creating a Tag
  • Google+
  • Facebook
  • Twitter

Click Submit to publish the new tag. Select Preview to see the button clicks on your Divi website.

Creating a Tag
  • Google+
  • Facebook
  • Twitter

Now, you can track specific buttons. Select the click event you want to analyze and you’ll see several sections with information about the tags. This includes a box under Tags Fired with detailed analytics.

Creating a Tag
  • Google+
  • Facebook
  • Twitter

Click to open the analytics for information about the trigger, click event, properties, and more. You can also track your analytics in the Google Analytics dashboard. This is helpful to know which newsletter buttons are effective and which are not.

Ending Thoughts

That’s our look at how to track Divi buttons and events with Google Tag Manager. It does take a few steps to set it up, but it’s not difficult and the ability to track individual buttons and events for free is well worth the time. Easily create tags for newsletter buttons, product links, CTAs, and lots more, and see detailed analytics for each button.

We want to hear from you. Do you track Divi buttons and events with Google Tag Manager? Let us know about your experience in the comments.

Randy Brown

Randy A Brown is a professional writer specializing in WordPress, eCommerce, and business development. He loves helping the WordPress community by teaching readers how to improve their websites and businesses. His specialties include product reviews, plugin and theme roundups, in-depth tutorials, website design, industry news, and interviews. When he's not writing about WordPress he's probably reading, writing fiction, or playing guitar.