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.


Applies to Version(s): 3.9.x Series
Complexity Level: Advanced

Estimated Time for Completion: 30 minutes


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.  

facebook events manager

    2. Go to Connect data sources.

connect data sources


    3. Select Web then click the Get Started button.

connect to web as data source

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

facebook pixel connection method

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

add facebook pixel details

    6. Select the Email Instructions button.

email instructions for pixel code

    7. Enter your email address then click Send. 

email pixel code

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

email pixel code 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.

add new gtm tags

    3. Click the edit button inside Tag Configuration.tag configuration edit button

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

custom HTML tag


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

insert facebook pixel code

    6. For Triggering, select All Pages.

all pages triggering

    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.

facebook pixel conversion

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. 

add trigger

    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.

custom event trigger


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>

insert add to cart code   

    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.all elements trigger

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.



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.