Startseite » Webanalytics » Google Tag Manager » Use Facebook Pixel with Google Tag Manager

How do I use the Facebook Pixel with Google Tag Manager?

If you use Google Tag Manager to manage tags for your website, you can add your Facebook pixel to your Google Tag Manager account to measure and optimize the results of your Facebook ads.

Now, to install the Facebook Pixel in Google Tag Manager, you would need to do the following steps:

  1. Log in to your Google Tag Manager account.
  2. Select the container of your website and click Add new tag.
  3. Click Custom HTML Tag  and enter a name for your tag.

We will now switch to the Facebook account.

  1. Go to Events Manager and select Add Event .
  2. Select Install code manually .
  3. Select Copy Code to copy the entire base code of the pixel.
  4. Now we go back to Google Tag Managerand paste the code into the HTML container.
  5. Click on the drop-down menu Advanced Settings and select Once per page under Tag firing options .
  6. Go to Fire On and select All Pages.
  7. Click to create a tag.
Table of contents
What are the standard events?
How do I install these events?
Test Facebook Pixel
More content on GTM & web analytics

How do I create Facebook Events?

Now that you have your basic code set installed, you can create specific tags for the different types of pages and events on your site.

Add to Card, Purchase, Lead, Newsletter Registration etc.

You can get the code for these action-specific tags directly from Facebook. This must then also be integrated accordingly in the Google Tag Manager.

There are now 2 ways to do this.

  1. The Event Setup Tool from Facebook. With this, you can define the events directly on your page with Facebook’s own tool and these will then already be tracked automatically. For a basic installation this should be sufficient in any case, since you can already track Add to Card, all leads & button clicks without any problems.
  2. One uses the list of default events given by Facebook for the Facebook Pixel.

Since option 1 is self-explanatory, I would now take a closer look at option number 2 here.

What standard events are available for Facebook?

Enclosed you can see a list with all available standard events, which you can integrate via the Google Tag Manager.(Source Facebook)

Website plot Description Standard Event Code
Add payment data Adding a customer’s payment information at checkout. Example: Someone clicks a button to save their billing information. fbq(‘track’, ‘AddPaymentInfo’);
Add to cart Adding an item to the shopping cart or basket. Example: Someone clicks an “Add to Cart” button on a website. fbq(‘track’, ‘AddToCart’);
Add to wish list Adding items to a wish list. Example: Someone clicks an “Add to Wish List” button on a website. fbq(‘track’, ‘AddToWishlist’);
Completed registration A customer submits information in return for a service provided by your company. Example: Someone subscribes to a newsletter. fbq(‘track’, ‘CompleteRegistration’);
Contact A phone call/text message, email, chat, or other type of contact between a customer and your business. fbq(‘track’, ‘Contact’);
Customize product Customizing products using a configuration tool or other apps your company has. fbq(‘track’, ‘CustomizeProduct’);
Donations Donate to your organization or cause. fbq(‘track’, ‘Donate’);
Search place When a person searches for one of your locations over the Internet to visit. Example: Someone is looking for a product and finds it in one of your local stores. fbq(‘track’, ‘FindLocation’);
Start purchase process The beginning of a purchase process. Example: Someone clicks on a “Buy” button. fbq(‘track’, ‘InitiateCheckout’);
Lead A customer submits information and agrees that they may be contacted by your company at a later date. Example: Someone submits a form or signs up for a test. fbq(‘track’, ‘Lead’);
Purchase The completion of a purchase, usually marked by the receipt of the order or purchase confirmation or a transaction receipt. Example: Someone arrives at a thank you or confirmation page. fbq(‘track’, ‘Purchase’, {value: 0.00, currency: ‘USD’});
Arrange appointment Booking an appointment to visit one of your locations. fbq(‘track’, ‘Schedule’);
Search Searches, e.g., on your website or in your app or other asset. Example: Someone is looking for a product or a travel offer. fbq(‘track’, ‘Search’);
Use trial version Starting to use a trial version of a product or service you offer. Example: Someone starts a trial subscription. fbq(‘track’, ‘StartTrial’, {value: ‘0.00’, currency: ‘USD’, predicted_ltv: ‘0.00’});
Send application Sending a request to use a product, service or program from your offer. Example: Someone applies for a credit card or applies for an educational program or for a job. fbq(‘track’, ‘SubmitApplication’);
Subscribe The start of a paid subscription to your products or services. fbq(‘track’, ‘Subscribe’, {value: ‘0.00’, currency: ‘USD’, predicted_ltv: ‘0.00’});
Show content A visit to a website relevant to you. This can be a product page or landing page, for example. . “Show Content” shows you if someone is accessing the URL of a web page, but not what they are doing on that web page. fbq(‘track’, ‘ViewContent’);

 

So how do I install these standard Facebook Pixel events in Google Tag Manager?

It is important that the following steps are performed accordingly.

    1. The original code from your website: Add the Facebook Pixel code between the tags <head>  and </head>  of your website. If other code is already included between the head tags, simply insert the pixel code below but above the </head>.
    2. Your Facebook Pixel base code: Your Facebook Pixel code is similar to the image above. However, your pixel ID is not “1234567890”.
    3. Your default event code: Add in your Facebook Pixel code above the tag </script>  enter the standard event code relevant to your page, for example, the code for “Add to cart”. You need to do this for each page you want to track.

The key here is that each page of your site should contain everything under Section 2 (Basic Code), but different pages should contain different snippets of code for Section 3 (Standard Event Code). Below you can see an example.

facebook-pixel-code

Quelle: https://www.facebook.com/business/help/402791146561655?id=1205376682832142

After this code has been adapted according to the above illustration and created in the Google Tag Manager, all that remains to be done is to define which trigger is to trigger the whole thing.

Of course, the trigger to choose depends on the selected Facebook event. This means that the Add to Cart tag should only trigger if Add to Cart was also triggered by the user.

Now define the desired triggers and the Facebook Pixel is ready for use.

Can I check my Facebook Pixel & Facebook Events?

There is the so-called Pixel Helper from Faceook.

With the help of this browser extension, you can easily check the function of your Facebook Pixel and the associated events.

To do this, you simply need to follow these steps:

  1. Facebook Pixel & Facebook Events successfully created in Google Tag Manager or Facebook Event Tool.
  2. Install the Facebook Pixel Helper, preferably in the Chrome browser.
  3. Call the desired web page.
  4. Launch the browser extension and check if the Facebook Pixel triggers successfully.
  5. Now execute the event you defined and check if the Facebook Pixel receives the information accordingly.
  6. Congratulations, you have now successfully tested the Facebook Pixel.
  7. In case of problems, simply adjust the trigger or the code and test again.
facebook-pixel-helper

 

More content about Google Tag Manager