Facebook Standard Events [2020 Updated Events].

  1. Home
  2. Blog
  3. Posts
  4. Facebook Standard Events [2020 Updated Events].
Facebook Standard Events
Dec 29
2 Comments Dec 29, 2017 Web / Google Analytics

Last Updated on October 8, 2020 by Ritwik B

Facebook standard events can track events happening on our website & reflect the same on your Facebook dashboard. They are mostly used for tracking e-commerce sites. but you can even use some of these methods for lead-based & SaaS sites too.

Recently, Facebook has added some new standard events. We’ll look into each of them in a while.

As per facebook docs, you can define 2 event types
Well here’s the thing…
It is always suggested to implement most of the standard pixel events so that you can get more insight out if it. Also, standard events can help you optimize conversions on facebook which custom events cannot.
The great thing about installing pixels for most events is you can define
and you can do that for any events type (Standard & Custom).
So, as per facebook docs.
// Standard event (can be used for conversion tracking// and optimizing in addition to audience building)
fbq('track', 'Purchase', {currency: 'EUR', value: 15.23});

// Custom event (can only be used for audience building)
fbq('trackCustom', 'MyCustomEvent', {custom_param: 'custom_value'});
But you can still use custom events to define Custom Conversion, but you cannot have facebook optimize it.
So, when you start populating the events, you can use one of the predefined categories (Image below) for optimizing the conversion.
It’s like telling Facebook, ‘Users who visited 4+ pages in a session is my lead or goal’.
Here’s how to do it.
 Custom_Events_Facebook_Pixel

Facebook Standard Events  – Implementation

Where & How To Place the Facebook Standard Pixel Code?

It is recommended to place the Facebook Base Pixel before the Closing </Head> Tag. The subsequent Standard Event Pixels can be triggered after the base pixel fires.
But If you are using Google Tag Manager, you can use event sequencing features (we’ll be looking at the same) to fire the pixels.
Check Here to check if you have deployed the facebook base pixel in a proper way.

Which are the different Facebook Standard Events?

Let us look at the standard events predefined by facebook.
The format for all the standard event is simple.
fbq(‘track’ , [STANDARD_EVENT_NAME] , {optional_parameters})
Before we start….
I recommend you to go to open this Demo E-commerce site by Google in a new tab. This site was created by Google to help users deploy Enhanced E-commerce Tracking in google analytics. We’ll use this for our guidance.
Let us go through the code one by one.

1.) ViewContent

You can use ViewContent to fire on

  • Blog Article
  • Product Page
  • Other Landing Page

Let’s take an example of an ecommerce site…

So, this code will fire when the user lands on the product details page. So, on the demo site when you click on the product you will land on the page which is as follows.

 Product_Page_-_Facebook_Pixel_Standard_Events-_Digishuffle

Step – 1: Populate the DataLayer via Server Side

You can ask your developer to place this code with the populated fields
<script>
var window.dataLayer = window.dataLayer || [];

dataLayer.push({
'event' : 'ProductDetailPage',                         //used for creating GTM trigger
customDataFB : 
     { 'content_name' : [NAME_OF_PRODUCT],
        'content_category' : [PRODUCT_CATEGORY],
        'content_ids : ['SKU#1' , 'SKU#2', 'SKU#3' ],
        'content_type': 'product',
        'value' : 33,
        'currency' : 'USD',
        'inStock' : 'Yes',                       // (Optional)
        'ProfitPerProduct' : 10              // (Optional)
       }
})
</script>

Step – 2: Create GTM Variable – ‘customDataFacebook’ 

Go To GTM > Create Variable > DataLayer Variable with value as ‘customDataFB’
Facebook_Standard_events_-_GTM_Variable

Step – 3: Create Custom HTML Tag & paste the following code.

Create a custom HTML Tag, named Facebook_ViewContent & paste the following code
<script>
fbq('track', 'ViewContent', {{customDataFacebook}} );
</script>

Step – 4: Implement Tag Sequencing

