Google Tag Manager Implementation

Integrating the SDK

Requirements:

• Google Tag Manager

Supported Platforms

• Web (Browser)

Data Privacy

• SDK Data Privacy and Safety

Integration

Importing and starting the SDK

Follow the steps below to import and start the SDK. This step is required to use any Pubsuite functionality.

1. In the Google Tag Manager UI, click Add a new tag.

2. Click Tag Configuration

3. Choose Tag Type > Custom > Custom HTML

4. Add the Pixel code located in your profile settings to your tag. The below is an example only.

<script>

    function loadScript() {

   if (window.pubSuite) {

     console.log("pubSuite snippet already included");

     return;

   }

 var pubSuiteScript = document.createElement("script");

  pubSuiteScript.type = "text/javascript";

  pubSuiteScript.src = "https://storage.googleapis.com/kochava-web-assets/ps/v1.1.1/pubsuite.js";

  pubSuiteScript.async = true;

  pubSuiteScript.onload = function() {

    var product_id = "YOUR_PRODUCT_ID_HERE";

    var access_token = "YOUR_ACCESS_TOKEN_HERE";

    window.pubSuite.startWithProductId(product_id, access_token);

  };

  document.head.appendChild(pubSuiteScript);

}

loadScript();

</script>

5. Click the Triggering Box and select All Pages from the menu that appears.

Note: The final tag configuration should look like this

Verifying the tag

Before publishing the tag, verify that it’s working as expected. 

1. Preview the changes using the preview button in the upper right corner of the screen.

2. When the preview window opens, press F12 to open the console. Verify that these messages are present.

Note: Verify that the ‘Started SDK PubSuite…’ message states that you’re using version 1.0.0 or higher.

Sending a Page View Conversion

This section explains how to send an automatic page view conversion, on every page, when the page loads.

1. Open the tag that was created in the section above and copy the following line, inserting your page view conversion name.

window.pubSuite.sendConversion('YOUR-PAGE-VIEW-CONVERSION-NAME')

2. Paste the line in the following location. The sendConversion call must be after the startWithProductId call, but within the onload function.

3. Preview the changes again, this time verifying that the following messages are present:

Note: Seeing this error at this point likely means that the sendConversion call is outside the onload function. Double check that your sendConversion call is in the correct location.

Note: Seeing a ‘Bad Request’ error message likely means that the conversion name you’re trying to send is either incorrect or has not yet been added to the list of supported conversion names. If you’re sure the conversion name is correct in the tag, contact your CSM about having the name added to the list.

Sending Conversion on Button Click

Send conversion when a user clicks on a button with specific text.

Note: This section only applies if the element being clicked on uses the <button></button> tags in the HTML.

1. After following the steps above to import and start the SDK, create a new custom HTML tag and add the following script.

<script>

  window.pubSuite.sendConversion('YOUR_BUTTON_CLICK_CONVERSION_HERE')

</script>

2. Click the Triggering section to add a trigger to the tag.

3. Add an All Elements click event. If it’s not available in the first list that comes up, click the blue ‘+’ button in the upper right

4. Click the Trigger Configuration section to add a new trigger type, and select All Elements from the new menu that appears

5. Once you’ve added the All Elements click trigger to the tag, change the radio button under This trigger fires on from All Clicks to Some Clicks. 

6. From the left-most dropdown menu, select the ‘Choose Built-In Variable…’ option and select the ‘Click Text’ option from the new menu that pops up.

7. In the center dropdown menu, select equals.

8. In the right-most textbox, enter in the exact text of the button that is going to be clicked on by the user. This text box is case-sensitive.

9. The final tag configuration should look like this:

Verify the Button/Input Click Tag

1. Preview the website using the Preview button as you did before. 

2. Open the console using F12

3. Click the button with the text that was entered into the textbox in step 8.

4. Verify that the following messages appeared in the console after the button was clicked:

5. To do further verification, add the following line to the script that starts the SDK

window.pubSuite.setLogLevel('trace')

6. In the logs, you can now verify that the name of the conversion you’re trying to send matches what is being sent to the database

Note: Seeing this error when the button is clicked could mean a couple of things. Verify that the script matches the script in step 1 of Sending Conversion on Button Click. If that’s correct, verify that you have imported and started the SDK, and that you’ve added the All Pages trigger to the import/start tag.

Note: Seeing a ‘Bad Request’ error message likely means that the conversion name you’re trying to send is either incorrect or has not yet been added to the list of supported conversion names. If you’re sure the conversion name is correct in the tag, contact your CSM about having the name added to the list.

Publishing

If the console logs all look correct when previewing your changes, double check with your CSM that data is coming through on the server. Once you’ve verified that traffic is going through to the server, you’re good to go. Publish the changes in Google Tag Manager using the Submit button. Give the site a minute or two and a refresh before verifying that you’re seeing the most recent changes.

Sending Conversion on Input Click

Send conversion when a user clicks on an input with certain text in or on it.

Note: This section only applies if the element being clicked on uses the <input /> tag in the HTML.

1. Navigate to Variables in Google Tag Manager and click New to add a new User-Defined Variable.

2. Click the Variable Configuration box to open the Choose variable type menu and select Custom Javascript

3. Paste this script into the textbox and save the changes. Remember the name of this variable, in this example the name is Input Value.

function() {

  var clickedElement = {{Click Element}};

  if (clickedElement && clickedElement.tagName === 'INPUT') {

    return clickedElement.value;

  }

  return undefined;

}

4. While still on the Variables menu, make sure that Click Element exists in the list of Built-In Variables. If not, click Configure and check the box next to Click Element.

5. Navigate to the Triggers menu and click New

6. Click the Trigger Configuration box and select All Elements from the Choose trigger type menu

7. Change the radio button from All Clicks to Some Clicks

8. In the left-most drop down, select the name of the variable from Step 3 of this section (Input Value in this example). In the center drop down, select equals and in the right-most text box, enter the text found on the button. This textbox is case-sensitive.

9. The final trigger should look like this. Remember what you named this trigger.

10. Navigate back to the Tags menu and select or create a new tag, and click the Triggering box.

11. Select your trigger from the Choose a trigger menu that appears. Save all your changes.

12. Verify these changes using the Verify the Button/Input Click Tag section