How to install the Facebook Pixel with the Google Tag Manager
The Tag Manager allows people to quickly and easily update tracking codes and related code fragments collectively known as “tags” on their website. Once the Tag Manager web snippet has been added, marketers can configure and deploy their tag configurations from a web-based user interface without involving any developer work every time they need to make changes.
Send Standard Events
Step 1: Sign in to your Google Tag Manager account.
Step 2: Select your website’s container and click Add a new tag.
Step 3: Click Custom HTML Tag and type a name for your tag.
Step 4: Go to Events Manager and click Details for your pixel.
Step 5: Click Set Up and select Manually Install the Code Yourself.
Step 6: Copy the entire pixel base code, as shown below.
Step 7: Return to Google Tag Manager and paste the code in the HTML container.
Step 8: Click Advanced Settings and under Tag firing options, select Once per page.
Step 9: Under Fire On, select All Pages.
Create Action-Specific Tags
Now that you have your base code installed, you can create specific tags for the different types of pages and events on your website (ex: product page, Add to Cart button, purchase page).
Step 1: In Google Tag Manager, select your website’s container and click Add a New Tag.
Step 2: Name your tag, then insert just the code snippet relating to that event, plus any other variables you want to track. Your variables (ex: product_ids and product_name) may be different from the example below. You can pass variables from your webpage to the code snippet via Google Tag Manager.
Step 3: Click Custom HTML Tag and type a name for your tag.
Step 4: Copy and paste the code snippet relating to the event and any other variables you want to track. Your variables (ex: product_ids and product_name) may be different from the example below.
Step 5: Under Advanced Settings > Tag Firing options, select Once per event.
Step 6: Check the Tag Sequencing box and select your base code tag, to ensure this tag fires after your base code.
Step 7: Under Fire On, select the trigger that’s relevant for your site.
Step 8: Click Create Tag.
Step 9: In the same way, create tags for the other events on your website (ex: add to cart, purchase). See the examples below.
Step 10: When you’re finished creating tags, click Publish.
Google Tag Manager Data Layer
The Google Tag Manager data layer is an object that contains all of the information that people want to pass to Google Tag Manager from their website. Information, such as events or variables, can be passed to Google Tag Manager via the data layer, and triggers can be set up in Google Tag Manager based on the values of variables or based on the specific events. Variable values can also be passed through to other tags (for example, pass purchase total into the value field of a tag).
Step 1: Define the data layer in your HTML; see following example:
Step 2: In Google Tag Manager, define the data layer variable at Variables → User-Defined Variables.
Step 3: In tag HTML, you can reference the data layer by the {{ }} placeholder; for example:
fbq(‘track’, ‘Purchase’,
{ content_ids: {{content_ids}},
content_type: ‘product’,
value: {{total}} });