Tag sequencing ensures the ‘fbq‘ object has been initialized.
If you are unsure about the Facebook Base Pixel or if it has been setup properly check it out here.
Facebook_Standard_Events_-_BAse_Pixel_Tag_Sequencing

Step – 5: Create an Event Trigger

We have to create an event trigger to fire this event.
Simply go to trigger > Create Custom Event Trigger > Enter  ‘ProductDetailPage’
Facebook_Standard_Events_-_ViewContent_Pixel

Step – 6: Use Facebook Pixel Debugger & Create Conversions & Audiences 

You can use facebook pixel helper to debug event & check if the parameters are properly populated.
After some time, the events will start showing up in the facebook event manager.
Only After that, you can create Custom conversions & Build audiences for remarketing.

2.) AddToCart & AddToWishlist

There is not much difference in AddToCart & AddToWishlist events, except the ‘event name’.
So follow the same process & include
  • fbq(‘track’, ‘AddToCart, ……) for AddToCart 
  • fbq(‘track’, ‘AddToWishlist, ……) for AddToWishlist
We’ll just look at the addtocart example below.

Step – 1: Populate the dataLayer

Fire the following code when someone clicks on AddToCart button.
<script>
var window.dataLayer = window.dataLayer || []

dataLayer.push({
'event' : 'AddToCart',                         //used for creating GTM trigger
customDataFB : 
     { 'content_name' : [NAME_OF_PRODUCT],
        'content_category' : [PRODUCT_CATEGORY],
        'content_ids : ['SKU#1' , 'SKU#2', 'SKU#3' ],
        'content_type': 'product',                       //Don't change
        'content' : [ {'id' :'SKU#1',                    // Used For Dynamic Remarketing
                          'quantity' : '2',
                          'price' : 33 }],
        'value' : 33,
        'currency' : 'USD',
        'inStock' : 'Yes',                       // (Optional)
        'ProfitPerProduct' : 10              // (Optional)
       }
})
</script>

Step – 2: Create a GTM Variable – ‘customDataFacebook’ (Skip This Step if Already Created)

Step – 3: Create Custom HTML Tag & paste the following code.

Create a custom HTML Tag, named ‘Facebook_AddToCart’ & paste the following code
<script>
fbq('track', 'AddToCart', {{customDataFacebook}} );
</script>

3.) Initiate Checkout

You can implement this code on
  • When someone clicks on checkout button OR
  • When someone lands on the first checkout page.
We will implement it when someone lands on the checkout page, as the checkout click button would be present on many pages

Step – 1: Populate the dataLayer

Fire the below code when someone lands on the checkout starting page.
Facebook_Standard_Event_-_Initiate_Checkout_Event
<script>
var window.dataLayer = window.dataLayer || []; 

dataLayer.push({
'event' : 'CheckoutInititated',                         //used for creating GTM trigger
customDataFB : 
     {  'content_ids : ['SKU#1' , 'SKU#2', 'SKU#3' ],
        'content_type': 'product',                                //(Optional)
        'contents' : [ {'id' :'SKU#1',                              // Used For Dynamic Remarketing
                          'quantity' : '2',
                          'price' : 30 }
                          {'id' : 'SKU#2' ,
                           'quantity' : 3,
                            'price' : 40],
        'value' : 180,
        'currency' : 'USD',
        'num_items' : 2
       }
})

</script>

Step – 2: Create a GTM Variable – ‘customDataFacebook’ (Skip This Step if Already Created)

Step – 3: Create Custom HTML Tag & paste the following code.

Create a custom HTML Tag, named ‘Facebook_InitiateCheckout‘ & paste the following code
<script>
fbq('track', 'InitiateCheckout', {{customDataFacebook}} );
</script>

Step – 4: Implement Tag Sequencing

Step – 5: Create an Event Trigger

Create custom event trigger named ‘CheckoutInititated‘ & publish the tag.
Check here for the previous implementation

Step – 6: Use Facebook Pixel Debugger & Create Conversions & Audiences

4.) Add Payment Info

We can implement the AddPaymentInfo when
  • The payment info has been added to billing info page & user clicks next. OR
  • When lands on next page. (Review Cart)
