Guides

Integrate Google Tag Manager with Advocate

Suggest Edits

This guide outlines the basic steps needed to leverage Google Tag Manager (GTM) to upsert users to your Advocate program. Learn more about using Google Tag Manager with impact.com.

Step 1: Load the UTT into Google Tag Manager

Follow the instructions in the standard GTM pre-integration checklist for loading the UTT and setting up data layer variables.

Step 2: Create an Advocate firing trigger

  1. In Google Tag Manager, go to the Workplace screen, then select Triggers from the left navigation menu.
  2. Select New to open the Trigger Configuration screen, then select  [Edit] to choose the base trigger.
  3. Select the Custom Event trigger type.
  4. Enter an event name.
  5. Select the option to have the the trigger fire on All Custom Events.
  6. Select Save at the top right of the window.

Step 3: Set up a user upsert tag

🚧

JWTs are required for user upsert

To use the User Upsert tag, you must have the ability to generate a JWT on your back-end and pass it through to GTM as a variable. If you can't, then you'll need to use an API call to upsert the user instead.

  1. In Google Tag Manager, go to the Workplace screen, then select Tags from the left navigation menu.
  2. Select New to open the Tag Configuration screen, then select  [Edit] to choose a tag type.
  3. Select Custom HTML and paste the following script:
<script>
  // 1. When UTT is ready, run the following function.
  window.impactOnReady = function(){
    // 2. Configure UTT for your user and widget.
    //  The information provided here is used to track your user and register them in your Advocate program.
    //  This request is authenticated via JWT
    //  A note about generating JWTs:
    //    JWT's are tokens that are signed with your tenant API key. They must be generated server-side.
    //    To ensure the security of your tenant and program, do not expose your tenant API key to your frontend
    //    For more information see https://integrations.impact.com/impact-brand/docs/json-web-tokens
    var userConfig = {
        // 2b. Add details about your user
        //  This must include id and account id but other fields such as email, first name, locale or even custom fields can be included
        //  For more details and a list of user fields see https://integrations.impact.com/impact-brand/docs/install-the-utt
        user: {                               
        id: '{{email}}',                      
        accountId: '{{email}}',       
        locale: 'en_US', 
        cookies: '{{advocate}}'
        },
        // 2c. Add your generated JWT here to authenticate your request
       
    };
    // 3. Make the request to upsert your user and render your widget.

    impact.api().upsertUser(userConfig).then(function(response) {
        // The widget API automatically inserts the HTML for your widget into your page via an iFrame
        // However if needed, you can retrieve details about the upserted user and the widget HTML through this function response
        var user = response.user;
        console.log(user);
    }).catch(function(error){
        console.log(error);
    });
  };
  
  
  window.dataLayer.push({'event': 'user upserted'}) 
</script>
  1. Expand the Advanced Settings.
  2. From the Tag Firing Options dropdown list, select Once per event.
  3. Expand the Tag Sequencing section.
  4. Select the check box for Fire a tag before Upsert User fires.
  5. From the Setup tag dropdown list, select UTT.
  6. In the Triggering section, select the Advocate trigger.
  7. Select Save at the top right of the window,

(Optional) Set up an API upsert tag

Follow the steps above and substitute this script only if you're unable to generate a JWT and pass it as a variable to GTM.

<script>

var username = '{{username}}';       // Replace with your username
var password = '{{password}}';       // Replace with your password
var tenantAlias = '{{tenantalias}}';
var email = "{{email}}"
  
  
var url = "https://app.referralsaasquatch.com/api/v1/"+tenantAlias+"/open/account/"+email+"/user/"+email; 
  

var headers = new Headers();
headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));
headers.set('Content-Type', 'application/json');

var userObject = {

    id: "{{email}}", 
    accountId: "{{email}}",
    cookies: "{{advocate}}"
  
};

fetch(url, {
    method: 'PUT',
    headers: headers,
    body: JSON.stringify(userObject)
})
.then(function (response){
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    console.log(response.body)
  console.log('upserted via API')
})

  
  
</script>

Step 4: Set up a tag for the identify and trackConversion functions

Follow the identify function and trackConversion function sections of the standard Pre-Integration Checklist for instructions.

Next steps

Now that your setup is complete, learn how to publish the GTM container.

Updated 8 months ago