# Track multi-step conversion events

ReferralHero supports tracking multi-step conversion events, enabling you to reward referrers who guide others through various stages of a conversion process. This feature is ideal for campaigns where you want to track actions such as signing up and purchasing, booking a call and making a purchase, or creating an account and subscribing.

{% hint style="info" %}
**Important:**\
To utilize multi-step conversion tracking, ensure your campaign is set up to track multiple conversion events. You can configure this by going to your campaign dashboard, selecting **Edit campaign > Goal**, and opting for "Track two or three conversion events.
{% endhint %}

**Example Scenario:**

**Use Case:**\
Imagine a company that offers a high-end fitness program. They want to reward users who refer others to complete two specific actions: scheduling a free trial session and then signing up for a paid membership.

1. **Initial Action:** The referred individual schedules a free trial session.
   * The referral's status is marked as ‘Pending,’ which is tracked when adding the subscriber.
2. **Completion of Membership Signup:** The referred person subsequently signs up for a paid membership.
   * The referral’s status is updated to ‘Unconfirmed’ or ‘Confirmed,’ depending on your campaign’s configuration. This status change is tracked based on the provided steps.

By implementing multi-step conversion tracking with ReferralHero, you can accurately monitor and reward referrers based on the detailed stages of the referral process.

## Track Referral Conversion Event Only

To track a conversion event, use the following function:

```javascript
RH.trackReferral(uniqueIdentifier);
```

Here, `uniqueIdentifier` refers to the unique identifier of the person who has converted (e.g., email, phone number, crypto wallet address). This value is required to accurately track the conversion.

{% hint style="info" %}
When tracking a referral conversion using `RH.trackReferral(uniqueIdentifier)`, the following logic is applied:

* **If the referral already exists in the campaign as Pending:**\
  The system will automatically recognize and update the status of the referral.
* **If the referral is cookied (recognized through cookies):**\
  A new referral is automatically created in the appropriate campaign.
* **If it is not a referral:**\
  The system will do nothing, and no action will be taken.\


**The status of the referral will then be set as follows:**

* **Confirmed** (If your campaign tracks two conversion events)
* **Unconfirmed** (If your campaign tracks three conversion events)
{% endhint %}



**Example: Tracking a Paid Plan Upgrade**

Suppose you want to track a referral when a user upgrades to a paid plan. You can trigger the `RH.trackReferral()` function at the point of purchase, as shown below:

```javascript
<script>
  var purchase = function(uniqueIdentifier) { 
    if (RH) {
      RH.trackReferral(uniqueIdentifier);
    }
  }
</script>
```

In this example, you should replace `uniqueIdentifier` with the actual unique identifier of the user (e.g., their email).



**Alternative: Tracking on Page Load**

If you prefer to trigger the referral tracking when a user visits a specific page (e.g., a "Thank You" page after conversion), it's recommended to place the `RH.trackReferral()` call inside the `ready()` callback to ensure the ReferralHero object is fully loaded:

```javascript
<script type="text/javascript">
  window.RHConfig = {
     callbacks: {
       ready: function() {
           RH.trackReferral(uniqueIdentifier);
       }
    }
 }
</script>
```

&#x20;  **Implementation Example:-**

{% tabs %}
{% tab title="Javascript" %}
```javascript
  <script type="text/javascript">
    window.RHConfig = {
      callbacks: {
        ready: function() {
          var form = document.getElementById('form');
            form.addEventListener("submit", function(e){

              var data = {
                email: form.querySelector('#email').value,
                name: form.querySelector('#name').value
              };

              RH.trackReferral(data.email, data);
            });
          }
        }
      };
```
{% endtab %}

{% tab title="Web Form" %}
```erb
<form id="form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>
```
{% endtab %}

{% tab title="Developer console" %}
<figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2Funt16SHbBJt8nrYJXYyw%2FScreenshot%202024-08-27%20at%207.06.02%E2%80%AFPM.png?alt=media&#x26;token=54ea9741-0b3a-49e7-b8ae-2e4fef184ff2" alt=""><figcaption><p>Output</p></figcaption></figure>
{% endtab %}
{% endtabs %}

