Ultimate Guide to Setup Facebook Pixel with Google Tag Manager

by
Disclosure: Please note that this article may contain affiliate links. You can read the full disclosure here.

Do you ever wonder how Facebook ads target content you’ve been recently looking at online?

FacebookPinterestWhatsAppTwitterEmail

For example, I was checking out this one great blogging course, lets call it “Blogging Strategies to Succeed” I just made that up, so if it really exists that is just a coincidence. After checking out the course info, you take some time to decide and you go surfing around on Facebook. You notice sponsored ads by “Blogging Strategies to Succeed” coming up, all tailored to you.
 
This is the Facebook pixel. It works well in converting one time visitors into regular traffic.
 
So how exactly do you setup the Facebook pixel? On our first site it literally took me hours to get the Facebook Pixel to work with Google Tag Manager. But, just now, I set it up in under 10 minutes.
 
You will need to have a

  • Facebook Business Page
  • Google Tag Manager account

    •  

    We will be jumping around between Facebook Ad Manager, Google Tag Manager and your WordPress theme files. Please bear with me, it may seem confusing at first, but in the end it should all make sense.

    If you don’t know how to edit your theme files, see this post.
     

    **Make sure to take a backup of your website before you start** Instructions to backup with UpdraftPlus
     

    I put together a video tutorial for this post here.

     

     

    Open the Facebook Ads Manager

     
    Login to the Facebook Ad Manager.
     
    Click the menu and select Pixels
     
    Screenshot of the Facebook Ads Manager
     
    Click the Setup Pixel button.
     
    Screenshot of Click Set up Pixel button
     
    Click Manually install Pixel code yourself
     
    Click Manually Install Pixel Code Yourself
     
    *Keep this Window open and open a new Tab in your Browser*
     

    Add the Pixel Code to your Header.php file

    Again, if you don’t know how to edit your theme files, see this post.
     

    Before adding the code
    Screenshot WP Theme Editor Theme Header

    *Keep this tab open, go back to the Facebook Ads Manager Tab to copy the Pixel Code*
     
    Click in the second box to copy your Pixel Code.
     

     
    Your code will look something like this, make sure to enter your own ID below.

    <!-- Facebook Pixel Code -->
    <script>
    !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', 'XXXXXXXXXXXXXXXX');
    fbq('track', 'PageView');
    </script>
    <!-- Remove the Facebook Pixel <noscript> code and tags, this will be done instead in Google Tag Manager. -->
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=    XXXXXXXXXXXXXXXX&ev=PageView&noscript=1"
    /></noscript>

    <!-- End Facebook Pixel Code -->
    <!-- Google Tag Manager Code -->
    ...
    <!-- End Google Tag Manager Code -->
    <?php wp_head(); ?>
    </head>

     

    Paste the Pixel code before the <!-- Google Tag Manager --> code, which should also be before the <?php wp_head(); ?> on the header.php file
     
    Remove the Facebook Pixel <noscript> code and tags from the header.php file, this will be added instead in Google Tag Manager.
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXXX&ev=PageView&noscript=1"
    /></noscript>

     
    After adding the Facebook Pixel code
    Your theme header file will look something like this.
     
    Screenshot of WP Theme Editor Add the FB Pixel Code
     
    Click Update File button below the Theme Editor.
     
    *Keep this Tab open, and open a new Tab for Google Tag Manager*
     
    Jump to the next step setting up Google Tag Manager
     

    Adding the Facebook Pixel code via Header/Footer Plugin

     
    If you installed the Facebook Pixel to your theme header.php file, then jump to the next step setting up Google Tag Manager

    If you do not already have a header/footer plugin installed, I recommend to install the Header Footer Code Manager from here.
     
    Once installed, click on HFCM on the WordPress menu.
     
    Click the Add New Snippet button.
     
    Add new snippet
     
    Enter the following information to setup the snippet, and click save.
     

    <!-- Facebook Pixel Code -->
    <script>
    !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', 'XXXXXXXXXXXXXXXX');
    fbq('track', 'PageView');
    </script>

     
    You will notice that I left out the <noscript> tags and code, since this will be added through Google Tag Manager.
     

     

    Configure Google Tag Manager for Facebook Pixel

     
    This tutorial assumes you are already using Google Tag Manager and have your account setup.
     
    Login to Google Tag Manager
     
    Click on your Google Tag Manager Account
     
    Login to GTM Account
     
    Click on your Workspace
     
    Click on your GTM Workspace
     

    Create a new GTM Variable.

     
    Click on the Variables Menu item.
     
    GTM Variables
     
    Click to add a new Variable
     
    GTM New Variables
     
    Click the lego looking item and select Constant from the menu.
     
    Create new Constant Variable
     
    *Keep this tab open Jump back to the header.php file in the other browser tab.*
     
    You will see your Pixel code on this line.
     

    fbq('init', 'XXXXXXXXXXXXXXXX');

     
    Copy your code to paste into the Constant Variable.
     
    *Keep this tab open Jump back to the Google Tag Manager tab.*
     
    Paste Your Facebook Pixel code here, then click the Save button.
     
    Create Pixel ID Variable
     
    Click to create a new variable again, this time select the Custom Javascript variable.
     
    Create new Custom Javascript Variable
     
    Enter this code, click the Save button
     

    function() {
    return true;
    }

     
    Setting Custom Javascript for GTM
     

    Next click on the Tags Menu item

     
    Create a new Custom Image Tag.
    New GTM Tag
     
    New Custom Image GTM tag
     
    Enter the following as the custom image.
     

    https://www.facebook.com/tr?id={{Pixel ID}}&ev=PageView&noscript=1

     
    Add your triggers.
     
    For our triggers we have the following set.
     
    Trigger 1: Any page loading with no cookie set
    Trigger 2: Any page loading with Analytics & Marketing Cookies enabled
    Trigger 3: Any page loading with no cookie set and Javascript is disabled
    Trigger 4: Any page loading with Analytics & Marketing Cookies enabled and Javascript is disabled
     
    Note – the cookie triggers are specific to my Google Tag Manager setup, you likely will not have the cookieconsent variable, but you may have something similar.
     
    You click the Plus Symbol to add triggers, (to remove triggers, click the minus sign on the trigger.)
    Screenshot of Add or Remove Triggers GTM
     
    You will see a list of existing triggers, or you can add a new one. If you also use Google Tag Manager for cookie control, then set your triggers similar to mine.
     
    Trigger 1: Any page loading with no cookie set
    Screenshot of GTM Trigger All Pages no cookies set
     
    Trigger 2: Any page loading with Analytics & Marketing Cookies enabled
    all pages marketing and analytics allowed
     
    Trigger 3: Any page loading with no cookie set and Javascript is disabled
    Noscript All Pages - No Cookies Set
     
    Trigger 4: Any page loading with Analytics & Marketing Cookies enabled and Javascript is disabled
    all pages marketing and analytics allowed noscript
     
    If you are not using Google Tag Manager for Cookie control, you can create and use the following trigger.
     
    All Pages trigger
     
    I plan to have a future post on setting up Google Tag Manager for Cookie Control on your site.
     

    Now Google Tag Manager is setup, you need to TEST

     
    Click the Preview Button at the top right of the screen.
    Preview Button
     
    If you are using Chrome, open a new tab and install the Facebook Pixel Helper Chrome Extension.
     
    Once installed, open your website, remember you are in Google Tag Manager “Preview” Mode, so there will be a Google Tag Manager info at the bottom of the page.
     
    When your site opens, click on the Facebook Pixel Helper, if you don’t see it, click on the menu, and then click on the Facebook Pixel Helper.
     
    Finding the chrome extension FB pixel helper
     
    If you see the green checkmark by Pageviews, then the Pixel is installed correctly.
     
    Confirm you see this green checkmark pageview fb helper
     
    Go back to the Google Tag Manager tab, and click to Leave Preview Mode and then Submit your changes.
     
    Preview Button
     
    Give it a name like added Facebook Pixel.
     
    Refresh your website and confirm again that the Facebook Pixel still shows the green checkmark with Google Tag Manager in live mode.
     
    You can go to the Facebook tab that we have open, click the Continue button.
     
    Click continue
     
    For our site, we just setup the Pageviews, but if you want to count more than just Pageviews with your Facebook Pixel, then on the next screen, click Manually install event code
     
    Manually install event code
     
    From here you have all sorts of options to setup the Event codes.
     
    FB event code options
     
    Add the event codes on the specific posts that you want the events to be tracked.
     
    So for example if you have a landing page for subscriptions, add the following code to that page.
     

    <script>
    fbq('track', 'Subscribe');
    </script>

     
    Click Test Event Setup button.
     
    FB Pixel test event setup
     
    Enter your website in the field provided, click to test your site.
     
    Test your site FB
     
    Close your page that opens, and go back to the Facebook Pixel Tab.
     
    You will see the Test results.
     
    Test results
     
    If that comes back as “Receiving Activity” then you are done. You can close out of the Windows we had open.

    Avatar for Tara, WP Blogger Assist

    I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

    ...

    Leave a Comment