If you have an SPA or a page where URL does not change during checkout, you can fire the pixel on the button click.

Step – 1: Populate the dataLayer

Fire the below code when someone successfully selects payment info & clicks to next page/screen.
Facebook_Standard_Event_-_Add_Payment_Info
<script>
var window.dataLayer = window.dataLayer || []

dataLayer.push({
'event' : 'PaymentInfoAdded',                         //used for creating GTM trigger
customDataFB : 
     {  'content_ids : ['SKU#1' , 'SKU#2', 'SKU#3' ],
        'content_type': 'product',                                //(Optional)
        'contents' : [ {'id' :'SKU#1',                              // Used For Dynamic Remarketing
                          'quantity' : '2',
                          'price' : 30 }
                          {'id' : 'SKU#2' ,
                           'quantity' : 3,
                            'price' : 40],
        'value' : 180,
        'currency' : 'USD'
       }
})
</script>

Step – 2: Create a GTM Variable – ‘customDataFacebook’ (Skip This Step if Already Created)

Step – 3: Create Custom HTML Tag & paste the following code.

Create a custom HTML Tag, named ‘Facebook_PaymentInfoAdded’ & paste the following code
<script>
fbq('track', 'AddPaymentInfo', {{customDataFacebook}} );
</script>

Step – 4: Implement Tag Sequencing

Step – 5: Create an Event Trigger

Create custom event trigger named ‘PaymentInfoAdded‘ & publish the tag.

Step – 6: Use Facebook Pixel Debugger & Create Conversions & Audiences

5.) Purchase

The following code should fire when the user successfully completes a transaction. This standard event can help you view powerful metris like
  • Website ROAS
  • Website Conversion Value

So, let’s get started…

Step – 1: Populate the dataLayer

Fire the below code when the user lands on thank you page after successfully redirecting from the payment gateway.
Facebook Standard Events - Purchase Event
<script>
var window.dataLayer = window.dataLayer || []
 
dataLayer.push({
'event' : 'TransactionSuccess',                         //used for creating GTM trigger
customDataFB : 
     {  'content_ids : ['SKU#1' , 'SKU#2', 'SKU#3' ],
        'content_type': 'product',                                //(Optional)
        'contents' : [ {'id' :'SKU#1',                              // Used For Dynamic Remarketing
                          'quantity' : '2',
                          'price' : 30 }
                          {'id' : 'SKU#2' ,
                           'quantity' : 3,
                            'price' : 40],
        'value' : 180,
        'currency' : 'USD',
        'num_items' : 2
       }
})
</script>

Step – 2: Create a GTM Variable – ‘customDataFacebook’ (Skip This Step if Already Created)

Step – 3: Create Custom HTML Tag & paste the following code.

Create a custom HTML Tag, named ‘Facebook_Purchase‘ & paste the following code

<script>
fbq('track', 'Purchase', {{customDataFacebook}} );
</script>

Step – 4: Implement Tag Sequencing

Step – 5: Create an Event Trigger

Create custom event trigger named ‘TransactionSuccess‘ & publish the tag.
Check here for the previous implementation

6.) Lead & CompleteRegistration

These pixels should fire when the user
  • Successfully submits the Form – CompleteRegistration.
  • Successfully signs up for freetrail, subscribes, etc (other lead captures)

Step – 1: Populate the dataLayer

Fire the below code when a user lands on thank you page after successfully submitting form or lead.
For Lead Event:
<script>
var window.dataLayer = window.dataLayer || []

