How To Use Javascript With Google Tag Manager To Qualify Referrals

You can automatically qualify your referrals from your referral program by installing Javascript using Google Tag Manager.

Important: In order to use the JavaScript snippet to qualify referrals, you MUST redirect referred users (or the person being invited) to your website or platform where they can complete an action that you consider to be a successful conversion – for example (completing a sign-up, creating an account, making a purchase, etc). You can do this on Step 2 for the person invited inside your campaign builder.

 

Setting up Your JavaScript Snippet

Once you have set up your redirect – you need to go to your Integrations tab in your campaign builder and select the Javascript option.

 

Screenshot showing the Setting up Your JavaScript Snippet for your referral program software

 

How To Store The Referred Users {Code}, And Pass It Back To Referral Factory When The User Qualifies (Or Converts)

You need to keep a copy of the users' {code} on your website: this can be done by storing it in your database, along with the referred users’ details – this method is often used when a referred user has to complete a set of actions in order to qualify, not just one.

However, when using Google Tag Manager, we suggest you use javascript localStorage.

When our system redirects a referred user to your website or platform, we also send that user’s unique code through as a GET parameter.

You will need to store the users’ code so that you can pass it back to Referral Factory when they convert. You can use localStorage to store the code and then call it again from localStorage when a user arrives at your “Thank You” or “Success” page. Below we’ll show you how to use localStorage to store the referred users' code.

Note: the following code snippet should be added to a tag on GTM that is accessible to your entire website to ensure that if a user lands on any other page, the code does not drop off:

<script type="text/javascript">
var params = (new URL(document.location)).searchParams;
if(params.has('code')){
localStorage.setItem('rf_code', params.get('code'));
}
</script>

 

Follow these steps to set up the Tag in GTM to store the users' code:

  • In GTM - click on the Tag tab on the left-hand side.
  • Then click "New" to create a new tag.
  • Name your tag something that is easy to identify.
  • Select Custom HTML as your tag configuration.
  • Paste the script above inside the tag.
  • Choose a Trigger that will fire this script.
  • Select the "All Pages" trigger to make sure this script will be viewed on all pages of your website. 
  • Click Save.

 

Qualification on “Thank You’ or “Success” page

Once the user has qualified, you can use the script below to qualify each referral that successfully converts (on your own website or platform).

Insert the following script in a tag on GTM that is only accessible on your ‘Thank You’ or ‘Success’ page, and it will notify us when a referred user has successfully converted – this user will then be marked as ‘qualified’ on the Referral Factory system.

<script type="text/javascript" src="https://js.referral-factory.com/assets/js/qualification.js"></script>
<script type="text/javascript">
if (window.RF) {
var code = localStorage.getItem('rf_code');
if(code !== 'null'){
window.RF.qualify({
code: code
});
localStorage.removeItem('rf_code'); // Removes the code from localStorage
}
}
</script>

 

Follow the steps below to set up the Tag in GTM to qualify the referral once a user converts:

  • In GTM - click on the Tag tab on the left-hand side.
  • Then click "New" to create a new tag.
  • Name your tag something that is easy to identify.
  • Select Custom HTML as your tag configuration.
  • Paste the script above inside the tag.
  • Choose a Trigger that will fire this script only once a user converts. You may have to click on the plus icon on the top right to select a new trigger. 
  • In this example, we have selected a Page View trigger to only fire on a page that our customers see AFTER they have converted. 
  • Click Save.

We hope this guide is helpful!