Adding Facebook Pixel to Google Tag Manager

This article will show you how to take your Facebook Pixel and add it to Google Tag Manager. This article assumes you already have a Facebook business page set up. If you do not, here's an article explaining how to get started. Also, you will need to initially set up Google Tag Manager, which you can find a walkthrough at How to Setup Google Tag Manager. Once set up, you can then proceed to How to Get Google Tag Manager working with PinnacleCart, which will show the important steps of hooking GTM and PinnacleCart together.

In this article, you will learn:

Getting Facebook Pixel Code

Adding the Facebook Pixel to GTM

Adding the Facebook Pixel to Track Conversions

Adding Facebook Pixel to Track Add to Cart Event in GTM

Getting Facebook Pixel Code

Before you begin, make sure you have a website for your business and you're able to update your website's code. Also, you should have a Facebook Business Manager account. Follow these steps to get your Facebook Pixel Code: 

    1. When you're in Facebook Business Manager or Facebook Ads Manager, you can get to the pixel section by going to Events Manager.  

    2. Go to Connect data sources.

    3. Select Web then click the Get Started button.

    4. Choose Facebook pixel as the connection method then click the Connect button. 

    5. Key in the name of your pixel as well as your website URL. After you added those required details, click Continue. 

    6. Select the Email Instructions button.

    7. Enter your email address then click Send. 

    8. You will receive a notification that the email has been sent.

    You should receive an email that contains the Facebook Pixel Code. To track events, you would take the code from the event you want to track and paste it into the Facebook Pixel Event, under fbq('track', "PageView"); and before </script>.

Adding the Facebook Pixel to GTM

    1. Go to https://www.google.com/analytics/tag-manager/ to sign in to your Google Tag Manager account.

    2. Click Tags on the left. then select New.

    3. Click the edit button inside Tag Configuration.

    4. When asked to choose a tag type, select Custom HTML Tag from the drop-down menu. 

    5. Insert the Facebook Pixel code you received from Facebook into Tag Configuration. Then click Save. 

    6. For Triggering, select All Pages.

    7. Lastly, don't forget to click Save.

Adding the Facebook Pixel to Track Conversions

First, adjust the code from Facebook to add a line for conversion. These new lines are marked in bold below:

<!-- Facebook Pixel Code --><span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>
<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', 'XXXXXXXXXXXXXXX');
fbq('track', "PageView");
// Purchase
// Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
fbq('track', 'Purchase', {value: '{$order_num}', currency: 'USD'});
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=900671466676852&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Then, follow these steps:

    1. In Google Tag Manager, go to Tags then click New.

    2. Name it Facebook Pixel Conversion.

    3. Click Custom HTML Tag.

Paste the code above in Tag Configuration and make sure fbq('init', 'XXXXXXXXXXXXXXX'); contains the correct ID. 

Then, click Continue.

    4. Under Triggering, click on the Add button then the Edit button. 

    5. Choose Custom Event as trigger type. Set This trigger fires on to Some Custom Events and Fire this trigger when... to Page URL contains completed. After making the changes, click Save.

Adding Facebook Pixel to Track Add to Cart Event in GTM

    1. Go to Tags on the left, then click New.

    2. Under Choose Product, select Custom HTML Tag.

    3. In the Tag Configuration area, enter the following code:

<script>
  fbq( 'track' , 'AddToCart' , {<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>
    content_ids: '{$product.pid}',
    content_name: '{$product.title}'}
    );
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1234567890&ev=AddToCart&cd[content_ids]={$product.pid}&cd[content_name]={$product.title}&noscript=1" />
</noscript>

    4. Under Triggering, click on the Add button then the Edit button. 

    5. Choose Click - All Elements as trigger type. Set This trigger fires on to Some Clicks and Fire this trigger when... to 

• Click Classes contains: button-add-to-cart
• Click Classes equals: catalog        

        After making changes, click Save.

Note: The classes are specific to an eCommerce platform. If your add to cart button has a different class then replace this with your own class. You can also add more conditions such as add to cart catalog page, equals product, etc2. If you don't see the Add to Cart events, make sure to go through the step listed here.

Links to Related Articles

How to Add Google AdWords to Google Tag Manager

How to Add Google Analytics to Google Tag Manager

How to Add Perfect Audience to Google Tag Manager

Google Tag Manager

How to Get Google Tag Manager working with PinnacleCart

If you didn't get your question answered, please contact the PinnacleCart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.