dataLayer.push({
'event' : 'LeadSuccess',                         //used for creating GTM trigger
customDataFB : 
     {  'content_name : 'Email_Subscription',
        'content_category': 'Email',                                //(Optional)
        'value' : 180,
        'currency' : 'USD'
        }
}
</script>

For CompleteRegistration Event:

<script>
var window.dataLayer = window.dataLayer || []
dataLayer.push({
'event' : 'RegistrationSuccess',                         //used for creating GTM trigger
customDataFB : 
     {  'content_name' : 'SEOTool' ,
        'value' : 180,
        'currency' : 'USD'
        'status' : 'Pending_Email_Verification'
        }
}
</script>
Feel free to include/exclude parameters

Step – 2: Create a GTM Variable – ‘customDataFacebook’ (Skip This Step if Already Created)

Step – 3: Create Custom HTML Tag & paste the following code.

Create a custom HTML Tag & paste the following code
For Lead:
<script>
fbq('track', 'Lead', {{customDataFacebook}} );
</script>
For Registration:
<script>
fbq('track', 'CompleteRegistration', {{customDataFacebook}} );
</script>

Step – 4: Implement Tag Sequencing

Step – 5: Create an Event Trigger

Create custom event trigger named ‘LeadSuccess’ or ‘RegistrationSuccess‘ & publish the tag.
Check here for the previous implementation

Step – 6: Use Facebook Pixel Debugger & Create Conversions & Audiences

7.) Search

When the user successfully performs a search in the search bar, you can fire the facebook ‘search’ event along with the parameters.
But here’s the problem…
Depending on the various platforms, the URL format for the search will differ. We will also look at some of the search formats used & How we can deal with the situation.
Let us first complete the basic steps first.

Step – 1: Create Custom HTML Tag

Fire the below code when the user successfully completes the search & lands on ‘/search/’ page.
Insert Your Search Format in the following code by replacing your URL search term with {SEARCHQUERY}.
Lets say user searches for term ‘BlackShoes’
Eg:
  • ‘/search/BlackShoes/’  —> Format: ‘/search/{SEARCHQUERY}’
  • /?q=BlackShoes’  —–> Format: ‘?q={SEARCHQUERY}’
  • /?search=BlackShoes’  —–> Format: ‘?search={SEARCHQUERY}’
  • /?d=Desktop&query=BlackShoes’  —–> Format: ‘query={SEARCHQUERY}’
etc
<script>
//Insert the URL Format for search URL ////////
var searchFormat = '/search/{SEARCHQUERY}'             //Enter YOUR URL Format

var reg = new RegExp(searchFormat.replace('{SEARCHQUERY}','([^\?|\/|&]+)'))
var search_string = decodeURIComponent(reg.exec(location.href)[1])


var customDataFB =  { 'search_string' : search_string, 
        'content_ids : ['SKU#1' , 'SKU#2' ],
        'contents' : [ {'id' :'SKU#1',                              // Items returned after search
                          'price' : 30 }
                          {'id' : 'SKU#2',
                            'price' : 40],
        'value' : 70,
        'currency' : 'USD'
          }

fbq('track', 'Search', customDataFB );

</script>

Step – 2: Implement Tag Sequencing

Step – 3: Add a  Search Success Trigger

You can fire the code on successful search page load. You can use the conditions such as fire the tag on
URL contains ‘/search/’ , etc

8.) Contact

You can fire this standard event when the user contacts your business via
  • Telephone/SMS
  • Chat plugins
  • Other contacts

The process is quite similar to previous ones…

Step – 1: Create Custom HTML Tag

Fire the below code when the user initiates a chat.
<script>
fbq('track', 'Contact');
</script>

Step – 2: Implement Tag Sequencing

Step – 3: Add a  Chat Initiate Success Trigger

You can fire the code when the user submits a contact or initiates a chat on your website. You can check the chat plugin docs for webhooks.

9.) Customize Product

You can use this event if you have any tool on your website to customize the products

Step – 1: Create Custom HTML Tag

Fire the below code when the user initiates a chat.
<script>
fbq('track', 'CustomiseProduct');
</script>

Step – 2: Implement Tag Sequencing

Step – 3: Add a  Chat Initiate Success Trigger

You can fire the code when the user submits a contact or initiates a chat on your website. You can check the chat plugin docs for webhooks.

10.) Donate

You can fire this event when the user makes a donation to
  • You/Your website/project.
  • A particular cause

The event name is simply denoted by “Donate”

Step – 1: Create Custom HTML Tag

Fire the below code when the user initiates a chat.
<script>
fbq('track', 'Donate');
</script>

