Web - Google Tag Manager

📷

UserLeap is now Sprig

We might have changed our name, but you don't have to change a thing!
All of your surveys, integrations, and code will continue to function properly with no action required.

Google Tag Manager (GTM ) is a free tool that allows you to manage and deploy marketing tags (snippets of code or tracking pixels) on your website (or mobile app) without having to modify the code. GTM requires little to no coding and is deployed in minutes. Once installed, you can use GTM to send events and attributes to Sprig. Installing with GTM will allow you to:

  • Identify users that are completing an action.
  • Create events for the actions your users are taking.
  • Filter to a specific audience based on user attributes.

Is GTM Already Deployed?

If you don't have the Chrome Tag Assistant extension installed, you can check if GTM is installed by invoking the inspect option in your web browser.

  1. To open the Inspect window in Chrome, Firefox and Edge, press Control+Shift+I (or Option+Command+I on Chrome and Safari for Mac).
  2. Make sure you are on the Elements tab (or Inspector tab in Firefox), then press Control+F (or Command+F for Mac) to open the search field. Firefox displays the search field by default.
  3. Search for the string GTM. If GTM is already deployed, you should get results similar to the following:
    <script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXXX-X"></script>. The container id XXXXXX-X is specific to your deployment.

Installing Sprig with GTM

Once GTM is installed there are two steps are needed to add Sprig to GTM:

  1. Create a Variable set to the Sprig Environment ID.
  2. Create a Sprig Installation Tag that consists of your Environment ID variable and a Trigger to fire the Tag on every page.

Create a Variable with the Environment ID

  1. In the Sprig app, click Connect > JavaScript.
  2. Confirm which Environment you are in. Based on the current Environment, take note of either the Development ID or Production ID.
  3. Copy the Environment ID for use in a later step.
  4. Open the Google Tag Manager app and click Variables.
  5. In User-Defined Variables, click New.
  6. Click Untitled Variable and give the variable an appropriate name, for example SPRIG_ENV_ID.
  7. In Variable Configuration, click Brick or Edit to choose the variable type.
  8. Select Constant as the variable type.
  9. In Value paste the Environment ID from Sprig.
  10. Click Save.

Create a Sprig Installation Tag

GTM ships with the All Pages Trigger by default. The All Pages Trigger will fire any Tag on all pages with GTM installed. You can now create the Sprig Installation Tag, associated with the All Pages Trigger and the Environment ID variable. Sprig supplies its own custom tag template which you use; it can be found in the Google Tag Manager's Community Template Gallery.

  1. In the Google Tag Manager app and click Tags.
  2. Click New.
  3. Click Unitled Tag and give the tag an appropriate name, for example Sprig Install Tag.
  4. In Tag Configuration, click Brick or Edit to choose the Tag Type.
  5. Click Discover more tag types in the Community Template Gallery.
  6. Click Search and type in Sprig.
  7. Click on Sprig Tag and then click on Choose Template
  8. In Environment ID, click plus.
  9. Select the Environment ID variable you created in the last step,in the previous example, SPRIG_ENV_ID.
  10. Make sure Action Type is set to Install.
  11. In Triggering, click Brick or Edit to choose the trigger.
  12. Select All Pages as the trigger.
  13. Click Save.
  14. Click Submit and then Publish to push your changes out to the server.

Confirming Sprig is Installed

  1. As you did before to check for the installation of GTM, open the Inspect window in your browser.
  2. Make sure you are on the Elements tab (or Inspector tab in Firefox), then open the search field.
  3. Search for the string sprig. If Sprig is installed, you should get results similar to the following:
    <script type="text/javascript" async="" src="https://cdn.sprig.com/shim.js?id=XXX-XXXXX"></script>. Where XXX-XXXX is your Environment ID. Sprig has now been successfully installed using GTM.

Using GTM to Trigger a Survey

Each Sprig microsurvey requires a trigger to cause the survey to be displayed in your Website. You can configure GTM to generate triggers that can be used by Sprig. Some common events that could be used to trigger a microsurvey are:

  • Onboarding Complete
  • Visited Web Page
  • Logged In
  • Canceled Subscription

For more information on GTM triggers click here.

There are three main steps in configuring GTM to generate triggers that can be used by Sprig to display a microsurvey:

  1. Create and configure the Trigger as a Variable in GTM.
  2. Create the Sprig Tag, associate the Trigger to the Tag.
  3. Publish your changes to the server.

For an alternative to creating No Code events, you can also perform this directly in the Sprig UI via the No Code option.

The next section describes the workflow of creating an example Trigger.

Example GTM Trigger

