Google Tag Manager

How to Install Facebook Standard and Custom Events in Your Website

Want to increase the overall business results with Facebook Ads? This is a great objective, but in order to achieve it you should keep on eye on what makes your business run (sales, leads, newsletter registrations and so on). To do this in the Facebook ecosystem you will have to leverage the power of one very important feature: Facebook Pixel events! 

What are Facebook Pixel events

This article makes use of information related to the Facebook Pixel, if you haven’t already, make sure to firstly read the article about how to add Facebook Pixel to your website using Google Tag Manager. This is important because it lays the foundation for the information that will be presented in this article.

Basically events, as defined by Facebook, are “actions that happen on your website” (Source). Anything that happens on your website, click, page viewed, download, subscribe, can be measured and sent to Facebook as an event. In order to do this you will have to adjust your base Facebook pixel code with some additional lines of code.

Don’t worry if you don’t have the required technical skills or don’t have a developer on speed dial. We will take things slow & easy and will make use of Google Tag Manager which will make this process a breeze!

Note: Due to current changes caused by the iOS 14 update you will be able to configure up to 8 unique conversion events per website domain that can be used for campaign optimization. For more information about Facebook Pixel Updates for Apple’s iOS 14 Requirements, follow this link.

If you’ve already followed my video on how to set-up and add the Facebook pixel in your website and the associated article, mentioned above, you already know that the Facebook Pixel comes out of the box with an event, called PageView.

This event is the most basic one and it should be triggered on each page of your website. It’s uses are varied but some of the most note-worthy are:

  • Creation of remarketing audiences
  • Fueling Facebook Analytics reports

The basic PageView event code looks like this:

fbq(‘track’, ‘PageView’);

Again, don’t worry about the code itself. I will show you an easy and time-tested method to implement it.

There are two types of events: standard and custom. The PageView event, for example, is a standard Facebook event.

Standard events

Facebook defines standard events as “Standard events are predefined by Facebook and can be used to log conversions, optimize for conversions and build audiences.” (Source)

You can find the full list of Facebook Standard events at this link. The list will help you get a glance of all the events in one page. Also, it offers you the actual code that has to be implemented along with the Facebook pixel. Very handy, right?

We will refer to this table when we will do the actual implementation.

What you have most probably observed by now is that the list is huge and includes a lot of event types, which might or might not fit your business needs. For the latter, don’t worry, we will be able to set custom, tailored events for your business by leveraging the power of custom events.

The key here is to know what to track on your website. Every website and business is different and each has its own objectives. A freelancer, like me, might be looking for leads fbq(‘track’, ‘Lead’); an e-Commerce website will want to increase sales fbq(‘track’, ‘Purchase’, {value: 0.00, currency: ‘USD’}); (this code also contains additional parameters, that’s why it’s longer).   

It boils down to what is important for your specific business. There is also the possibility of grouping specific actions like phone calls and email clicks under one category like Contact: fbq(‘track’, ‘Contact’); 

Nesting different actions under one event (like the example above) could be useful if you are just starting out and your goal is to get as many clients to get in touch with you as possible. This can be achieved by creating a Facebook Ads campaign with the objective Conversions, we will talk about those in a future article.

Although such a strategy could work for you, when you start out, along the way you should consider creating separate events (standard & custom) for each of the important actions on your website. Creating separate campaigns with specific objectives, ad copies and targeting is also a sign of a maturity of an advertising account. This is what you should aim for in the long run.

Custom events

Custom events are a different flavour of Facebook events. The biggest advantage when using custom events is that you can create tailored events that match perfectly the important actions users take on your website.

In terms of the “code anatomy” there is a slight difference between the standard and custom events. 

fbq(‘trackCustom’, ‘YourCustomEvent’);

The function ‘track’, changed with ‘trackCustom’. Also, this time around you will be the one defining the custom event’s name (in the example above ‘YourCustomEvent’).

Another major difference is that standard events come with conversions that you can track out of the box. In the cast of custom ones you will have to create custom conversions. 

Custom conversions, as their regular counterparts, can be used in campaigns with conversion objectives. This can be extremely powerful, because it will allow you to tell Facebook what you want him to generate for you.

How to track Facebook Pixel Events using Google Tag Manager

If you’ve read the article by this point, I congratulate you, you now have a better understanding of Facebook events and how you should approach them. In this section we will see how to actually set them up and implement them using Google Tag Manager.

The setup process for custom and standard events varies slightly, I will approach them both below.

How to implement Facebook pixel standard events

Let’s start with the creation and setup process for standard events.

What you will need to get started:

  • Facebook Business Manager account
  • Google Tag Manager account
  1. Start by visiting the Facebook’s specification page for pixel standard events and pick your desired event (I choose “Lead” for our example)
  2. Open Google Tag Manager and select the appropriate account and container
  3. Navigate to Tags and click the New button
  4. Give your tag a name (I would recommend using a naming convention and keeping your name expressive)
  5. For the Tag Type select Custom HTML and add in the field the appropriate code from the table at point 1 (In our example this is fbq(‘track’, ‘Lead’);)
  6. Add a trigger to your tag (In our example this will be a trigger with the following setup ‘Page URL’ ‘contains’ ‘/success’)
  7. Click Save to save the current setup of the tag.
  8. In order to deploy your implementation live on your website, click Submit and then Publish

Congratulations! You have finished the setup and implementation process for your first Facebook standard event. 

In our example this specific setup will help us know how many people ended up reaching the /success page and thus sent us their contact information.

How to implement Facebook Pixel Custom Events

We will continue our example above to keep things simple. Basically, the biggest difference when it comes to custom events is related to how the code is written and the fact that you will have to create a custom conversion for it afterwards.

In order to make those changes we will have to make a small change to the step 5 above and add some additional steps after point 8.

For the point 5 we will still select Custom HTML for the Tag Type but this time around we won’t check the documentation for the event code because there is no standard code for that. I will use fbq(‘trackCustom’, ‘WebsiteLead’); for my example but you are free to change ‘WebsiteLead’ with anything that works for you. 

For the additional step:

  1. You will have to give Facebook some time to collect the custom event data. Open Facebook Events Manager and check if you have registered any hits for your new custom event.
  2. Go to Facebook Custom Conversions, and select the proper pixel from the upper-right side dropdown menu
  3. Click the Create Custom Conversion button (your page might look different if you have none or multiple custom events already created)
  4. Under Name give your conversion a name (in our example I will name mine Website Lead) & optionally add a description
  5. Under Data Source select your pixel
  6. For the Conversion Event select the appropriate custom event (In our case this will be WebsiteLead)
  7. Click Create

Now you are all set! You will be able to use your newly created conversion in campaigns and see it in your reports. Congratulations!

Bonus – Check events with Facebook Pixel Helper

In my next article we will look at how to test out your Google Tag Manager implementation. But for a sneak peek we will now look at the Facebook Pixel Helper, a very good and nifty tool.

You can download it for Chrome using this link

After you install it you will just have to click the icon from the upper-right side of the browser screen. Also, the tool is always-on and it will check for any facebook pixel related code. When it discovers any it will show a number, indicating the number of identified events. 

For example, you can see below an image of a product page from https://www2.hm.com/en_gb/ 

How can Facebook Pixel Helper help you

There are many things that this tool can do for you, but the most common are:

  • Identify how many pixels are on a website (yes, there can be many, you can see the image above for an example)
  • Identify the events in a specific webpage
  • Identify parameters assigned to specific events
  • Discover why the facebook pixel events are not working properly
  • Debug your implementation

Overall Facebook Pixel Helper it’s a great tool and there is no reason why you shouldn’t have it!

Andrei Oancea