This article will show you how to take your Facebook Pixel and add it into Google Tag Manager. This articles assumes you already have a Facebook page setup. If you do not, here's an article that explains how to get started there. Also, you will need to initially setup Google Tag Manager, which you can find a walkthrough for at How to Setup Google Tag Manager. Once setup, you can then proceed to How to Get Google Tag Manager working with PinnacleCart, which will show the important step of hooking GTM and PinnacleCart together.
Complexity Level: Advanced
Estimated Time for Completion: 30 minutes
In this article you will learn
How to Add the Facebook Pixel to GTM
How to Add the Facebook Pixel to Track Conversions
How to Add the Facebook Pixel to Track Add to Cart Event in GTM
Getting the Facebook Pixel.
When you're in Facebook Business Manager, or Facebook Ads Manager, you can get to the pixel section by going to the menu at the top left, and choosing Pixels under Assets.
Down below, on the next screen, click Install Event Code.
Click Email Pixel Code. Enter your email address.
You will receive an email which contains the Facebook Pixel Code along with some Standard Events. 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>.
How to Add the Facebook Pixel to GTM.
Click Tags on the left. Click New.
Under Choose Product, select Custom HTML Tag.
Insert the Facebook Pixel code your receive from Facebook and insert it into Configure Tag. Click Continue.
For Fire On, select All Pages.
Click Create Tag.
How to Add the Facebook Pixel to Track Conversions.
First you will want to adjust the code from Facebook to add a line for conversion. This new lines are 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 -->In Google Tag Manager, click Tags. Click New.
Name it Facebook Pixel Conversion.
Click Custom HTML Tag.
Paste into Configure Tag with the code above, but make sure fbq('init', 'XXXXXXXXXXXXXXX'); contains the correct ID. Click Continue.
Under Fire On, select More. Choose Conversion. Click Save.
Click Create Tag.
How to Add the Facebook Pixel to Track Add to Cart Event in GTM.
Click Tags on the left. Click New.
Under Choose Product, select Custom HTML Tag.
In the Configure Tag text 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>Click Continue.
For Fire On, select Click. Choose Add to Cart Product Page and click Save.
Click Create Tag.
Run the same steps again, but after selecting Click, choose Add to Cart Catalog Page this time.
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.
How to Get Google Tag Manager working with PinnacleCart.
If you didn't get your question answered, please contact the Pinnacle Cart 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