In this example, there is a button labeled CONTACT on a web page. A microsurvey designer would like to display a survey when the CONTACT button is clicked. The example will use the GTM built-in variable Click Text - for targeting the button label in the CSS of a page.

  1. In the Google Tag Manager app, click Variables.
  2. In Built-in Variables, click Configure.
  3. Click on the Variables you want to enable. In this example we will use Click Text.
  4. Now click on Triggers to create trigger using the Click Text variable.
  5. Click New.
  6. Click Untitled Trigger and give the trigger an appropriate name, for example, Contact Button Click.
  7. In Trigger Configuration, click Brick or Edit to choose the trigger type.
  8. Select Click - All Elements as the trigger type.
  9. Now click Some Clicks.
  10. In the first item list, make sure Click Text is selected.
  11. In the second item list, make sure contains is selected.
  12. In the text box, type in button lable; in this example, CONTACT.
  13. Click Save.
  1. Now you need to create a Tag; click Tags.
  2. Click New.
  3. Click Untitled Tag and give the tag an appropriate name, for example Click Text - CONTACT.
  4. In Tag Configuration, click Brick or Edit to choose the Tag Type.
  5. Click Discover more tag types in the Community Template Gallery.
  6. Click Search and type in Sprig.
  7. Click on Sprig Tag and then click on Choose Template
  8. In Environment ID, click plus.
  9. Select the Environment ID variable you created, for example, SPRIG_ENV_ID.
  10. Make sure Action Type is set to Event.
  11. In Event Name, click plus.
  12. Type in the event a name that will be shown in Sprig, for example, Clicked on CONTACT.
  13. In Triggering, click Brick or Edit to choose the Trigger.
  14. Select Contact Button Click as the trigger.
  15. Click Save.
  16. Click Submit and then Publish to push your changes out to the server.
  17. Test the trigger by clicking the button and navigating to the Events page in the Sprig app. You may have to click Reload Browser Reload to refresh the Events page contents.

In addition, Google also provides documentation describing methods and tools to diagnose variables, tags, and triggers.

📘

Info

Alternatively, you can also implement the equivalent of this GTM trigger directly in the Sprig app by creating a No Code Event with an Inner Text Trigger Type.

Sending an Example Attribute to Sprig

Sprig allows you to categorize visitors by sending attributes alongside the survey responses. Separating respondents into groups, or cohorts, allows you to improve the sophistication of data analyses you can undertake. You can also decide that only certain groups receive certain surveys.

️ Warning

The only caveat is that your Website or Web App must be able to parse that information to the JavaScript layer. You may have to engage your Web engineering team to find out which attributes are visible to JavaScript and ask them to enable visibility for those attributes that are not.

Example Discrete Attribute.

The first part of the task is to create a custom JavaScript variable that reflects the current day. This is just a made-up example as the survey response date and time are already sent to Sprig. In the real world, you would have attributes that reflected the different response cohorts, for example, what subscription plan a customer had signed up for, or what state or county they were from.

Custom JavaScript Variable for the Current Day.

  1. In the Google Tag Manager app, click Variables.
  2. In User-Defined Variables, click New.
  3. Click Untitled Variable and give the variable an appropriate name, for example, Get Day.
  4. In Variable Configuration, click Brick or Edit to choose the variable type.
  5. Select Custom Java Script as the variable type.
  6. Paste in the folowing JavaScript in the field and click Save.
function(){
  var d = new Date();
  var weekday = new Array(7);
  weekday[0] = "Sunday";
  weekday[1] = "Monday";
  weekday[2] = "Tuesday";
  weekday[3] = "Wednesday";
  weekday[4] = "Thursday";
  weekday[5] = "Friday";
  weekday[6] = "Saturday";
  return weekday[d.getDay()];
}

For more information on clientId and its limitations, take a look here.

Tag to send clientId back to Sprig

  1. In the Google Tag Manager app and click Tags.
  2. Click New.
  3. Click Untitled Tag and give the tag an appropriate name, for example Sprig Get Day Tag.
  4. In Tag Configuration, click Brick or Edit to choose the Tag Type.
  5. Click Discover more tag types in the Community Template Gallery.
  6. Click Search and type in Sprig.
  7. Click on Sprig Tag and then click on Choose Template
  8. In Environment ID, click plus.
  9. Select the Environment ID variable previously created; in the first example we used, SPRIG_ENV_ID.
  10. Make sure Action Type is set to User Attribute; this will allow you to define a custom attribute. However, depending on the JavaScript variable, it may make more sense to select one of the two predefined attributes, User Email or User ID.
  11. In Attribute Key type in the name your attribute; in this case case 'Day'. This will be the name is displayed in Sprig. Don't forget to put single quotes around the attribute key name.
  12. Select the Custom JavaScript variable you created in the last step; in the previous example it was called, Return Client ID.
  13. In Triggering, click Brick or Edit to choose the Trigger.
  14. Select All Pages as the Trigger.
  15. Click Save.
  16. Click Submit and then Publish to push your changes out to the server.

️ Warning

