How to Create Custom Facebook Events With Google Tag Manager From Your Website [FREE BONUS]

Introduction

As we all know, data is king. Website analytics are vital to running a successful business. But with all the overwhelming metrics to track, you may be thinking “Where on earth do I start?”

Monitoring your metrics and creating custom Facebook events effectively is vital to a successful campaign. Knowing what to track, then implementing a strategy with the data tracked can be more complicated than it seems. We want to make the process of creating Facebook events with Google Tag Manager as seamless as possible.

In this article, you will learn how to create custom Facebook events with Google Tag Manager to effectively track specific actions taken on your website, then be able to create custom Facebook audiences based on the action taken on your site. An example of this may be as simple as a website visitor clicking an action/button on your website page or even scrolling to a specific scroll depth on your website, then being added to a custom Facebook events audience, where you can then run retargeting Facebook ad campaigns to the visitors that took the specific action defined.

How to get started with setting up Google Tag Manager and Custom Facebook Events

Now first thing is first, you will need to start off by installing your Facebook pixel code into Google Tag Manager.

‍

This may seem overwhelming; however, this is actually a rather simple process. Follow the steps below to get your Facebook Pixel code setup with Google Tag Manager to start creating your first custom Facebook events.

In essence, you need to copy the pixel code from Facebook, make a few iterations to the code, then simply save and publish to Google Tag Manager. Once this is setup, don’t forget to test the pixel code from Facebook to make sure it is functioning properly with Google Tag Manager.

‍

Start by going to https://business.facebook.com/adsmanager to access your Facebook Business Manager. After you navigate to your business manager, select “Ads Manager” and navigate to the “Events Manager” page.

‍

Once you have arrived at the “Events Manager”, you should see your Facebook Pixel ID. Copy your Facebook Pixel ID to your clipboard and proceed back to Google Tag Manager.

‍

‍

Once you have your Google Tag Manager account setup, navigate to the “Tags” page from the side menu.

‍

‍

Then, select the “New” button to create a new tag for your Facebook Pixel ID.

‍

‍

Upon creating a new tag, decide what to name it. I suggest naming the tag “Facebook Pixel ID” for easy identification. Be sure to select “Tag Configuration” to initiate the Facebook Pixel tag configuration process.

Although there are multiple ways to connect your Facebook Pixel ID, I suggest adding it via. HTML code. To do so, click “Custom HTML” and proceed to configuring your pixel.

‍

‍

To complete your tag configuration, copy and paste the HTML code provided below. Be sure to paste your Facebook Pixel ID to each part of the code named: PIXEL CODE.

‍

‍

<!-- Facebook Pixel Code -->‍<script nonce="9BWeoBLb">‍!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?‍n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;‍n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;‍t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,‍document,'script','https://connect.facebook.net/en_US/fbevents.js');‍fbq('init', 'PIXEL CODE');‍fbq('set','agent','tmgoogletagmanager', 'PIXEL CODE');‍fbq('track', "PageView");‍</script>‍<noscript><img height="1" width="1" style="display:none"‍src="https://www.facebook.com/tr?id=PIXEL CODE&ev=PageView&noscript=1"‍/></noscript>‍<!-- End Facebook Pixel Code -->‍

‍

After completing your tag configuration, be sure to select save. Now that you have your Facebook Pixel ID saved as a tag, you will easily be able to add it to other custom tags and triggers you create in the future. You are not one step closer to creating your custom Facebook events!

To continue, proceed to the side menu and select the “Variables” page. Be sure to enable all the necessary variables you intend on using. In our example, we will be using all the variables related to “Clicks”.

‍

‍

After configuring the variables, proceed back to the menu and navigate to the “Tags” page.

Select the create a new tag button and proceed to the “tag configuration”. Once again, be sure to give the tag a name that is easily recognizable. In this case, we will be setting this tag up to create a custom event within Facebook Ads Manager. To do so, we will need to create a little Javascript. You can copy and paste the code from below.

‍

<script>fbq('trackCustom', 'Phone',{click: {{Click URL}}});</script>

‍

‍

After adding the script, proceed to the “advanced settings”. Be sure to select the following criteria to ensure your Facebook pixel fires properly.

‍

‍

After finishing the tag configuration, we need to set up the triggering. In this case, we want the Facebook Pixel to fire an event if a visitor clicks on the phone number button via. our website. To do this, we need to create a trigger associated with our website button text.