> **Important :**
>
> * **Unique Identifier:**\
>   `uniqueIdentifier` is a placeholder in these examples. You must replace it with the actual unique identifier of the user, such as their email, phone number, or other ID.
> * **ReferralHero Tracking Code:**\
>   Ensure that the ReferralHero Tracking Code is installed on the page where you trigger the referral. The `RH.trackReferral()` function should be called before the ReferralHero Tracking Code is executed to ensure proper functionality.

## Track Referral Conversion Event ( or Add an Organic Subscriber )

To track referrals or add organic subscribers to your ReferralHero campaign on the conversion page, you can use this function. This function helps ensure that both referred and non-referred users are correctly tracked and recorded in your campaign.

```javascript
RH_MFxxxxxxxxxx.organicTrackReferral(uniqueIdentifier);
```

{% hint style="info" %}
When tracking a referral conversion using `RH_MFxxxxxxxxx.organicTrackReferral(uniqueIdentifier)`, the following logic is applied:

* **If the referral already exists in the campaign as Pending:**\
  The system will automatically recognize and update the status of the referral.
* **If the referral is cookied (recognized through cookies):**\
  A new referral is automatically created in the appropriate campaign.
*   **If it is not a referral:**\
    If not a referral, an organic subscriber is created in the campaign UUID specified.



**The status of the referral will then be set as follows:**

* **Confirmed** (If your campaign tracks two conversion events)
* **Unconfirmed** (If your campaign tracks three conversion events)
{% endhint %}

**Example:**

Here is how you might implement the script on a conversion page:

{% tabs %}
{% tab title="Javascript" %}
```javascript
<script type="text/javascript">
  window.RHConfig = {
    callbacks: {
      ready: function() {
        var form = document.getElementById('organic-referral-form');
          form.addEventListener("submit", function(e){

            var data = {
              email: form.querySelector('#email').value,
              name: form.querySelector('#name').value,
              phone_number: form.querySelector('#phone').value,
            };

            if (RH_MFxxxxxxxxx) {
              RH_MFxxxxxxxxxx.organicTrackReferral(data);
            }
        });
      }
    }
  };
</script>
```
{% endtab %}

{% tab title="Web Form" %}
```javascript
<form id="organic-referral-form">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone" required>

    <button type="submit">Submit</button>
</form>
```
{% endtab %}

{% tab title="Developer Console" %}
<figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2FK0LyAtgVaB1PCzZj1U0I%2FScreenshot%202024-08-27%20at%207.12.09%E2%80%AFPM.png?alt=media&#x26;token=dd5ba64f-0606-42f1-be7b-ccf69c9eb0b3" alt=""><figcaption><p>Output</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="danger" %}
**Important:** Replace `'MFxxxxxxxxxx'` with your actual campaign UUID. This UUID is essential to correctly track and manage referrals and organic subscribers in the correct campaign.
{% endhint %}

**Example Scenario:**

* **Referred User:**\
  A user referred by someone else signs up on your lead magnet page and is marked as a Pending Referral. Later, this user completes a purchase. The `RH_MFxxxxxxxxxx.organicTrackReferral()` function confirms the referral by changing the Referral Status from Pending to Confirmed or Unconfirmed based on conversion events.
* **Organic User:**\
  A non-referred user (an organic customer) completes a purchase. The `RH_MFxxxxxxxxxx.organicTrackReferral()` function adds this customer as an organic subscriber to your campaign, enabling them to start referring others.

## Sending Extra Data With Tracking

In addition to tracking a referral conversion using `RH.trackReferral(uniqueIdentifier)`  you can send extra data about the referral by adding an optional second parameter. This allows you to include details such as the name of the subscriber, the value of the conversion, and more.

**Example:**

Here's how you can send extra data along with the referral tracking:

{% tabs %}
{% tab title="Javascript" %}
```javascript
<script type="text/javascript">
  window.RHConfig = {
    callbacks: {
        ready: function() {
          document.getElementById('conversionForm').addEventListener('submit', function(e) {

          var email = form.querySelector('#email').value;
          var data = {
            name: form.querySelector('#name').value,
            value: form.querySelector('#value').value,
            transaction_id: form.querySelector('#transaction_id').value,
            category: form.querySelector('#category').value
          };

            RH.trackReferral(email, data);
        });
      }
    }
  };
</script>
```
{% endtab %}

