Search
Close this search box.

Google Tag Manager Button Click Tracking in Google Analytics 4 & Facebook Ads

Last Modified on April 17, 2024

Are you looking into more advanced tracking techniques?

Deploying tags on all pages is fundamental for learning Google Tag Manager. It is necessary for tools like Google Analytics 4 and remarketing with Meta Ads or Google Ads.

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

However, what if you wanted to fire a tag on a specific page or after a specified user interaction? The answer is the Google Tag Manager button click tracking.

This technique is well suited for cases where you have a thank you page in your online shop or if somebody submits a form and you want to track that.

Here is an overview of what we’ll cover:

Let’s dive in!

Creating a GTM Custom Trigger

We’ll first discuss how to create custom triggers in Google Tag Manager.

Inside our demo shop, we have a Contact Us form.

The Contact Us form in the demo shop

We’ll fill out the form and click the Submit button.

Submitting the Contact Us form

After a form submission, users arrive at a Thank You page. This behavior is typical for most forms out there.

Thank you page after a form submission

So, we have this specific page that we want our tag to fire on. Another example of this scenario is when we want to track a lead event to our Meta ad system so that we can optimize based on the leads we have submitted. How would we do that?

First, we must define a trigger in GTM to fire on this page.

In your Google Tag Manager account, click TriggersNew.

Creating a new trigger

Next, click Trigger Configuration. Here, we get many different events for which we can fire and evaluate our triggers, like checkpoints.

Different tag types in GTM

For example, when the page loads, we have Page View. When someone clicks a button, we have All Elements.

There are also trigger types for certain user engagement events and custom events that you can utilize to check whether your trigger is true or false.

That is what a trigger is. It is a set of rules that GTM evaluates at a given point, and these points are the trigger types you see here.

Now, we still want to evaluate our trigger on the loading of this website, but it should only fire at the thank you page.

🚨 Note: We will discuss creating a trigger configuration based on a unique URL upon form submission. If your form behaves differently, check out our guide on the 3 Form Tracking Techniques with GTM, where we discuss two other trigger types.

Select the Page View trigger type. Next, fire it on Some Page Views only, which opens the filter section.

Selecting the page view trigger type and setting it to fire on some page views

In the filter section, we can choose certain available conditions. For example, we have the Page Hostname, Page Path, Page URL, Referrer, and the option to select a built-in variable.

To demonstrate the differences between the Page Hostname, Page Path, and Page URL, let’s look at an example – our thank you page URL.

Thank you page URL

Here are the values of the page-based variables based on the thank you page:

  • Page Hostname: demoshop.measureschool.com
  • Page Path: /contact-u/thank-you-page/
  • Page URL: https://demoshop.measureschool.com/contact-u/thank-you-page/

The page hostname is the domain name assigned to a host computer, the page path is everything after the hostname and before any query stings (if present), and the page URL is the full URL. Let’s utilize the page path variable.

Next, we have different matching conditions. Most are self-explanatory, and we have guides for the other more sophisticated options if you want to try them out.

💡 Top Tip: Check out our guides on How to Use RegEx for GTM and the Matches CSS Selector Option in GTM.

We want to fire our tag when the page path contains thank you. Set the firing condition to Page Path contains thank-you. Next, give the trigger a descriptive name. We usually go with the trigger type first, then the condition after. Finally, click Save.

Creating a trigger for the thank you page

The next step of our Google Tag Manager button click tracking implementation is to connect this trigger to a tag. For this example, we want to set up a Meta Pixel and send our event to Meta.

Meta Pixel Event Tag Configuration

To start, let’s go to TagsNew.

Creating a new tag

If you want to send an event to Meta, select Tag ConfigurationFacebook Pixel.

Selecting the Facebook Pixel tag template

If you do not see this tag template from the list, import it from the Community Template Gallery. It contains listings of all community-created tags and variable templates.

💡 Top Tip: Check out our Google Tag Manager Custom Templates guides to learn which templates are available, where to get custom templates, and how to import them to your GTM container.

To set up a Meta Pixel, we need the pixel ID. Go to the Events Manager in the Meta Business Suite. In the Overview tab, copy the Pixel ID.

Copying the pixel ID in the events manager

Paste this in our tag configuration. Next, we will stick with a standard event name and choose one from the list. Select Lead since it seems fitting for our example.

Tag configuration of the Meta Pixel lead event tag

Next, we will set our trigger. Click Triggering and select our newly created thank you page trigger. Finally, click Save.

Selecting the thank you page trigger

Give the tag a name and click Save.

Naming and saving the Meta Pixel lead event tag

Alright! We need to preview our Google Tag Manager button click tracking implementation. Then, test if our tag and trigger work properly.

Testing the Custom Tag and Trigger

First, click Preview to enter the GTM preview mode, which will connect the Tag Assistant to your website,

Entering the GTM preview mode

Next, in the Events Manager, go to the Test Events tab. Click Clear Activity.

Clearing activities in the test events tab of the events manager

Fill out and submit the form until you reach the thank you page.

Reaching the thank you page upon a test form submit

Looking at the Tag Assistant, our Meta Pixel lead event tag has fired successfully.

Successful firing of the Meta Pixel lead event tag

When we click on the tag, we can see the Firing Triggers associated with this tag and which specific event the tag fired. In our case, it is the Container Loaded event.

Firing triggers and events associated with the Meta Pixel lead event tag

Click the Container Loaded event, then select our lead event tag. We can see that all firing trigger conditions have the check mark, which is why we were able to fire our tag.