How to Create Custom Facebook Events With Google Tag Manager From Your Website

 

 

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. 

 

install 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. 

 

Subscribe to Stiddle's Marketing Newsletter 100% Free

 

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. 

 

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.

 

Copy your Facebook Pixel ID

 

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

 

navigate to the “Tags” page

 

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

 

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.

 

connect your Facebook Pixel ID with Custom HTML

 

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.

 

complete your tag configuration, copy and paste the HTML 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”.

 

select the “Variables” page and enable all the necessary variables

 

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>

 

setting the tag to create a custom event within Facebook Ads Manager by creating a Javascript code

 

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

 

select advanced settings

 

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).

 

select trigger type

choose the option Just Links under Clicks

 

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. 

 

Subscribe to Stiddle's Marketing Newsletter 100% Free

 

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.

 

Select inspect element and then find a unique variable

 

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. 

 

select This trigger fires on: Some Link Clicks

 

 

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!

 

preview and submit your changes to Google tag manager

 

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.

 

check and verify that your Google Tag Manager is installed

 

 

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. 

 

Subscribe to Stiddle's Marketing Newsletter 100% Free

 

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. 

 

navigate to the Facebook Audiences page in the Facebook manager menu

 

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

 

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.

 

Select Website as your Custom Audience objective

 

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

 

select your Facebook Pixel and the event you create

 

[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

 

finish setting up your campaign funnel

 

choose your ad budget

 

choose your ad placement

 

review and publish your campaign

 

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