{% tab title="Web Form" %}
```erb
<h2>Referral Conversion Form</h2>

<form id="conversionForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br>

  <label for="email">Email (Unique Identifier):</label>
  <input type="email" id="email" name="email" required><br>

  <label for="value">Value:</label>
  <input type="number" id="value" name="value" required><br>

  <label for="transaction_id">Transaction ID:</label>
  <input type="text" id="transaction_id" name="transaction_id" required><br>

  <label for="category">Category:</label>
  <input type="text" id="category" name="category" required><br>

  <button type="submit">Submit</button>
</form>
```
{% endtab %}

{% tab title="Developer Console" %}
If referral is sucessfully tracked :-

<figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2FmXtlDjsqjoop6yprIQT8%2FScreenshot%202024-08-27%20at%205.54.11%E2%80%AFPM.png?alt=media&#x26;token=9387e4b5-62f3-496e-8f68-7babcf6f836d" alt=""><figcaption><p>Output</p></figcaption></figure>
{% endtab %}

{% tab title="ReferralHero Dashboard" %}
<figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2Fg2NYGImxvfuFC3VHNGkE%2FScreenshot%202024-08-27%20at%205.56.07%E2%80%AFPM.png?alt=media&#x26;token=70d07ce0-5c73-4089-9b00-a873fcb77301" alt=""><figcaption><p>The data is sucessfully added &#x26; referral is tracked.</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="danger" %}
Here’s a breakdown of the optional extra data parameters you can send:

* **`name`:**\
  The subscriber's name. This helps personalize records and communication with the user.
* **`value`:**\
  The monetary value of the referral. For instance, if the referral is worth $100, you should provide the value as 100. This parameter is useful for financial reporting and analysis.
* **`transaction_id`:**\
  A unique identifier for the transaction. This is important for linking the referral to a specific purchase or event, which facilitates detailed tracking and reporting.
* **`category`:**\
  The type of referral. This helps categorize the referral, which is beneficial if you are tracking conversions across different products or stages. It also aids in generating detailed reports.
{% endhint %}

By including this extra data, you can gain deeper insights into your referral campaigns, making it easier to analyze performance and optimize your strategies.

## Tracking Referrals Without Emails

ReferralHero typically requires a unique identifier to track referrals. However, if you don’t have the actual email address or identifier of the referral, you can use a randomly generated identifier. The important thing is to ensure that the identifier is unique to avoid conflicts.

Here’s how you can generate a unique identifier and use it for tracking:

**Example Code**

You can create a random unique identifier, such as a fake email address, and use it for tracking. Here’s a sample code snippet to demonstrate this:

```javascript
<script>
  function trackReferralWithRandomEmail() {
    // Generate a unique random email address
    var random_email = Math.random().toString(36).substring(2) + "@email.com";
    // Track the referral using the generated email
    if (RH) {
      RH.trackReferral(random_email);
    }
  }
</script>
```

> **Note:**
>
> While this method allows you to track referrals without having the actual email address or identifier, ensure that the random identifier you generate is unique each time. This approach is useful for situations where you don’t need to track the specific identity of the referral but still want to capture referral actions.

## Callback

Optionally, you can execute a function after the referral has been tracked by adding a callback function as an argument to the `RH.trackReferral()` function. Here's how you can do it:

**Example with Extra Data**

If you need to send additional data, use the callback function as the third parameter:

```markup
<script>
  var getReferralLink = function(data) {
    // Your custom logic
  };
  
  RH.trackReferral(uniqueIdentifier, data, getReferralLink);
</script>
```

**Example without Extra Data**

If you don't need to send any extra data, you can pass the callback function as the second parameter:

```markup
<script>
  var getReferralLink = function(data) {
    // Your custom logic
  };
  
  RH.trackReferral(uniqueIdentifier, getReferralLink);
</script>
```
