Over 10 years we helping companies reach their financial and branding goals. Onum is a values-driven SEO agency dedicated.

Digital Analytics Website Analytics

How to set up Meta (Facebook) Pixel through Google Tag Manager? Google Tag Manager Facebook pixel manual integration (2023)

Facebook Pixel Google Tag Manager Integration

Meta pixel previously Facebook pixel has a lot of website integration techniques. Among those, are easy methods provided by Meta. But, they usually have a lot of errors. Sometimes you won’t be able to figure out where they occur, or how your users’ actions data got duplicated.

To avoid configuration mess-ups, I would always recommend integrating Facebook pixel manually through Google Tag Manager.

Google Tag Manager Facebook pixel integration will give your Facebook conversion ads performance a boost and will set the foundation for your remarketing ads.

Table of content

First, Let’s take a look at What a Meta Pixel is.

Meta pixel is a piece of JavaScript code that must be integrated into the header section of all your website pages, so it can track events taken by your website visitors.

There are two types of events that can be tracked with a Meta pixel, standard and custom events.

Facebook events are necessary for conversion tracking and your Facebook conversion campaigns wouldn’t work, if you don’t have them set up.

1- Standard Events

Standard events are the set of events that are usually the same between most websites. They usually are common in most use cases. For example, if you visit any e-commerce website, you will start by browsing a number of pages (PageView).

Afterward, if any product captured your attention, you will most likely view that product page (ViewContent). Now you liked what the product page had to say, and you decided to add the product to the cart (AddToCart). Finally, it’s time to add up your checkout details (InitiateCheckout) and confirm your payment (Purchase).

2- Custom Events

Custom events are not usually common among most websites. They are somehow unique to the purpose of each website.

For example, if you are running a blog website and you want to receive a conversion event every time a user spends 5 minutes on your website, you will set up a custom event to track that specific behavior.

What is Google Tag Manager (GTM)?

Google tag manager is a powerful tool developed by google that will help you manage all your marketing tags in one place without the need to wait for a developer

Google tag manager uses predefined tag configuration elements for Google Analytics, Google ads, and other third parties. However, Facebook is considered a top competitor for Google, and that’s why Google doesn’t provide predefined tags for integrating the meta pixel.

There are three methods to set up Facebook pixel using Google Tag Manager.

  • The automated method

  • The Integration Method

  • The Manual way

In this article, we are going to cover the manual way to Integration

What does a Facebook Pixel code consist of?

Facebook pixel code consists of two essential parts, which you would have to inject in the GTM container

Base pixel code and event codes.

The Facebook pixel base code is the part given to you by Meta pixel and you will be asked by Meta to include between the opening and closing header tags of all your website pages.

Event codes are manually constructed from your side based on the events and parameters that you want to track for each event.

Add Facebook Pixel Code To Google Tag Manager Manually

Create your Google Tag Manager container

First, please follow the Google Tag Manager account creation guide in order to create a new Google Tag Manager account and website container.

Create your first Facebook pixel

Then go to the Meta Business Manager and navigate to the Events Manager from the left-hand side Menu.

Open Facebook Business Suite on your desktop browser

To start, you will have to open Facebook Business Suite on your desktop browser.

Then click on the hamburger menu on the left-hand side to expand the side menu and choose Events Manager from among the listed tools.

Facebook Events Manager Collect Data

Then you will click the button reading “Connect Data” to start Setting up your Facebook pixel.

Pop window asking you to choose data source

A pop-up window will appear asking you to choose a data source for your pixel tracking. Certainly, at this point, we will choose “web”, but we will write another article on how to track mobile apps.

Name your Pixel

After choosing your Facebook pixel type, you will be prompted to type in your pixel name. Add in the desired name for your pixel. I personally prefer to structure the name as follows (Brand name | Data Source | Date Created).

This makes all associated data with that pixel visible every time you access the events manager and you won’t get confused between the different pixels that you have created.

When you are done choosing your pixel name, click on the “Create Pixel” button.

Enter your website URL

Enter your domain name and leave the I don’t have a website checkbox unchecked.

After the tool is done checking, it will show you a dropdown message like this, if you have developed your website using WordPress, or other third-party block builder tools.

Integrate Facebook pixel using third party tools

After clicking next another window will show asking you whether you want to install Facebook pixel through the manual integration only, or you want to add the conversion API integration as well.

If you are supported by a developer and have access to fast communication, I recommend proceeding with both. But if you are doing this alone without a developer’s support, then choose manual integration only.

Setup Manually option selection

