Search

How to Track Elementor Button Clicks with Google Tag Manager (Step by Step)

Google Analytics is the go-to solution for obtaining a comprehensive traffic analysis report for your website due to its immense popularity and robust features. This powerful tool empowers website owners and marketers to monitor and analyze various aspects of their site’s traffic and user behavior.

By installing Google Analytics, you can gain valuable insights into your visitors, including details like:

  • The number of visitors
  • Their geographical locations
  • The devices they use
  • The pages they visit
  • The duration of their stay

However, if you need to track specific user interactions, such as monitoring how many visitors click on a specific button on your website, Google Analytics might not be the ideal solution.

Instead, you can leverage Google Tag Manager (GTM), incorporating Google Analytics as one of its tags for regular reports, and create a custom event-tracking tag for that particular button. This tag allows you to collect data each time the button is clicked.

In this tutorial, we will walk you through the process of utilizing Google Tag Manager to track a specific Elementor button on your website, allowing you to obtain detailed insights while still accessing your Google Analytics reports simultaneously. Let’s get started!

How to Track Elementor Button Click with Google Tag Manager

If you already have Google Tag (Google Analytics Configure previously) set up on your Google Tag Manager. You can proceed to the fourth step to start tracking the button right away.

Step 1: Set Up a Google Tag Manager Account and a Container

To get started, go to the Google Tag Manager site and start creating an account by clicking the Create Account button.

When setting up the account for the first time, you’ll need to create the initial container. Begin by entering the Account Name, selecting your Country, and filling in the Container Name fields. Choose ‘Web‘ as the Target platform. Finalize the setup by clicking the Create button and accepting the terms of service.

Step 2: Install Google Tag Manager on Your Website

After setting up your Google Tag Manager account, you will receive the code required to install Google Tag Manager on your website. Alternatively, you can access the code by clicking on your Google Tag Manager ID in the dashboard. Copy the first option of the code, specifically designed for the <head> element of your website

Click the ID to show the installation code

To ensure the code runs on every page of your website, utilize Elementor Custom Code. After copying the code, go to your WordPress dashboard. Navigate to ElementorCustom Codes, and click the ADD NEW button.

On the ‘New Code’ page, provide a title and ensure that the selected Location is the <head> option. Paste the code into the provided code editor. Then, click the Publish button to activate the code on your website.

Step 3: Create the Google Analytics Tag

Get the Required Google Analytics ID

Let’s start by creating a tag for Google Analytics for the first tag. Retrieve the Measurement ID from your Google Analytics dashboard by navigating to Admin Data Streams, selecting the desired data stream, and copying the Measurement ID from there.

Create the Google Tag

Once you have the Measurement ID, go back to the Tag Manager dashboard, now, click the New Tag block to start creating the tag.

In the upcoming section, provide a title for the new tag. As it’s a Google Analytics 4 tag, let’s name it “GA4-config.” Next, click on the Tag Configuration block, choose Google Analytics, select Google Tag, and paste the previously copied Measurement ID into the Tag ID field.

Now click the Triggering block — select All Pages and then click the Save button to save the tag.

Finally, publish the newly created tag by clicking the Submit button in the Tags menu. Add a version name for easier reference to remember the changes made in this version. After adding the version name, click the Publish button to complete the process.

Test the Google Tag

To test if the newly created tag is functioning correctly, click the Preview button on your dashboard. This action will open a Tag Assistant page. Click the Connect button within the Tag Assistant page to test the connection between your tag manager and your website.

Then click Continue on the tag assistant page to see the report of the executed tag. You can see from the screenshot below that the GA4-config tag has been fired.

Step 4: Creating the Tracked Button

Enable Elementor Button ID Tracking

Before you add a custom CSS ID to your Elementor button, you might need to add some CSS snippets to deactivate the pointer-events on certain elements within the button. This action enhances the clarity of your button’s custom ID, allowing Google Tag Manager to read it more effectively.

GTM can’t get the Elementor Button ID.

Here is the CSS snippet for fixing the ‘no-button’ ID issue. To apply this fix, navigate to Site SettingsCustom CSS editor within your Elementor editor. You can access this editor by either editing a page or a template through the Hamburger () menu.

.elementor-button-content-wrapper{
    pointer-events: none;
}
.elementor-button span{
    pointer-events: none;
}

Add a Custom CSS ID to Your Button

After following the aforementioned instructions, you can either create a new button or edit an existing one to assign a custom ID. Locate the ‘Button ID‘ field in the button settings and input your desired custom ID there.

“tracked-button” as the Button ID

Step 5: Create the Button Click Tracking Tag

Activate the Clicks Variables

