How to set up Meiro Events for Facebook Conversion API

This document describes the prerequisites that need to be done while implementing Meiro Events in order to prepare an export to Facebook Conversion API. This can be done directly on the website's source code (preferred) or using Google Tag Manager.

The reason is that the event ID should be the same for the Meiro Event tracking function and the same for the Facebook tracking function for every event. 

Users need to define id in various ways:

• Uuid or external uuid library, 
• A mix of form id and timestamp when it was sent and pass it to both functions.

If that is set correctly data analysts can sync the basics of this function.

Warning: Each event needs to have a unique event id.

Here are the steps to take:

1. Define one tag for each event e.g.  transaction or addToCart event. Here is a list of standard events you can explore or you can set your own custom event. It is recommended to have the same event name and event_id as the Meta Pixel for event deduplication purposes. 
2. Generate uuid or some other unique event_id identifier
3. Send both events, MeiroEvents.track(…) & fbq('track'…) and use the same generated event_id.
4. Recommended to add event_name in the payload for MeiroEvents.track(...) as one of the custom fields. The event_name needs to match the event being tracked by the Meta  Pixel in fbq(‘track’, ‘event_name’ … ). With this, the analyst doing the implementation can pick up the event_name from Meiro events when sending it to the FB Conversion API. Without this in the payload, there needs to be predefined logic to map Meiro events to the tracked Meta Pixel event name.  
5. At least one customer identifier is needed, such as email in the payload.

Remember: If the customer identifier cannot be added to the payload, we can ingest the conversion events and run it through idenity stitching in order to obtain an identifier. However, this will result in longer man hours for data processing (ingestion, identity stitching, attribute calculation).

Learn more: about customer identifiers here.

    6. Inform your Meiro contact on the following:

• List of events implemented with the exact event name 
• Associated Meta pixel 

Learn more: about Meta  Pixel and server event deduplication: here

There must be 3 types of events set in order to track additional events:

1. FB Pixel integration firing on all pages is just the initialisation script that you will get from Facebook.
2. ME Init is the SDK initialisation script that you can find in our docs.
3. UUID dependency tag imports library for creating event id, but something different can also be used, e.g. unique form id + timestamp when a user sent it.

Warning: Those 3 tags must be in place in order to set other tags for particular events. Each event must have a unique tag. E.g. if you set multiple forms submitted, each must have its own tag set. 

Remember: For "currency" and "value" parameters, it is required to specify a value for it. Refer here for more details. 

Below is an example of the setting for the form submit type of event using Google Tag Manager. That being said, the same script can be directly implemented on the website itself as well.

In this case, the tag, "Events - Form submit - Newsletter" is triggered by newsletter form submission and is set up in the following way:

<script>  
var uuid = uuidv4();  
var email = $(".sib_signup_form input[name=email]").val();  
var firstName = $(".sib_signup_form input[name=FIRSTNAME]").val();  
var lastName = $(".sib_signup_form input[name=LASTNAME]").val();  
var country = $(".sib_signup_form input[name=COUNTRY]").val();    

if (typeof MeiroEvents === "object") 
{    
  MeiroEvents.track("contactFormSubmit", {     
    form_id: "nl_signup_form",     
    email: email,      
    first_name: firstName,     
    last_name: lastName,      
    field00: uuid,      
    field01: country,      
    field02: "formSubmit" //note that the name matches exactly with the fbq event    
  });  
}    
if (typeof fbq === "function") {    
  fbq('track', 'formSubmit', {}, {eventID: uuid});  
}
</script>

When the tag is triggered, it creates uuid (defined in the code above field00: uuid and  {eventID: uuid}), extracts user filled data from form inputs and then sends both Meiro Events and Facebook events with the created uuid.

More Examples

Example for page view events:

<script>  
var uuid = uuidv4();
if (typeof MeiroEvents === "object") 
{    
  MeiroEvents.track("pageView",
	custom_payload: {      
      fb_event_id: uuid,           
      fb_event_name: "PageView" //note that the name matches exactly with the fbq event    
	});  
}    
if (typeof fbq === "function") {    
  fbq('track', 'PageView', {}, {eventID: uuid});  
}
</script>

How to test if it works

Check Facebook Pixel helper (extension to Chrome) where events are sent to Facebook Pixel. Then, check the event id and you can compare it to the Meiro Events tracking calls from the network tab if it matches (browser console). 

If it matches, the implementation went well.