How does the Tracking Pixel work?

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

Maître Tracking Pixel is used 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.

In order to understand how the Maître Tracking Pixel works let's walk through it 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. Mark is the responsible for the conversion

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

  • Pixel base code
  • Conversion code

Pixel base code

The pixel base 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 referral link, a cookie is attached to that person's browser. 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 base code:

  1. Go to the "Tracking Pixel" tab in your campaign dashboard
  2. Make sure you have created a tracking pixel
  3. Click "Get code" to see your tracking pixel code

  4. Copy the pixel base code and paste it between the <head> tags on each web page, or in your website template to install it on your entire website

NOTE: the pixel base code is only the first part:

<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");</script>

The other bit (the conversion code) it's there to provide an example.

Conversion code

Conversions are actions that happen on your website, for example a purchase or a download. The conversion code lets you track those actions and leverage them to reward your ambassadors.

The conversion 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.

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 of 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. 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.
If you don't provide the points, currency and value Maître will use the ones set by default when creating the tracking pixel.
Also, all data provided here will override the default ones in your dashboard.

Wrapping up

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

  1. Paste the pixel base code 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 code in the "conversion" or "thank you" page of your website within the pixel base code, above the </script> tag. You'll need to do this for every page you want to track.

TIP: We recommend that you put the pixel base code in the header tags of the website HTML to ensure that the it's able to track across your entire site.

An example of what this implementation on your conversion 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"
  });
}); // Only on conversion page
</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: between 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?
Right now this is not possible unfortunately.

Still need help? Contact Us Contact Us