Step – 2: Implement Tag Sequencing

Step – 3: Add a  Chat Initiate Success Trigger

You can fire the code when the user submits a contact or initiates a chat on your website. You can check the chat plugin docs for webhooks.

11.) Find Location

You can fire this event when the user clicks on find location/visits contact page or uses any other functionality to find your business location.

Step – 1: Create Custom HTML Tag

Fire the below code.

Step – 2: Implement Tag Sequencing

Step – 3: Add a  Chat Initiate Success Trigger

You can fire the code when the user clicks on find location/accesses contact page/uses other functionality to view the location.

12.) Schedule

You can fire this event when the user clicks books an appointment on your website.

Step – 1: Create Custom HTML Tag

Fire the below code.

Step – 2: Implement Tag Sequencing

Step – 3: Add a  Chat Initiate Success Trigger

You can fire the code when the user successfully schedules an appointment.

13.) Start Trial

If you run a SaaS business or have any subscription/freemium product (free trial). You can fire this event when the user subscribes for a trial period.

Step – 1: Populate the dataLayer

Fire the below code when someone successfully starts a trail.
<script>
var window.dataLayer = window.dataLayer || []

dataLayer.push({
'event' : 'TrailStarted',                         //used for creating GTM trigger
customDataFB : 
     {  'predicted_ltv' : '500',
        'value' : 180,
        'currency' : 'USD'
       }
})
</script>

Step – 2: Create a GTM Variable – ‘customDataFacebook’ (Skip This Step if Already Created)

Step – 3: Create Custom HTML Tag & paste the following code.

Create a custom HTML Tag, named ‘Facebook_StartedTrial’ & paste the following code
<script>
fbq('track', 'StartTrial', {{customDataFacebook}} );
</script>

Step – 4: Implement Tag Sequencing

Step – 5: Create an Event Trigger

Create custom event trigger named ‘TrailStarted‘ & publish the tag.

Step – 6: Use Facebook Pixel Debugger & Create Conversions & Audiences

14.) Subscribe

If you run a SaaS business or have any subscription/freemium product. You can fire this event when the user starts the paid subscribtion. Here’s how you can do it…

Step – 1: Populate the dataLayer

Fire the below code when someone successfully starts a trail.
<script>
var window.dataLayer = window.dataLayer || []

dataLayer.push({
'event' : 'SubscriptionStarted',                         //used for creating GTM trigger
customDataFB : 
     {  'predicted_ltv' : '500',
        'value' : 200,
        'currency' : 'USD'
       }
})
</script>

Step – 2: Create a GTM Variable – ‘customDataFacebook’ (Skip This Step if Already Created)

Step – 3: Create Custom HTML Tag & paste the following code.

Create a custom HTML Tag, named ‘Facebook_Subscription’ & paste the following code
<script>
fbq('track', 'Subscribe', {{customDataFacebook}} );
</script>

Step – 4: Implement Tag Sequencing

Step – 5: Create an Event Trigger

Create custom event trigger named ‘SubscriptionStarted‘ & publish the tag.

Step – 6: Use Facebook Pixel Debugger & Create Conversions & Audiences

15.) Submit Application

You can fire this event when the user submits any of the following applications such as:
  • Job application
  • Educational programme
  • Credit Card 
  • Other application

Step – 1: Create Custom HTML Tag

Fire the below code when someone successfully submits the form.

Step – 2: Implement Tag Sequencing

Step – 3: Add a  Chat Initiate Success Trigger

You can fire the code when the user successfully submits the application form & lands on thank you page.

Step – 4: Use Facebook Pixel Debugger & Create Conversions & Audiences

You can check form tracking guide for step by step tracking 3rd party forms like contact form7, caldera form, jot form & more..

Too Many Facebook Pixel Tags, Is There any other way to Reduce It?

Well Yes.
The fact that I used dataLayer events is because now we can combine all those tags into one.
If you want to create one or more ecommerce tags or maybe all, it’s good to include all the tags in a single Custom HTML Tag.

Step – 1: Add All Tags in Custom HTML

