How to use the Tracking Pixel

ReferralHero Tracking Pixel allows you to track conversions on your website so that you can reward people who refer friends who complete a specific action (eg: a purchase, a download, etc).

With ReferralHero Tracking Pixel you can create very sophisticated Ambassador programs like:

  • give 50% discount to a person who refers 3 friends who sign up to the PRO plan
  • give a free ticket to a person who refers 5 friends who purchase the ticket
  • give a free month to a person every time 3 of their friends schedule a demo

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

Step-by-step example

In order to understand how the ReferralHero Tracking Pixel works let's walk through an example step-by-step

Let's imagine we want to reward our users with a free account when they refer 3 friends who download our app.
On our website, our funnel is made of 3 pages:

  • the first page is where people enter their personal details
  • the second page is where people download the app
  • the third page ("thank you" page) is where people are redirected to after they download the app. This page can only be seen by people who download the app.

Here's how our referral program works:

  1. Mark (one of our existing users) joins our referral program* 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 our website.
  4. Upon landing on our website, the ReferralHero Tracking Code makes sure Sara's session is recorded. No private information is exchanged.
    We only know that Sara has been referred  by Mark.
  5. Sara goes through the 3-step process and downloads the app. She's then redirected to the "thank you" page. On the "thank you" page, we track the conversion using the ReferralHero Conversion tracking code. The conversion is attributed to Mark.
  6. When 3 people referred by Mark download the app, Mark gets a free account.

* There are several ways in which Mark can join your referral program: the easiest way is to use one of our widgets and let Mark manually sign up; alternatively you can import ReferralHero's email into our system or you can use our identify() feature to create a seamless and frictionless user experience. 

How to track conversions

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 conversions easily and also allows you to send extra data, such as the conversion's monetary value.

The Conversion tracking code looks like this:

rht("track", "download", {
  email: "john@smith.com",
  first_name: "John",
  last_name: "Smith",
  currency: "USD",
  amount: 15.7,
  transaction_id: "TRX_123"
});

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

IMPORTANT: if you decide to paste the Conversion tracking code on the page, it must be placed AFTER the ReferralHero Trac king Code.

The conversion tracking code is triggered by calling the function rht("track", "{event-name}", {event-data}) which accepts three parameters:

  • the first parameter is always "track" (lowercase).
  • the second parameter is the name of the event (eg: "purchase", "signup", etc). The event name is provided to you in the Installation page
  • the third  parameter is an object that contains additional data about the conversion. Here's the extra data you can send:
    • email
      Email address of the person who has converted
    • first_name
      First name of the person who has converted
    • last_name
      Last name of the person who has converted
    • currency
      The currency of the transaction in ISOCODE (eg: USD, EUR, GBP)
    • amount
      The monetary value of the transaction. (in our example the conversion is worth $15.7)
    • transaction_id
      A string that identifies the transaction of this conversion. This can be used to identify transactions later when exporting all conversions.

NOTE: ALL these extra data are optional. However, we highly recommend you to send the email address at the very least. The reason being: if you provide an email address we can be sure that the conversion is tracked only once. In that sense, the email works as the unique identifier.

Webhooks

You can receive webhook notifications every time a conversion is tracked.
To do so, add a webhook to your campaign and enable the "Event tracked" option.

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

{
  response: "event_conversion",
  list_uuid: "LIST_UUID",
  event_name: "download",
  event_data: {
    id: "event_123ABC",
    currency: "USD", 
    amount: 15.7, 
    transaction_id: "TRX_123",
    source: "twitter",
    first_name: "John", 
    last_name: "Smith", 
    email: "john@smith.com",
    created_at: 1499441493 // Timestamp of the conversion (UTC time)
  },
  referrer: {
    subscriber_id: "sub_ABC999",
    name: "Mark James",
    email: "mark.james@gmail.com",
    extra_field: "USA",
    extra_field_2: null,
    code: "ABC-123",
    referral_link: "https://mywebsite.com?mwr=ABC-123",
    people_referred: 12, // Total number of conversions
  }
 }

Wrapping up

To track referral conversions on your website using the ReferralHero Tracking Pixel you need to:

  1. Paste the ReferralHero Tracking code to the <head> tag of your website.
  2. Paste the Conversion tracking code in the "thank you" page of your website (the page people visit after they have converted), making sure that the ReferralHero Tracking 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:

<html>
  <head>

   <!-- ReferralHero tracking code -->
   <script>!function(m,a,i,t,r,e){if(m.RH)return;r=m.RH={},r.uuid=t,r.loaded=0,r.base_url=i,r.queue=[],m.rht=function(){r.queue.push(arguments)};e=a.getElementsByTagName('script')[0],c=a.createElement('script');c.async=!0,c.src=i+'/widget/'+t+'.js',e.parentNode.insertBefore(c,e)}(window,document,'https://app.referralhero.com','MFe04ce5d062');</script>

   <!-- ReferralHero track() -->
   <script type="text/javascript">
     rht("track", "download", {
       email: "john@smith.com",
       first_name: "John",
       last_name: "Smith",
       currency: "USD",
       amount: 15.7,
       transaction_id: "TRX_123"
     });
   </script>

  </head>

</html>

Still need help? Contact Us Contact Us