How to add Google Analytics 4 and Facebook Pixel to a Website Using Google Tag Manager

In this article you will learn how to add Google Analytics 4 and Facebook pixel code to your TM-Sonic website using Google Tag Manager. This will work on both SonicFunnels and SonicLMS, but you can use the same approach even if you have a different website platform.

Table of Content:

  1. What is Google tag Manager and why should I use it?
  2. Registering a Google Analytics account
  3. Registering a GTM account
  4. Adding GTM container to your TM-Sonic website
  5. Creating GA4 base tag
  6. Getting the Facebook Pixel
  7. Creating FB pixel base tag

What is Google tag Manager?

Google Tag Manager (GTM) is a free tool provided by, (surprise), Google that lets you manage and deploy marketing tags (code snippets or tracking pixels) on your website (or mobile app) without editing and placing each tracking code into your website.

If you use many different services that requires you to place their code snippets into your webpages, adding them manually could make the source code of your webpage look messy. With GTM, you only need to add the GTM container code to your site, and then you can add and manage all your tracking codes from your GTM account, from one place. No need to edit your webpages again.

Before creating a GTM account, we need to create a new Google Analytics account and a Google Analytics 4 (GA4) property.

Registering a Google Analytics account

If you already have a GA account and set up your GA4 property, you can skip this step. If you don’t, then keep reading.

GA4 is the latest version of Google Analytics and this is what I’m going to use during this tutorial.
You can use GA4 to integrate website and mobile app usage data and track actions taking place on your website or app.

If you don't have a Google Analytics account yet, you need to register one here. It’s free, and all you need is a gmail address. Click “Start for free” and sign in with your gmail address.

The first time you sign in, click the “Start measuring” button. This may slightly change in the future since Google likes to re-design and re-organize its user interface.

After this, you need to add a name for your account. Click “Next” to add your first property. The “property” is basically your website or app. You can have multiple properties under one GA account. So add a “Property name”, select your timezone and currency and click “Next”.

Google will ask a few questions about your business, select what applies to you and click “Create”.

The next step is to set up a data stream.

GA4 Data Stream

 

Select “Web” if you want to track user interactions on your website, or “Android” or “iOS” if you have an app. But in this example, we select “Web”.

Add your website URL and name.

Set up GA4 account

 

Make sure that “Enhanced measurement” is turned on. Then click “Create stream”. Once it’s saved you will see your “MEASUREMENT ID”. Copy it, and take a note of it. We will need it later.

As you have probably noticed, this new GA4 tracking allows us to measure certain pre-defined events automatically such as page views, scrolls, link clicks, file downloads etc.

Now that you set up your GA4 property and took a note of your measurement id, we can create our GTM container and add GA to it.

Registering a GTM account

Registering a new GTM account is remarkably similar to registering a Google Analytics account. All you need is a Gmail address. Use the same Gmail address you used for GA. Then go to the Tagmanager page and sign in.

Once you are signed in click “Create account”. Add an “Account name” and a “Container name”. The “container name” should be your domain name, like “yoursite.com”. After this select “Web” from the “Target platform” option and click “Create”.

GTM will show you the container installation instructions. Basically you have to insert two pieces of code into your website.

According to GTM the first one should be added like this:

“Paste this code as high in the <head> of the page as possible”

And the second one like this:

“Additionally, paste this code immediately after the opening <body> tag”

Copy both code snippets to a notepad and let’s add them to our website.

Adding GTM container to your TM-Sonic website

If you are using SonicFunnels or SonicLMS, the process is the same for both.

Log into your administration control panel and go to “Settings” -> “tracking codes”.

Paste your first GTM container code into the “Head code” field in your TM-sonic admin.

And paste the second GTM container code into the “Body code” field.

Both SonicFunnels and SonicLMS is designed in a way that it will insert the GTM container code to the appropriate section of your pages. Save your settings and you are done. GTM is added to your site.

If you are using other website platform such as WordPress or you have a custom-built website, the process is the same. For WordPress you can use various plugins to do that. The first code goes inside the “head” tag of your pages and the second code should be placed right after the opening “body” tag of your pages.

Creating GA4 base tag

After installing GTM on your site, it’s time to create a tag for GA. Click the “Add a new tag” button.

Create GA4 with GTM

Name your tag anything you want. For example, GA4 Base Tag. Now click the “Tag Configuration” section. And from the featured tag types select “Google Analytics: GA4 Configuration”. In the “Measurement ID” field paste your ID, you copied from GA earlier.

Click the “Triggering” section and select “All pages”. This is how your tag should look like:

GA4 base tag

Click “Save” to save your tag. After saving you need to publish your changes. Click the “Submit” button in the top right corner. Add a version name and description then click “Publish”. Now your changes are live and GA is tracking your site.

Now let’s add the Facebook pixel.

Getting the Facebook Pixel

First, we need to get our Facebook pixel from Facebook. The FB pixel is similar to your GA tracking code, it tracks what actions people take on your website and reports it back to your Facebook ad account so you can better understand the performance of your ads.

To get an FB pixel, you need to have a Facebook business account and have an ad account set up.

To get the pixel, go to your ad account and from the “Business Tools” select “Events manager”.

Get the Facebook pixel

From the “Add events” drop down, select “From a new website” and then select “Install code manually”. Copy the base code and paste it into a notepad.

It should look like this:

Facebook pixel code

Now we can go to GTM.

Creating FB pixel base tag

In your GTM account, click “Add a new tag”. Name it “FB Pixel Base Tag” and click the “Tag Configuration” section.

There is no unique tag type for Facebook, so we need to select the “Custom HTML” tag type. Paste your FB pixel code into the HTML section.

Click the “Triggering” section to assign a trigger to the tag. Select the “All pages” trigger.

Before we save the tag, remove the “noscript” part from your pixel code.

Facebook no script code

This part of the pixel code is only executed if the user’s browser does not support JavaScript or it is disabled.

Since GTM is made of JavaScript and will only execute custom HTML if JS is enabled, we need to remove this part from the FB pixel. This is not really a problem because 99% of the browsers support JS and most of the time JS is required for a website to work properly anyway.

If you don’t want to track other FB events, you can go ahead and save your tag, then publish it. But if you want to track other events later, we need to make a little modification.

The FB pixel comes with one event called “PageView”. FB has other events such as “AddToCart”, “InitiateCheckout” etc. If you want to later track these events, we need to make a little change in the FB pixel code in the HTML section.

Remove the “PageView” event from the pixel code and paste it in a notepad temporarily.

Remove pageview event from pixel

Before we save the tag, go to advanced settings and in the “Tag firing options” select “Once per page”.
Then we can save our base pixel tag and close it.

We do this because we want to fire the FB base pixel code before any other event is fired.

 

Then create a new tag for the “pageview” event and name it. I’ll name it “FB PageView”.

In the “Tag Configuration” section select the “Custom HTML” tag type again. Paste the pageview event like this:

Pageview event script

In the “Triggering” section assign the “All pages” trigger to it.

Now we have to make sure that the main FB Base pixel will be fired before this tag. To do that click on “Advanced Settings” and find “Tag sequencing”. Here make sure to add the Facebook base pixel tag to fire before this tag. Set it like this:

Tag sequencing

Please note that you may have named your base tag and event tag differently. That is not a problem, just make sure the correct tag is selected.

Save the tag and close it. Publish your changes to make them live.

You can add other Facebook events in a similar way to your GTM container.

 

This is how you can properly set up GTM on your website. If you have any questions, just leave a comment below.

 

0 Comment ON How to add Google Analytics 4 and Facebook Pixel to a Website Using Google Tag Manager