How does the Tracking Pixel work?

NOTE: Tracking pixel is currently a Beta feature. If you'd like access, please get in touch with us.

Maître Tracking Pixel is very similar to the Facebook tracking pixel in the way it works.
If you have experience with the latter, you will see lots of similarities.


Basic principles

In order to understand how the Maître Tracking Pixel works let's walk through an example step-by-step:

  1. Mark signs up on your Maître form and gets his unique referral link.
  2. Mark shares his referral link to invite his friends.
  3. Sara clicks on the referral link and lands on your website.
  4. We attach a cookie to Sara's session to identify her. No private information is exchanged.
    We only know that Sara has been referred by Mark.
  5. Sara sign-ups on your website and makes a purchase (which is the action you want to track as conversion)
  6. A conversion is triggered. The conversion is attributed to Mark.

NOTE: Maître Tracking Pixel is used along with one of our main tools: Waiting lists, Lead Magnets and Sweepstakes. It can't be used alone because your subscribers need to generate their referral link by signing up on your Maître form.

The Maître pixel code is made up of two components:

  • Pixel code
  • Conversion tracking code

Pixel code

The Pixel code tracks activity on your website and its main job is to make sure that when a person is referred to your website by someone via a referral link, a cookie is attached to that person's session. The base code should be installed on every page of your website or at the very least on the page where your users will land when they click the referral link.

To install the Pixel code:

  1. Go to the "Conversions" page in your campaign dashboard
  2. Click on the "Get Pixel Code" blue button
  3. Click the first "Copy to clipboard" button to copy the Pixel code

  4. Paste the code in between the <head> tags on each web page of your website.

Conversion tracking code

Conversions are actions that happen on your website that you want to track (eg: a purchase or a download). The Conversion tracking code lets you track those actions easily and also send extra information that you can use later.

The Conversion tracking code looks like this:

MTP.ready(function() {
  MTP.track('Purchase', { 
    points: 10,
    value: 50,
    currency: "USD",
    source: "Twitter",
    product_id: "Pro plan",
    transaction_id: "tr_123456789" 
    first_name: "Manuel", 
    last_name: "Frigerio", 
    email: "manuel@maitreapp.co"
  });
});

You must paste this code in your conversion page (eg: your "Thank you" page) or trigger it manually with Javascript.

IMPORTANT: the Conversion tracking code must be put AFTER the Pixel code.

The conversion code is triggered by the command MTP.track(), which accepts two parameters:

  • the first one is the type of action (eg: "purchase", "download", etc). You can choose whatever you want here. In our example, we are tracking a purchase so the action is "Purchase".
  • the second parameter is an object with additional data about the conversion. Let's look at all the possible additional data:
    • points. How many points the referrer will earn for this conversion.
    • value. The monetary value of the transaction. (in our example the conversion is worth $50)
    • currency. The currency of the transaction in ISOCODE (eg: USD, EUR, GBP)
    • source. Marketing channel responsible for this conversion. Useful to understand which marketing channel is driving most conversions
    • product_id. A string that identifies the product/service in this conversion. For example "Pro plan", "iPhone 7", etc.
    • transaction_id. A unique string that identifies the transaction of this conversion. This can be used to identify transactions later when exporting all conversions.
    • first_name. First name of the person who has converted
    • last_name. Last name of the person who has converted 
    • email. Email address of the person who has converted

NOTE: ALL these additional data are optional.

Wrapping up

To track referral conversions on your website using Maître Tracking Pixel you need to:

  1. Paste the Pixel code in between the <head> and </head> tags of your web page. You may already have other existing code between the head tags, so just place the pixel code underneath that, but above </head>.
  2. Paste the Conversion tracking code in the "conversion" or "thank you" page of your website, making sure that the Pixel base code is present on that page and is loaded BEFORE the Conversion tracking code.

An example of what this implementation on your Thank-you page would look like is the following:

<script>!function(m,t,u){window.MTP=t,t.config={base_url:u,loaded:false,tp_uuid:'TP123456',l_uuid:'MF123456'};t.readyQueue=[];t.ready=function(e){t.readyQueue.push(e);};var r=m.getElementsByTagName("script")[0],c=m.createElement("script");c.type="text/javascript",c.async=!0,c.src=u+"/trackingpixel.js",r.parentNode.insertBefore(c,r)}(document,window.MTP||{},"https://maitreapp.co");

MTP.ready(function() {
  MTP.track('Purchase', { 
    points: 10,
    value: 50,
    currency: "USD",
    source: "Twitter",
    product_id: "Pro plan",
    transaction_id: "tr_123456789" 
    first_name: "Manuel", 
    last_name: "Frigerio", 
    email: "manuel@maitreapp.co"
  });
});
</script>

Webhooks

If you have added webhooks endpoints in the Webhooks tab, a webhook notification will be sent every time a conversion is triggered.

The JSON payload of the webhook notification will look like this:

{
  response: "tracking_pixel_conversion",
  list_uuid: "LIST_UUID",
  referrer_id: "sub_123ABC", // Referrer's id
  data: {
    points: 10,
    source: "mailchimp", 
    currency: "usd", 
    value: 50, 
    category: "purchase", 
    transaction_id: "tx_123456789", 
    product_id: "pro_plan", 
    first_name: "John", 
    last_name: "Doe", 
    email: "john.doe@gmail.com"
  },
  conversion_at: 1499441493 // Timestamp of the conversion
 }

FAQ

I can't place scripts between the </head> tags
While we recommend placing the pixel base code and conversion code between the </head> tags on pages of your website, both will still work outside (ex: inside the </body> tags). Keep in mind the pixel base code must fire before the conversion code.

Can I install multiples tracking pixels on the same page?
Unfortunately, it is not possible at the moment.

Still need help? Contact Us Contact Us