SaaSquatch Help Center

Quickstart guide for leveraging Google Tag Manager (GTM) to integrate your referral program into your website.

This guide outlines the basic steps needed to leverage your existing GTM to run your referral program on your website.

Additional information about our drag-and-drop installation solution can be found in our Referral Program Install Guide for Marketers.

🔗 Creating SaaSquatch GTM Tag

🔗 1. Select a Workspace

Select the GTM workspace you plan to add your referral program to. If you are already using GTM you can continue using your current workspace.

For this example we will be adding the referral program tag to the Default Workspace.

🔗 2. Create a New Tag


🔗 3. Select Tag Type

Select the tag type "Custom HTML". This will allow you to include the Referral SaaSquatch squatch.js JavaScript code from the Install Guide for Marketers.

gtm tag type

🔗 4. Include the squatch.js Code

Make sure to fill in your test tenant alias when you paste the following Tracking Script code snippet onto your the webpage:

<script>!function(a,b){a("squatch","",b)}(function(a,b,c){var d,e,f;c["_"+a]={},c[a]={},c[a].ready=function(b){c["_" + a].ready =  c["_" + a].ready || [];c["_" + a].ready.push(b);},e=document.createElement("script"),e.async=1,e.src=b,f=document.getElementsByTagName("script")[0],f.parentNode.insertBefore(e,f)},this);squatch.ready(function(){squatch.init({tenantAlias:"YOUR_TENANT_ALIAS_HERE"});squatch.widgets().createCookieUser({});});</script>

The tenant alias can be found on the install page in the Referral SaaSquatch portal:

MORP portal tenant alias highlighted

Once you have filled in your tenant alias and pasted the code into the Tag's textbox it should look like this: GTM tag code snippet

🔗 5. Add Trigger

Where you display the referral widget to Referrers and Referred Users is configured on the Setting page in the Referral SaaSquatch Portal. Setting this up can be determined under 3. Configure your URLs and Referral Widget type.

As the URL Rules in the portal will control where the widget is displayed there is no harm in running the squatch.js code snippet on as many pages as you like. This means that unless you explicitly do not want to run squatch.js as a tracking script on a specific page you can choose All Pages as the Trigger for the squatch.js Tag.

GTM tag trigger

🔗 6. Add GTM code to pages.

Your existing use of GTM could mean you have already included the GTM code on the confirmation page.

You can feel free to drop the GTM code on as many pages as you would like as the URL Rules in the portal will control where the widget is displayed.

GTM recommends placing the required code snippet as high up in the <head> as possible, or immediately after the opening <body> on a page.

The GTM code snippet can be found by clicking on your Google Tag Manager Container ID (e.g. GTM-ANCB3H) from the right side of the top bar in GTM.

🔗 Location of Google Tag Manager Code Snippet

GTM code location

🔗 Example Google Tag Manager Code Snippet

GTM code example

🔗 Program Configuration

Before launching your referral program you will need to configure where to display the widget and when to trigger converting completing a referral. This configuration can be done in the SaaSquatch Portal.

A complete walkthrough of this process can be found in our Integration Configuration Article.

🔗 What's next?

Congratulations on setting up your Referral Program! Although this is super exciting, this is also just the beginning of growing your userbase and revenue. We recommend diving deeper into the world of Referral Programs and our platform by reading these documents:

  • Find about more about the amazing configuration options available in the Portal in our Using Referral SaaSquatch article.
  • Learn more about how to protect your referral program against unwanted referral activity by reading up about our Security Management System.
  • Our SaaS guide provide details about how to take your referral program to the next level and integrate it with your product.