Before creating a new tag for button click tracking, ensure that the click variables are activated. Navigate to the Variables menu — click on Configure then scroll down to the Clicks section to activate all the variables there.

Those variables will let the Google Tag Manager get all the info on the clicked button on your website.

Create a Trigger for the Tracking Button Tag

The next step is to create a trigger for the button click tracking tag. Click on the Triggers menu on the dashboard then click the New button to start creating one.

Add a title for the new trigger such as “TrackButtonClick” then click on the Trigger Configuration block to open the Choose trigger type window and select All Elements under the Click options.

Afterward, you will have the option to select the trigger target under the This trigger fires on options. Select Some Clicks to show more options then select Click IDEquals — your button ID ( “tracked-button” in this case ) then Click the Save button to save the trigger.

Create The Button Click Tracking Tag

Now, it’s time to create the tag to track the button with the custom ID you’ve chosen. Begin by clicking the Add a new tag block or the New button within the Tag menu on your Google Tag Manager dashboard.

Assign a title to the tag, for example, ‘Track-Button-Click,’ and navigate to the Triggering section. Select the trigger you created in the previous step.

Continue by clicking the Tag Configuration section and select Google Analytics Google Analytics: GA4 Event option.

In the appearing section, enter the necessary information in the Measurement ID, and Event Name fields. To enhance tracking for the button click event in Google Analytics, click the Add Parameter button and add a parameter. For this tutorial, let’s include the button text (referred to as the Click Text value) as one of its parameters.

By including the button text as one of its parameters, you can track multiple buttons with different text using Google Analytics Event. This allows you to determine which text is clicked more frequently. Proceed to click the Save button to save the tag.

Test the Button Click Tracking Tag

Before publishing the tag, it’s important to test it in a trial environment. Click the Preview button, then proceed to the tag assistant page and click Connect using the link to your button page on your website.

Now, test the tag by clicking the tracked button with the custom ID and see if the tag is fired in the Click log in the tag assistant.

After confirming that the tag is fired from Google Tag Manager, proceed to check Google Analytics to ensure the report can be generated later. Navigate to the Admin settings and click on the DebugView menu.

Wait for a moment to allow the event timeline to update. As shown in the above screenshot from Google Analytics DebugView, you’ll notice a ‘track_cta_button‘ event, which corresponds to the event name of the tag we just created. Click on this event for more detailed information, and further, click on the custom link_text parameter to view the specific button text associated with the event.

Publish the New Button Click Tracking Tag

Once you are confident the tag is functioning correctly, publish it by clicking the Submit button on your Google Tag Manager dashboard. Provide a new version name, such as “Button Click Tracking Installed“, and click the Publish button to make your changes go live for your website visitors.

Step 6: Create a Custom Report on Google Analytics

One last important step once the button tracking tag is up is to set up a custom report on Google Analytics displaying the total number of clicks on the tracked button.

To initiate the process of creating a custom report from your Google Analytics dashboard, navigate to the main menu, click on Explore, and then select Blank on the Explorations page.

In this blank report or exploration as Google called it, provide the EXPLORATION NAME, click on DIMENSION then add the following dimensions:

  • Event name: To filter the report by event name
  • Link text: To get the button text (this is the parameter that is sent together with the event from Google Text Manager)

Once selected, click the Import button to add them.

Then Import the Event Count in the METRICS to count how many clicks the buttons are clicked.

Continue by adding the Link text dimensions on the ROWS block, and adding the Event count metrics to the VALUES block either by dragging it or clicking the + icon.

After entering the values, the Free Form 1 section on the right side will automatically generate a report. However, you still need to apply a filter to exclude any unrelated elements not associated with your tracked button.

Add the Event name metrics to the FILTERS block, then select the Exactly matches for the match type and the event name (track_cta_button in this case) for the Expression, and click Apply to start the filtering process.

Now, you have a simple report that displays the click count for your tracked button.

“That’s it! The report has been automatically saved, and you can access it anytime by opening the Explorations page and clicking on your custom report from the table.”

Please note that Google Analytics reports and explorations may take 24-48 hours to process data from your website or app. If you do not see your button on the report, it could be because not enough time has passed to generate the data

The Bottom Line

While Google Analytics is a powerful tool for analyzing overall website traffic and user behavior, it might not provide detailed insights into specific user interactions, such as button clicks. To address this limitation, you can use Google Tag Manager (GTM) in conjunction with Google Analytics.

By creating a custom event-tracking tag in GTM for the specific button on your website, you can collect precise data on how many times the button is clicked. This approach enables you to obtain detailed insights while still accessing your Google Analytics reports for a comprehensive analysis of your website’s performance.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?