Setting Up Google Tag Manager for Facebook on Your Site
Objective:
To set up Google Tag Manager (GTM) to track Facebook events on your blog site efficiently.
Prerequisites:
- Access to your blog site’s backend.
- A Google Tag Manager account.
- A Facebook Business account and access to Facebook Events Manager.
Steps:
Step 1: Create a Google Tag Manager Account
Navigate to Google Tag Manager: Go to Google Tag Manager.
Create an Account:
- Click on “Create Account.“
- Enter your Account Name (e.g., “Blog Site GTM”).
- Select your Country.
- Enter your Container Name (e.g., “Blog Site“).
- Select “Web” as the target platform.
- Click “Create” and accept the terms of service.
Install GTM on Your Blog:
- After creating the container, you will see the GTM code snippets.
- Copy the first code snippet and paste it into the
<head>section of your blog site’s HTML. - Copy the second code snippet and paste it immediately after the opening
<body>tag of your blog site’s HTML.
Step 2: Set Up Facebook Pixel in Google Tag Manager
Go to Facebook Events Manager:
- Navigate to Facebook Events Manager.
Create a Facebook Pixel:
- Click on “Connect Data Sources” and select “Web.”
- Choose “Facebook Pixel” and click “Connect.”
- Enter a name for your pixel and your website URL, then click “Continue.“
Get Your Facebook Pixel ID:
- After creating your pixel, you will get a Pixel ID. Copy this ID.
Create a New Tag in GTM:
Go to your GTM dashboard and click on “Add a new tag.“
Click on “Tag Configuration” and select “Custom HTML.”
Paste the following code, replacing
YOUR_PIXEL_IDwith your actual Facebook Pixel ID:html
<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', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>
Set Up a Trigger:
- Click on “Triggering” and select “All Pages” to fire this tag on all pages.
- Save your tag.
Step 3: Publish Your Container
- Submit Your Changes:
- Click on “Submit” in the top right corner of your GTM dashboard.
- Add a Version Name and Description (e.g., “Initial Facebook Pixel Setup“).
- Click “Publish.“
Step 4: Verify Your Setup
Use the Facebook Pixel Helper:
- Install the Facebook Pixel Helper Chrome extension.
- Visit your blog site and check if the Pixel Helper detects your Facebook Pixel.
Check-in Facebook Events Manager:
- Go back to Facebook Events Manager.
- Navigate to your pixel and check if events are being received from your blog site.
Additional Notes:
Custom Events: For tracking custom events (e.g., button clicks, form submissions), create additional tags and triggers in GTM as needed.
Testing: Always test your GTM setup in a staging environment before deploying to production.
Troubleshooting:
- No Data in Events Manager: Ensure the GTM container is published and the Facebook Pixel ID is correct.
- Tag Not Firing: Check trigger conditions and ensure the GTM code snippets are correctly placed in your blog site’s HTML.
This SOP should help you set up Google Tag Manager for Facebook on your blog site. If you need further customization or run into any issues, feel free to ask!