Track referral on Sign Up page

Capturing and tracking referrals requires integrating Referral Rocket's tracking system into your website or application. This guide walks you through the complete implementation process.

Step-by-Step Referral Tracking Implementation

Step 1: Add the following script in the Head tag (replace with your campaign id) on this page.

// Add this script in the HEAD tag
<script type="text/javascript" campaign-id="YOUR-CAMPAIGN-ID" defer src="https://app.referralrocket.io/widget/widgetIndex.js"></script>

Step 2: To capture referrals on your sign up page, you need to listen to form submission and send the information back to Referral Rocket. For this we have created a sample javascript that you can tweak and use. Note: Replace the form Id and field Id as per your page

window.onload = function() { 
 //REPLACE WITH YOUR FORM ID
  const form = document.getElementById("signupForm");
  
  form.onsubmit = function(event) { 
    event.preventDefault(); 
    
    // Collect user information | REPLACE WITH YOUR FIELD ID
    const userData = {
      email: document.querySelector("input[name='email']").value,
      firstName: document.querySelector("input[name='firstName']").value,
      lastName: document.querySelector("input[name='lastName']").value
    }; 

    // Send participant data to Referral Rocket
    if (window.Rocket) {
      window.Rocket.getCampaign().addParticipant(userData);
    }
  }; 
};

This script listens when the signup form is submitted and sends the new user to Referral Rocket SDK. The SDK automatically captures referrals if the referral code exists in the URL or in the cookie (60day retention).

(Alternative Method): Automatically add hidden referral field to your form

If you prefer to capture the referral code as part of your form submission without using JavaScript event listeners, you can use this alternative approach that automatically adds a hidden field with the referral value from the cookie.

1. Add the following script after the Referral Rocket base script:

// Add this script after the Referral Rocket base script in your HEAD tag
document.addEventListener('DOMContentLoaded', function() {
  // Find all forms with data-referralrocket attribute
  const forms = document.querySelectorAll('form[data-referralrocket="true"]');
  
  // Process each form
  forms.forEach(function(form) {
    // Check if we have the Rocket object available
    if (window.Rocket) {
      const campaign = window.Rocket.getCampaign();
      
      // Get the referral code from Rocket SDK
      const referralCode = campaign.getReferralCode();
      
      // Only update the hidden field if a referral code exists
      if (referralCode) {
        // Get the referral input field
        const referralField = form.querySelector('input[name="referral"]');
        
        if (referralField) {
          // Update the existing referral field
          referralField.value = referralCode;
          console.log('Referral Rocket: Updated referral field with code', referralCode);
        } else {
          console.warn('Referral Rocket: No referral field found in the form. Add a hidden input with name="referral"');
        }
      }
    } else {
      console.error('Referral Rocket: SDK not loaded. Make sure the Referral Rocket script is properly included.');
    }
  });
});

1. Add the data-referralrocket="true" attribute to any form that should capture referrals:

<form action="/signup" method="post" data-referralrocket="true">
  <input type="text" name="firstName" placeholder="First Name">
  <input type="text" name="lastName" placeholder="Last Name">
  <input type="email" name="email" placeholder="Email">
  <input type="hidden" name="referral" value="">
  <button type="submit">Sign Up</button>
</form>

1. On your server, handle the form submission as normal. The referral field will be included in the form data when a referral code is present, allowing you to:

   • Store the referral data in your database

   • Pass the referral information to Referral Rocket when qualifying the participant