Click on Set up manually and then click next.

Easy peasy! It’s time for you to go grab a cup of coffee and come back to focus on the technical part.

Copy the Facebook Pixel base code

Continue Pixel Setup

Click on the “Continue Pixel Setup” button and Choose Meta Pixel as per the below image.

Choose Meta Pixel

Click on the install code manually button.

Copy the base code

Now you should be able to see a screen similar to the one above where you should copy the base code and then move to your Google Tag Manager website container.

When you open the Google Tag Manager workspace, you should see something similar to the below screen.

Google Tag Manager interface

As soon as you land on the google tag manager dashboard, you will find a left side panel including all the navigation elements needed. You might notice that the Tags, Triggers, and Variables components, which we spoke of earlier, are all listed in this panel.

Creating your base Facebook Tag configuration on Google Tag Manager

To start with creating your base Facebook pixel code, click on the Add a new tag and a new window will pop up

FB Base Tag Configuration

At the top left corner, you will find a text box asking you to enter your Facebook pixel tag name. Your tag name should be something as follows, Platform name initials (Facebook = FB) followed by the objective or type of tag (Base pixel code = Base Tag).

Rest assured that this name will not be shown to any website user and will not appear in your Facebook pixel in the Facebook events manager. It will however be the only way inside the Google tag manager which will help you identify the purpose of that tag.

To move forward, click on the tag icon inside the circular grey shape and you will move to a right-hand side panel.

Choose Custom HTML Tag

The right-hand-side panel includes three types of tags.

  • Featured tags created by Google for its own platforms and marketing solutions.

  • Custom tags including a custom HTML tag and a custom image tag

  • More tags, which include tags created by third-party tools that can integrate with the Google tag manager.

To set up the Facebook pixel code, we will choose the custom HTML tag and a placeholder for the code will display.

Paste the Facebook pixel code in the Custom HTML section and remove the noscript code

After pasting the Facebook pixel code inside the HTML section, scroll down until you see a second circular grey area reading trigger.

Choose the all pages, page view trigger

You will find a list of three pre-defined triggers.

A trigger can be any action that a user may take on the website. A pageview trigger fires when a user visits any page on your website and that page loads. Our Facebook pixel code tag will be set to fire on all pages, Page View trigger.

By setting your Facebook pixel tag to fire with an “all pageviews” trigger, you are telling Google Tag Manager that you want that tag fired on all your website’s pages.

Click save at the top right corner and you are done setting up your Facebook base tag. But, you still need to test it before publishing to make everything works just fine.

To test your Facebook pixel and events tags setup on your website, you will need to install the Facebook pixel helper extension and Google Tag Assistant on your Google Chrome browser.

Facebook pixel helper & Google Tag assistant

Set up Facebook pixel helper

In order to set up the Meta pixel helper, previously Facebook pixel helper, you would need to go to the chrome web store and search for Facebook pixel helper and then install it.

Facebook pixel helper extension should look something like a closing script tag on the top right section of your chrome browser. If you can’t find the Facebook pixel helper extension like in the above image, you can check the extension’s icon and then pin it to your browser.

Set up Google Tag Assistant

Google tag assistant is essential for previewing and debugging your tracking tags. In further steps, you would even need it to configure variables.

Similar to the previous step, you will go to the Google web store and search for Tag Assistant Legacy (by Google). Next, you will add it to your chrome browser and pin it to the top right corner of your browser.

Testing your Facebook pixel tag setup is working properly

Let’s move back to the Google tag manager workspace and click on the preview button on the top right corner of the screen.

A pop-up screen will show asking you to fill in your domain name. it should be inserted as per the reference “https://google.com”.

Then click continue and your website will open in the new tab with the debugger.

Return to the original tab where the tag assistant is recording every step of your page’s loading. You will find the steps of page loading at the left-hand-side panel.

Your Facebook pixel shall be fired on Container Loaded

At the container loaded step, you should find two sections, Tags Fired and Tags not Fired. You should be able to see the FB – Base Tag in the Tags Fired section.

If everything works like a charm, then let’s proceed to standard events tag configuration.

Standard pixel events are different from one website to the other based on their nature. For example, an e-commerce website would use the InitiateCheckout and Purchase events, while a blog website will use the Subscribe events.

Setting Up Facebook Pixel standard events

Facebook standard events are sets of codes that complement the base code and should be fired on specific pages or actions taken on your website.

A Facebook pixel standard event code consists of two parts, an event and a set of parameters.