Sometimes the second Sprig Tag may fire before the first tag has finished running. This may cause JavaScript errors which can be viewed in your browser's JavaScript console: Control+Shift+J (or Option+Command+J for Mac). You may have to directly specify the tag firing order for these errors to be resolved.

Whenever a user clicks Finish to return a Microsurvey to Sprig, the current value of any attributes will be associated with the survey response. In the Previous example, clientId will be read as the Custom Attribute SessionID. In the Sprig app, click People, then click on the last Visitor ID. If you look under Profile, you will be able to see the custom attribute that you defined.

Custom AttributesCustom Attributes

Custom Attributes

In addition, if you go to Microsurveys > YOUR_SURVEY_NAME > Responses, then click on Download CSV. In the CSV file that you download there will be one column containing all the custom attributes, similar to the following table (ellipses ... denote omitted sections of the table):

surveyID

...

custom_attributes

...

Q1_Response

...

49650

...

{"'Day'":"Tuesday"}

...

5

...

49650

...

{"'Day'":"Tuesday"}

...

5

...

49650

...

{"'Day'":"Tuesday"}

...

3

...

49650

...

{"'Day'":"Tuesday"}

...

3

...

49650

...

{"'Day'":"Tuesday"}

...

1

...

Sending Data Layer Variables to Sprig

As well as JavaScript variables you can use Google Tag Manager's Data Layer as a source of information to send to Sprig. The Data Layer is a JavaScript array which stores data that you want to process and pass from your website to other applications. For example, you might have a Data Layer which supplies data to your analytics tool about the details of your website visitor, such as login status, user ID, and location.

How to Check Your Current Data Layer

  1. Make sure Google Tag Manager is installed.
  2. Open up the browser JavaScript console use Ctrl + Shift + J (command + Shift + J on Mac).
  3. Enter window.dataLayer. Note: The dataLayer name is case-sensitive, meaning that only dataLayer will work, not for example, datalayer.

The data is store in key-value pairs. The key is a variable name in string format, and values can be any allowed JavaScript type.

Example Data Layer Variable

In this example we have asked our developer to send information about which plan a user purchased when the checkout event occurred. This example just uses static data, however in the real world a developer would generate this information dynamically for each checkout event.

<head>
  <script>
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'event': 'checkout', 
      'planid': 99,
      'costPerMonth': 79,
      'planName': 'Essentials - 20k',
      'userid': 12345
    }); 
  </script>
  <!-- Google Tag Manager -->
   ...
  <!-- End Google Tag Manager -->
</head>

Key

Value

event

checkout

planid

99

costPerMonth

79

planName

Essentials - 20k

userid

12345

After the the customer completes a checkout they are also prompted to complete a Microsurvey. After they have completed the survey we also want to send some of the Data Layer attributes back to Sprig. In the following step-by-step instructions we will just use planid.

Step-By-Step Instructions

Add the previous code example to the <head> of your webpage before the GTM code snippet. Then you need to create a GTM variable that points to the Data Layer variable.

  1. In Google Tag Manager, click Variables.
  2. In User-Defined Variables, click New.
  3. Click Unitled Variable and give the variable an appropriate name, for example, DL-planid.
  4. In Variable Configuration, click Brick or Edit to choose the variable type.
  5. Select Data Layer Variable as the variable type.
  6. In the Data Layer Variable Name field type planid. The Data Layer Variable Name field is case-sensitive.
  7. Click Save.

Finally, you need to create a Sprig tag that fires at the appropriate time to send planid to Sprig.

  1. In Google Tag Manager and click Tags.
  2. Click New.
  3. Click Unitled Tag and give the tag an appropriate name, for example Sprig DL.
  4. In Tag Configuration, click Brick or Edit to choose the Tag Type.
  5. Click Discover more tag types in the Community Template Gallery.
  6. Click Search and type in Sprig.
  7. Click on Sprig Tag and then click on Choose Template
  8. In Environment ID, click plus.
  9. Select the Environment ID variable previously created; in the first example we used, SPRIG_ENV_ID.
  10. Make sure Action Type is set to User Attribute. This will allow you to define a custom attrubute
  11. In Attribute Key type in the name your attribute; in this case case 'PlanID'. This will be the name is displayed in Sprig. Don't forget to put single quotes around the attribute key name.
  12. Select the Custom JavaScript variable you created in the last step; in the previous example it was called, DLV-planid.
  13. In Triggering, click Brick or Edit to choose the Trigger.
  14. Select All Pages as the Trigger.
  15. Click Save.
  16. Click Submit and then Publish to push your changes out to the server.

Whenever a user clicks Finish to return a Microsurvey to Sprig, the current value of planid will be associated with the survey response. In the Sprig app, click People, then click on the last Visitor ID. If you look under Profile, you will be able to see the custom attribute that you defined.

Custom AttributesCustom Attributes

Custom Attributes