> For the complete documentation index, see [llms.txt](https://referral-rocket.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://referral-rocket.gitbook.io/docs/getting-started/campaigns/installing-tracking-your-referral-campaign/referral-tracking/track-referral-on-sign-up-page.md).

# 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. 

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

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

<pre><code><strong>window.onload = function() { 
</strong><strong> //REPLACE WITH YOUR FORM ID
</strong><strong>  const form = document.getElementById("signupForm");
</strong><strong>  
</strong><strong>  form.onsubmit = function(event) { 
</strong><strong>    event.preventDefault(); 
</strong><strong>    
</strong><strong>    // Collect user information | REPLACE WITH YOUR FIELD ID
</strong>    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);
    }
  }; 
};
</code></pre>

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).&#x20;

### (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.');
    }
  });
});
```

2. 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>
```

3. 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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://referral-rocket.gitbook.io/docs/getting-started/campaigns/installing-tracking-your-referral-campaign/referral-tracking/track-referral-on-sign-up-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.