First, select “trigger type” and choose the option “Just Links” under “Clicks” (See Below).

‍

‍

‍

After selecting your trigger type, we need to choose when to fire this trigger. To do so, we need to define an event that is associated with the “Phone” button on our website.

‍

Finding a unique variable using Facebook events with Google Tag Manager

There are a few ways to find an event associated with a specific element on your website. You can use the Google tag manager debugger, inspect element, or simply use a URL associated with the element. In this case, we will use inspect element (this is equipped with the Google Chrome web browser).

First off, we need to go to the element on the website we are trying to set up the event with. In this case, we will use the www.stiddle.com website and setup the button, “Sales: +1 (844) STIDDLE” button.

Select “inspect element”, then find a unique variable that is associated with your site element. In this case I found the variable, “tel:” to be unique.

‍

‍

Copy over the unique variable from your site element to your clipboard and continue back to your Google Tag Manager. Before pasting your variable, be sure to select “This trigger fires on: Some Link Clicks”. This will ensure the trigger is only fired when a visitor selects the unique variable set by you. Be sure to paste your unique element variable to your trigger, then save your trigger configuration.

‍

‍

Nice work! You are almost finished. Lastly, you want to preview and submit your changes to Google tag manager. After you submit changes you will be ready to custom Facebook events!

‍

‍

Verify your changes

I highly recommend verifying the changes you have made. To do so, download the Google Tag Assistant Chrome extension. You can download this extension here: https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk.

Once installed, you will be able to check and verify that your Google Tag Manager is installed correctly on your website.

‍

‍

After confirming that your Google Tag Manager was installed correctly, you can proceed to your Facebook ad account and navigate to the "Events Manager". If everything has been setup correctly, you should see your new custom Facebook event created in your "Events Manager" where you will be able to see the custom Facebook events.

Testing your Facebook Pixel Event Trigger

The final step is to check that your new Facebook event is triggering correctly. To check this, install the “Facebook Pixel Helper” Chrome extension. You can download it here: https://chrome.google.com/webstore/detail/facebook-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc?hl=en.

Once installed, simply click on the website element you set up, in our case this is the “Phone” button. Then, simply select the Chrome extension to verify that your Facebook Pixel event was triggered properly.

Creating a Custom Audience From Your New Custom Event

Now that you have your Facebook Pixel properly configured with Google Tag Manager and you set up your custom Facebook events, you can now create a custom audience to run retargeting ads towards the visitors that selected your website element.

First, navigate to the Facebook Audiences page in the Facebook manager menu.

‍

‍

Then, click “Create Audience” and select “Custom Audience”.

‍

‍

Select “Website” as your Custom Audience objective. This will allow you to select the custom event we set up previously with Google Tag Manager.

‍

‍

Lastly, select your Facebook Pixel and the event you create. In this case, “Phone”. Then name your new custom audience and select “Create Audience”.

‍

‍

[BONUS] Creating an Ad Campaign with your New Custom Audience on Stiddle

To create a new Facebook campaign in Stiddle with your custom audience, you’ll need to create a Stiddle account and connect your Facebook (Feel free to view our help center for more information). Click HERE for a free trial.

First, you will need to navigate to your “Audiences” and select the audience you just created from your custom Facebook events. After selecting the audience you want to advertise to, you will need to finish setting up your campaign funnel. You will need to choose your placement, ad graphic, budget, offer, and landing page.

‍

‍

‍

‍

‍

Lastly, you will need to publish your campaign.

‍

Conclusion - Victory!

Congrats! You have successfully set up custom Facebook events triggered through Google Tag Manager by an element on your website, created a custom saved audience on Facebook, and set up a new campaign using Stiddle. For more tips and tricks related to marketing and advertising, be sure to check out our other blog posts.

If this seems a bit confusing to you or you’re new to Facebook advertising, I suggest grabbing a free trial of the #1 automated advertising platform, Stiddle, to simplify your Facebook ad campaigns, optimize for the highest conversions, and create high converting landing pages for all your Facebook advertisements all in the same platform with the use of AI. Signup for free HERE!

Looking for more ebooks and guides? Checkout our recent ebooks, guides, and more!

Checkout Stiddle's Ebooks HERE

‍