A parameter determines the value of an attribute associated with each event taking place. For example, to return the total value of a purchase that took place, you will need to set a “total” parameter and a “currency” parameter.

A good example of an event would be when someone completes a purchase and reaches the thank you page. Facebook pixel should report that a purchase event was taken, but wouldn’t be able to report any extra data unless the proper parameters were configured.

For setting up standard events through Google Tag Manager, a data layer has to be developed among your codes, and for that, you will definitely need a developer.

What is a Google Tag Manager dataLayer?

Imagine your website being a workspace in a large company and the floor has a thousand employees all in one space. You need to gather some data related to the company, but you don’t know who performs what task.

Then, a receptionist came all of a sudden to tell you “let me know all the information you need to gather from the staff, and I’ll go grab it for you”. The receptionist then goes into the floor, wanders around for a few minutes, and returns with a small sheet of paper including all the information you have been asking for.

Data Layer Algorithm

Data Layer works the same way. The floor full of staff is your website’s code. You most certainly won’t understand which code does what. I mean, even the developer that created the codes, might forget about their functions and keep wondering for a while till he remembers.

The data layer’s role is to gather the data that you are looking for in a short array code format. Then, that sheet called “dataLayer” shall be submitted to the Google Tag Manager.

The dataLayer has a specific structure following the Google Analytics guidelines.

I should imply here that Google Analytics – Universal Analytics property shall no longer be available starting July 2023. So, you will have to create the data layer based on the developer’s guide for Google Analytics – GA4.

I would recommend sending the developer’s guide to the developer and informing him/her of the events and parameters you want to track.

Reviewing the Google Tag Manager Data Layer through Tag assistant

To explain this better, I’ll take a live example for a Purchase step of an e-commerce hotel website that sells hotel rooms.

To start reviewing your Data Layer structure go to your GTM container and click the “Preview” button at the top right of the screen. Same as we did with the Facebook pixel testing step.

Choose Data Layer tab in the debugger

When the tag assistant debugging mode is on, move to the Data Layer tab in the top menu.

Then, go to the browser tab in which your website is open and start going through the user journey until you complete a purchase.

Purchase event Data Layer in debugger

As you can see, the Data Layer structure will start to form up in the Data Layer tab. If you see any errors with one of your parameters, reading “null” or “object”, contact your developer to fix it.

Since Facebook pixel standard event tags are built using custom HTML, we will have to configure some triggers and variables ahead.

We will start by creating a custom event for the Purchase event read inside the Data Layer.

Creating the Purchase Trigger

Now let’s move back to the Google Tag Manager Workspace and move to the triggers tab from the left-hand-side panel.

Create new trigger for Purchase event

Add a new trigger through the “New” button at the top right corner.

Choose your trigger type as Custom Event

Click on the circular grey area to choose your trigger type, and scroll down until you find the “Custom Event” trigger”

Copy and paste event name exactly as listed in the datalayer

Copy and paste the event name exactly as written in the data layer

Set the trigger to fire on all custom events and save your trigger.

Creating all required variables

To create your purchase event variables you will need to move to the variables tab from the left-hand-side menu. Once there, you will find two lists with different variable types.

  • Built-in Variables

  • User Defined Variables

Under the user Defined variables, you will click on “New” to create a new Data Layer Variable. Then, you will name your variable something like “Purchase – Value”.

Now, let’s choose the variable type as Data Layer Variable.

Choose Variable Type as data layer variable

The “data layer variable” name is different from the “custom event trigger” name. See, when naming an event, we just copied and pasted the event name only.

Variables names are written in the form of a thread that includes the names of all parent arrays.

let’s take an example; In the above image showing the data layer structure, you will notice that “value” is a sub of the e-commerce array. Hence, the data we enter in the variable name will be as follows “ecommerce.value”.

Data Layer variable Purchase Value

Now we will proceed with the above steps and repeat them for each of the necessary variables to fill in Facebook standard events required parameters.

Facebook pixel standard events require specific parameters for each event to work properly and be able to optimize ad delivery for better results.

Building our first Facebook Pixel standard event tag

Let’s move back to the tags tab on the GTM left-hand-side panel. From there, we will click on “New”.

By now, we already know that Facebook pixel doesn’t have a pre-configured tag. So, we will scroll down in the tags list until we find a custom HTML tag.

Facebook Pixel, purchase standard event tag

The above code is constructed as per Meta guides for standard pixel events. The first part, which is formed of the fbq(‘track’, ‘Purchase’,) is the part related to sending the event to the Facebook Pixel.

