Google Tag Manager (GTM)

Overview

Google Tag Manager (GTM) provides a simple way to add MomentScience to your website without modifying your site's code. This guide shows you how to integrate the MomentScience JS SDK using GTM for both standard websites and single-page applications (SPAs).

What you'll learn

How to set up MomentScience in Google Tag Manager
Integration methods for both standard websites and SPAs
How to pass custom payload data for enhanced targeting
Testing and troubleshooting your implementation

Prerequisites

Before starting this integration, you need:

Your MomentScience JS SDK snippet
Access to your Google Tag Manager account with publishing permissions
Knowledge of your website's structure (standard website vs. single-page application)

Option A: Standard website integration

Use this method if your website has distinct URLs for each page (e.g., a dedicated order confirmation page at /order-complete or /thank-you).

Step 1: Create a custom HTML tag in GTM

Log in to your Google Tag Manager account
Navigate to Tags > New
Click Tag Configuration and select Custom HTML
Paste your MomentScience JS SDK snippet into the HTML field

Step 2: Configure trigger for the tag

In the same tag configuration screen, click Triggering
Select + New Trigger
Choose Page View as the trigger type
Select Some Page Views
Set the condition to match your order confirmation page:
- Page URL contains /thank-you (adjust based on your URL structure)

Step 3: Enable document.write support

Return to your tag configuration
Check the box labeled Support document.write
Click Save to create the tag

Step 4: Test and publish

Click Preview to test your implementation
Navigate to your order confirmation page to verify the tag fires
Verify in the MomentScience dashboard that impressions are being recorded
When satisfied, click Submit and then Publish in GTM

Standard integration video walkthrough

The following interactive demo shows the complete process for standard website integration:

Option B: Single-page application integration

Use this method if your website is a single-page application where the URL doesn't change when users navigate between views.

Step 1: Identify the trigger element

In SPAs, you need to find a unique HTML element that appears when the order is completed or when you want to display MomentScience content.

Common examples include:

<!-- Element with ID -->
<div id="order-confirmation-box">Order #12345 confirmed</div>

<!-- Element with class -->
<div class="order-confirmation-message">Thank you for your purchase</div>

Step 2: Create a custom HTML tag in GTM

Log in to your Google Tag Manager account
Navigate to Tags > New
Click Tag Configuration and select Custom HTML
Paste your MomentScience JS SDK snippet into the HTML field

Step 3: Configure custom trigger based on DOM element

In the same tag configuration screen, click Triggering
Select + New Trigger
Choose Custom Event or Element Visibility as the trigger type:
- For Custom Event: Use an event that fires when the order completes
- For Element Visibility: Target the specific element you identified in Step 1
  - Element Selection Method: CSS Selector
  - Element Selector: #order-confirmation-box (adjust based on your element)
  - Select Once per page
Click Save to create the trigger

Step 4: Enable document.write support

Return to your tag configuration
Check the box labeled Support document.write
Click Save to create the tag

Step 5: Test and publish

Click Preview to test your implementation
Complete a test order or navigate to your target page
Verify in the GTM preview mode that the tag fires when expected
When satisfied, click Submit and then Publish in GTM

SPA integration video walkthrough

The following interactive demo shows the complete process for SPA integration:

Advanced: Passing payload data

Enhance targeting and personalization by passing customer data to MomentScience through the payload object.

Step 1: Create a data layer variable

On your order confirmation page, create a JavaScript object with your payload data:

<script>
  var AdpxPayload = {
    email: '[email protected]', // Can be a hashed value
    firstname: 'John',
    lastname: 'Doe',
    confirmationref: 'ORDER-12345',
    amount: '99.95',
    currency: 'USD',
    zipcode: '10001',
    country: 'US',
    tags: 'electronics,premium' // Comma-separated values
  }
</script>

Step 2: Create a custom JavaScript variable in GTM

In GTM, go to Variables > New > User-Defined Variables
Select Custom JavaScript as the variable type
Enter the following code:

function() {
  if (typeof AdpxPayload !== 'undefined') {
    return AdpxPayload;
  } else {
    return {};
  }
}

Name the variable AdpxPayload and click Save

Step 3: Update your MomentScience tag

Edit your existing MomentScience tag in GTM
Modify the snippet to use the variable:

window.AdpxUser = {{AdpxPayload}}

Step 4: Test your implementation

Enable Preview mode in GTM
Navigate to your confirmation page
Verify that the AdpxPayload variable contains the expected data
Confirm that the tag fires with the payload data

Verification and troubleshooting

Verify your integration

Check the MomentScience dashboard Payload Explorer to verify data is being received
Look for impressions in your MomentScience reporting dashboard
Test the integration in multiple browsers to ensure compatibility

Common issues and solutions

Issue	Possible cause	Solution
Tag not firing	Incorrect trigger configuration	Verify your trigger condition matches your actual page URL or element
No impressions recorded	JS SDK ID is incorrect	Check your SDK ID in the dashboard and update your tag
Missing payload data	JavaScript variable name mismatch	Ensure your payload object is named AdpxPayload and available before the tag fires
SPA integration not working	Element visibility trigger issues	Try using custom events triggered by your application instead
Multiple tags firing	Duplicate tags or triggers	Review all tags and triggers to ensure no duplicates exist

For assistance with your Google Tag Manager integration, contact [email protected].