Step 2: Track Signup Events

In this guide, we'll show you how to use PartnerStackJS to record customer signups in PartnerStack whenever users sign up for your product on your website from a referral link! We'll walk through how it works and how to use the included createSignup() function.

📘
What you'll need to begin

Step 1 of the PartnerStackJS setup already completed and working

An understanding of how users sign up for your product or service (whether this is on a demo form, signup page or otherwise), and how customer data is represented in your front-end

Access to your website's front end code to add in calls to PartnerStackJS functions

How it works

When you send customer signup events to PartnerStack, the following 3 pieces of information are required:

Name: The customer's name
Email: The customer's email
Customer Key: This is a customer's unique identifier on your platform. In some cases this is their email - in others it can be an account ID or some other identifier!

When you install the PartnerStackJS header code to your website, the growsumo object becomes available on that page. There are two main components to this object we'll be working with:

The `data` object

You set values in the growsumo.data object to represent the customer's information. The following 3 properties must be set to create a customer record in PartnerStack:

Data Property	What it's used for
`growsumo.data.name`	The customer's name
`growsumo.data.email`	The customer's email
`growsumo.data.customer_key`	The customer's identifier (described above)

The `createSignup` function

When this growsumo.createSignup() is called, the information in the data object is used to create the customer record in PartnerStack. This function optionally accepts a callback function as an argument to do other things once the signup call to PartnerStack completes.

Because of the work done in Step 1 of this guide, the SDK will send information about the partner who referred the customer. Only customers who were referred by partner via their referral link will be captured in PartnerStack.

Tracking Customer Signups

To track customer sign-up events successfully, you must:

Populate all the necessary customer information (described above) in the growsumo.data object
Call the growsumo.createSignup() function to send signup information to us

We recommend encapsulating both steps in a single JavaScript function that can be executed in response to some event in your front-end. For example, let's say I run a pear delivery service and my sign-up page looks something like this (note: it already has PartnerStackJS cookie creation implemented from Step 1!)

<html>
  <head>
    <title>A-Pear-antly Great Delivery</title>
    <link href="style.css" rel="stylesheet" />
    <!--PartnerStackJS Code-->
      <script type='text/javascript'>(function() {var gs = document.createElement('script');gs.src = 'https://js.partnerstack.com/v1/';gs.type = 'text/javascript';gs.async = 'true';gs.onload = gs.onreadystatechange = function() {var rs = this.readyState;if (rs && rs != 'complete' && rs != 'loaded') return;try {growsumo._initialize('pk_public_key');if (typeof(growsumoInit) === 'function') {growsumoInit();}} catch (e) {}};var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(gs, s);})();
    </script>
    
  </head>
  <body>
    
    <form id="sign-up">
      <label for="name">Your name</label>
      <input id="name" type="text" name="name" id="name" />
      <label for="email">Your email:</label>
      <input id="email" type="email" name="email" id="email" />
      <label for="password">Password:</label>
      <input id="password" type="password" name="password" required>
    
      <input type="submit" id="submit-btn" value="Submit" />
    </form>
  </body>
</html>

The name and email fields are accessible at the name and email elements respectively. Based on the structure above, we'd want to write a signup function that adds that information to PartnerStack like this:

🚧
Heads up!
The code below is meant only as an example. Your implementation of PartnerStackJS may vary significantly depending on your front-end stack!

function partnerStackSignUp() {
  // 1. Populate the growsumo.data object
  growsumo.data.name = document.getElementById('name').value;
  growsumo.data.email = document.getElementById('email').value;
  // In this case, email is how I uniquely identify my customers
  growsumo.data.customer_key = document.getElementById('email').value;
  
  // Register the signup with PartnerStack
  growsumo.createSignup();
}

Once the code has been added for that function, we'd register an event handler (or hook into an existing one) to call that function once the signup completes. In this example case, let's say we want to listen for the form submitted event:

document.getElementById('sign-up').addEventListener('submit', function(e){
  partnerStackSignUp();
});

🎉 Let's test your implementation!

Once all the signup code is written and deployed, it's time to test! Keep going to learn how to test your implementation.

Step 2: Track Signup Events

📘
What you'll need to begin

How it works

The `data` object

The `createSignup` function

Tracking Customer Signups

🚧
Heads up!

🎉 Let's test your implementation!

📘What you'll need to begin

How it works

The data object

The createSignup function

Tracking Customer Signups

🚧Heads up!

🎉 Let's test your implementation!

📘
What you'll need to begin

The `data` object

The `createSignup` function

🚧
Heads up!