How to install the Meta Pixel with Google Tag Manager
We've already covered how to install both Google Analytics and the Meta Pixel, but we didn't cover how to install the Meta Pixel inside Google Analytics. So, with today's blog, we're going to cover the best way to install the Meta Pixel with Google Tag Manager. Which will allow you to install your Meta Pixel along side of your Google Analytics tracking code. This will also help speed up your website and keep your tracking codes all in one place. If you've never heard of or used the Google Tag Manager, that's where we're heading today. Let's jump into it.
First, we're going to want to jump over to the Google Tag Manager and set up our account if it's not set up already. We can do this at the following site: https://tagmanager.google.com/. Once there, we'll click on "Create Account".
Next we'll name the tag account we're creating, insert your company name in the Account Name field. If you'd like, you can even opt to share your data anonymously with the checkbox just under the country field.
Next, you'll want to name the container we're establishing with the domain name that we'll be tracking. Last, you'll click on "Web" as we're looking to do tracking on a desktop or mobile website. Once you've selected the appropriate target platform, go ahead and click "Create".
This'll pop up the terms and conditions, which you'll need to accept with the checkbox at the bottom, then click "yes" at the top to continue. You'll then be shown your two tracking codes; you'll want to copy and paste these into a Google Document for safekeeping.
These codes will be enclosed with comment tags.
The first code should go as high up inside your tag as possible, and the second will go just after your opening tag. Next, we're going to head on over to your Tags, by clicking the "Tags" link on the left. We'll then click "New" as we're looking to create a new tag.
The page should slide out with three actions to take. First, rename your tag to something appropriate. In my case, I'll call this 'Google Analytics' and replace the "Untitled Tag" text. Next, I'll click in the "Tag Configuration" box and select 'Google Analytics: Universal Analytics', I'll set the view type to 'page view', you may set this tag as appropriate for your purposes. The next field you'll want to select is the checkbox next to 'Enable overriding settings in this tag' then enter your Google Analytics code in the box provided. Once done, I'll then select the "Triggering" option and select 'All Pages'. Once complete, I'll click "Add" in the upper right corner and then "Save".
Next, we'll click on "New" again to add another tracking code. This time, we'll name it FB Tracking. For the tag type, we'll select "Custom HTML", which you may need to scroll down to see. An HTML block will be added to the page. In this HTML block, you'll want to paste your entire Meta Pixel code. If you don't remember how to get your pixel code, jump over to our blog on How to Install your Meta Pixel. Once your tracking code is in place, scroll down to Advanced settings. For this code, we want to only fire the tracking code once per page, so we'll select "Once per page" from the 'Tag firing options' dropdown. Then under 'Triggering' we'll again select "All Pages" and then we'll hit "Add" in the upper right corner and then "Save".
You'll probably want to add a few more events for your Meta pixel. To do this, you'll continue to use the "New' button and select "Custom HTML" again. You'll paste in the event code from Facebook for your event. Something like:
Then, you'll go down to the 'Advanced Settings'. Set the 'tag firing options' to 'Once per page' then scroll down to 'Tag Sequencing'. Here, you'll want to select "Fire a tag before 'name of your tag'". My tag is called 'FB InitiateCheckout', so it'll say "Fire a tag before FB InitiateCheckout" for my option. Then select the base Meta Pixel tag and since we can create issues if the Meta pixel code isn't working, we'll want to check the box next to "Don't fire FB InitiateCheckout if FB Tracking fails or is paused." The last thing you'll want to do is make sure that the tag only fires on the appropriate page, so inside 'Triggering' you'll want to select the matching event from your website. For me this is when a specific page loads, so from the window with "All Pages", you'll click the "+" sign in the upper right corner of the box. This'll load another page, so you can configure what page is your 'Initiate Checkout' page. You'll want to name the trigger, which for me is FB InitiateCheckout PageLoad. Then I'll set the "Trigger Configuration" to "Page View" then the bullet option for "Some Page Views'. Then I'll set the configuration to 'Page Url" -> "Contains" -> "page name" and hit Save. Now the page event is set up correctly, we'll hit "Save' one more time to complete the event tag.
Once all of our events have been added, we'll go ahead and 'submit' our tags. Once you hit submit, the system will ask you to name this Version of the tag. Set the name and description to something appropriate. Then hit publish to complete the setup. If there are any errors, the system will let you know. Once everything is good, your changes will be published and your new 1 tracking code will be active. To test to make sure it's working properly, we can go to the Events Manager for your Meta Pixel, on Facebook's website to see if our events are triggering.
First, we're going to want to jump over to the Google Tag Manager and set up our account if it's not set up already. We can do this at the following site: https://tagmanager.google.com/. Once there, we'll click on "Create Account".
Next we'll name the tag account we're creating, insert your company name in the Account Name field. If you'd like, you can even opt to share your data anonymously with the checkbox just under the country field.
Next, you'll want to name the container we're establishing with the domain name that we'll be tracking. Last, you'll click on "Web" as we're looking to do tracking on a desktop or mobile website. Once you've selected the appropriate target platform, go ahead and click "Create".
This'll pop up the terms and conditions, which you'll need to accept with the checkbox at the bottom, then click "yes" at the top to continue. You'll then be shown your two tracking codes; you'll want to copy and paste these into a Google Document for safekeeping.
These codes will be enclosed with comment tags.
<!-- Google Tag Manager -->
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<!-- End Google Tag Manager (noscript) -->
The first code should go as high up inside your tag as possible, and the second will go just after your opening tag. Next, we're going to head on over to your Tags, by clicking the "Tags" link on the left. We'll then click "New" as we're looking to create a new tag.
The page should slide out with three actions to take. First, rename your tag to something appropriate. In my case, I'll call this 'Google Analytics' and replace the "Untitled Tag" text. Next, I'll click in the "Tag Configuration" box and select 'Google Analytics: Universal Analytics', I'll set the view type to 'page view', you may set this tag as appropriate for your purposes. The next field you'll want to select is the checkbox next to 'Enable overriding settings in this tag' then enter your Google Analytics code in the box provided. Once done, I'll then select the "Triggering" option and select 'All Pages'. Once complete, I'll click "Add" in the upper right corner and then "Save".
Next, we'll click on "New" again to add another tracking code. This time, we'll name it FB Tracking. For the tag type, we'll select "Custom HTML", which you may need to scroll down to see. An HTML block will be added to the page. In this HTML block, you'll want to paste your entire Meta Pixel code. If you don't remember how to get your pixel code, jump over to our blog on How to Install your Meta Pixel. Once your tracking code is in place, scroll down to Advanced settings. For this code, we want to only fire the tracking code once per page, so we'll select "Once per page" from the 'Tag firing options' dropdown. Then under 'Triggering' we'll again select "All Pages" and then we'll hit "Add" in the upper right corner and then "Save".
You'll probably want to add a few more events for your Meta pixel. To do this, you'll continue to use the "New' button and select "Custom HTML" again. You'll paste in the event code from Facebook for your event. Something like:
<script>
fbq('track', 'InitiateCheckout');
</script>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=XXXXXXXXXXXX&ev=InitiateCheckout&noscript=1"/></noscript>
Then, you'll go down to the 'Advanced Settings'. Set the 'tag firing options' to 'Once per page' then scroll down to 'Tag Sequencing'. Here, you'll want to select "Fire a tag before 'name of your tag'". My tag is called 'FB InitiateCheckout', so it'll say "Fire a tag before FB InitiateCheckout" for my option. Then select the base Meta Pixel tag and since we can create issues if the Meta pixel code isn't working, we'll want to check the box next to "Don't fire FB InitiateCheckout if FB Tracking fails or is paused." The last thing you'll want to do is make sure that the tag only fires on the appropriate page, so inside 'Triggering' you'll want to select the matching event from your website. For me this is when a specific page loads, so from the window with "All Pages", you'll click the "+" sign in the upper right corner of the box. This'll load another page, so you can configure what page is your 'Initiate Checkout' page. You'll want to name the trigger, which for me is FB InitiateCheckout PageLoad. Then I'll set the "Trigger Configuration" to "Page View" then the bullet option for "Some Page Views'. Then I'll set the configuration to 'Page Url" -> "Contains" -> "page name" and hit Save. Now the page event is set up correctly, we'll hit "Save' one more time to complete the event tag.
Once all of our events have been added, we'll go ahead and 'submit' our tags. Once you hit submit, the system will ask you to name this Version of the tag. Set the name and description to something appropriate. Then hit publish to complete the setup. If there are any errors, the system will let you know. Once everything is good, your changes will be published and your new 1 tracking code will be active. To test to make sure it's working properly, we can go to the Events Manager for your Meta Pixel, on Facebook's website to see if our events are triggering.
Pinterest
Twitter
Facebook