once the bracket { was open, we have to give a value for the content_type parameter. That value can be one of several things based on the nature of your business and the event we are tracking.

For example, when we are tracking a hotel, the parameter value will be set to ‘hotel’, but if we are sending product e-commerce data the parameter’s value will be set to ‘product’ or ‘product-group’ based on the event we are tracking.

If we are tracking an add to cart event, by nature the data we will be sending along with each button click will be specific to one product, and hence the value will be ‘product’.

But, if we are tracking an initiate checkout or purchase event, those types of events are generally associated with more than one product, and hence the value will be set to ‘product-group’.

Once the product_type parameter has been given a value, all the coming parameters are supposed to define the extra aspects of the purchase event.

For example, currency: defines the currency parameter and since the value returned is not constant for each purchase event, we will choose a variable we created previously to fulfill its returned value.

To choose a value from GTM, you should open a double bracket {{ and all the previously created variables will show in a drop-down menu.

please note that you should place a comma after each defined variable and make sure all brackets are closed at the end of your custom HTML code.

The Facebook pixel standard event code must be placed in between opening and closing script tags. <script> </script>

Adding the custom event trigger to our Facebook pixel tag

Below the HTML section in the tag configuration, you shall see another block titled “Triggering”. Click on the circular grey area and choose the purchase custom event trigger, that we have previously configured.

Now let’s save our tag and start debugging.

When you open the debugger, complete a purchase on your website and check the summary section on the left-hand side.

You should see a step called purchase. When you click the purchase step, check the fired tags to make sure your FB- Base Tag has been fired at the right time.

If things are going fine so far, navigate to the variables section to make sure that your variables are reading data from the data layer.

Publishing our Container

Now we have our Facebook pixel-based tag and standard events tags configured. Let’s publish them and see how they work.

Submit container

Return to your GTM workspace and click on the submit button.

Publishing our first container version

Before publishing your first container, make sure you give your published version a name and a comprehensive description, so you can remember if you had to retrieve it after a later failed trial.

Extra tips

Create A Facebook Pixel ID Constant Variable

Sometimes we might need to switch our Facebook pixel account that is being used to track our website.

If you want to save yourself the trouble of going back to the Facebook pixel base code tag and editing the code once again, you can create a Facebook pixel id constant variable.

Copy the pixel id from your Events manager account, and then paste it inside the value of your constant variable. If things change later and you want to change the tracking account, you can just go back to that variable and update the id and republish your container.

Benefits of Integrating Facebook pixel with Google Tag Manager manually

Fewer Integration errors

Using a Facebook pixel custom template to integrate your pixel with GTM isn’t always the best practice, for several reasons

  1. Templates are created with a specific scenario in mind, that scenario wouldn’t necessarily match yours.

  2. Using a template to add Facebook pixel sometimes lead to errors in the reported data. You won’t always be able to understand where the problem lies.

  3. Facebook pixel integration through GTM manually will teach you how events and parameters work, which will make you better at creating custom parameters and events on the long run

  4. You can track conversions with better accuracy, which will make running Facebook ads more successful and rewarding.

Why is Facebook pixel essential for Ads performance?

Facebook ads manager campaigns have something called a learning process. The longer the ads run and keep delivering impressions, the more results they can get.

The first five days of any campaign running time are considered a learning phase. Account learning, however, is a non-stop process. It starts with account creation and keeps going.

Facebook pixel is an essential part of that process, as it tells your ads manager when a conversion is taken and who made that conversion event.

Each extra conversion taking place helps Facebook define your top converting audience even more.

Not just that, but a Facebook pixel integration provides you with the custom audiences creation feature from the Facebook business suite interface. Creating a custom audience and a lookalike audience has proven to be more effective in terms of maximizing conversions, than the normal prospecting method.

Congratulations on reaching out so far in this blog. I know it’s been too much tech-savvy talk, but you must have come out with an extra skill that will definitely help you further with your career.

If you have any comments or face any problems with your Facebook pixel integration, I am always eager to answer you in the comments.

You can even send me an email and let’s hop on a quick call to see how it can get fixed.


Rafik Adel

Rafik Adel is a Digital Marketing expert who worked in several industries from Cosmetics, Mall Management all the way to Hospitality Marketing. He spent 4 years working as a Head of Digital Marketing for some of the top hotel brands including Steigenberger, Rixos, Savoy, & Pickalbatros. Rafik's extensive knowledge of Marketing strategies and Digital Analytics has brought him ahead in terms of planning and execution.

Leave a comment

Your email address will not be published. Required fields are marked *