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
data
objectYou 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
createSignup
functionWhen 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 provided below is sample code and must be customized for your individual form and use case. Your implementation of PartnerStackJS may vary significantly depending on your front-end stack, and we are not able to write custom code for your implementation.
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.
Updated 10 months ago
After you've fully completed this step, it's time to start testing out your integration!