In custom HTML Tag, you can add dataLayer event conditions via IF statement in JS.
<script>

if ({{Event}} == 'ProductDetailPage')
{
fbq('track', 'ProductDetailPage', {{customDataFacebook}} );
}

if ({{Event}} == 'AddToCart')
{
fbq('track', 'AddToCart', {{customDataFacebook}} );
}

if ({{Event}} == 'PaymentInfoAdded')
{
fbq('track', 'PaymentInfoAdded', {{customDataFacebook}} );
}

if ({{Event}} == 'CheckoutInitiated')
{
fbq('track', 'CheckoutInitiated', {{customDataFacebook}} );
}

if ({{Event}} == 'TransactionSuccess')
{
fbq('track', 'TransactionSuccess', {{customDataFacebook}} );
}
</script>

Step – 2: Create a Common Trigger via Regex

You can use the trigger Regex feature to fire for all the events defined by dataLayer.
Facebook_Standard_Events_-_Regex Trigger_Events
If you plan to use this method, make sure to define events like
‘FB_viewContent’ , ‘FB_AddToCart’ , FB_InitiateCheckout’, FB_Purchase’ , etc
so that you can just include ‘FB_’ in the custom event regex trigger.

Want to Implement Facebook Dynamic Remarketing?

For Dynamic Remarketing make sure, you are including ‘content_ids’ , ‘contents’ & ‘content_type’ parameters in
  • ViewContent
  • AddToCart
  • Purchase
Contents is simply the product array of object. The parameters of contents are ‘id’, ‘quantity’ & ‘item_price’.

Have You Implemented Enhanced E-commerce In Google Analytics via GTM?

If you have already implemented Enhanced E-commerce, it is quite easy to replicate the same dataLayer field to fire Facebook Standard Pixels.
Simply create a dataLayer variable in GTM & use e-commerce Object to extract the values collected. These values can then be mapped to the content_ids & contents variable in facebook pixel.

Important Points:

  • You can event fire these events without the parameters. simply fbq(‘track’, ‘ViewContent’)
  • Events take some time to populate in Facebook Events Manager. Only after that, you’ll be able to create custom conversions & build audiences.
  • You can even use the manual method for implementation but the pros of GTM are the same values can be used for dynamic remarketing on Google Display network & Enhanced Ecommerce Tracking in Google Analytics.
  • Feel Free To Comment if you have any doubts/issues 😉

Want More Articles To Gain More Insights From Your Website Visitors ??

300+ Facebook Metrics List [Ad Insights + Page Metrics] With Definition

Facebook Pixel Helper: How To Use? & Debug Pixel Errors The Proper Way [BONUS TIPS]

Automated Cost Data Import – Facebook To Google Analytics

16 Facebook Custom Events To Build Custom Audiences & Define Conversions

Ritwik is a product owner at DigiXport. He also loves to write technical & easy to understand blogs for Marketers & Entrepreneurs. A Firm Believer in Teaching -> Learning -> Growing. :)

Comments (2)

  1. ¡Hola!
    Muy interesante el artículo pero tengo una duda muy básica, ¿puedo usar el mismo evento estándar para diversas landing pages, y por lo tanto, diferentes campañas de Facebook?

    Por ejemplo usar el de registro completo varias veces:

    fbq(‘track’, ‘CompleteRegistration’ );

    Gracias

    Ana June 9, 2018 at 12:14 am Reply

    1. Sí
      Puede usar el parámetro ‘content_name’ para diferentes páginas de inicio y campañas de Facebook.
      P.ej:

      fbq (‘track’, ‘CompleteRegistration’, {‘content_name’: ‘campaign1_landingpage1’});

      O
      fbq (‘track’, ‘CompleteRegistration’, {‘content_name’: ‘campaign2_landingpage2’});
      & pronto…….

      Entonces, puedes filtrarlo en Facebook
      tablero.

      Consulte: https: //developers.facebook.com/docs/ads-for-websites/pixel-events/v3.0#events

      Ritwik B June 10, 2018 at 3:40 pm Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts: