---
title: Google Tag Manager (GTM)
slug: google-tag-manager-gtm
icon: 🏷️
docTags: 
createdAt: 2025-07-25T19:47:50.120Z
---

:::hint{type="info"}
**Who is this for:** Publishers and marketers who manage website tags through Google Tag Manager and want to add MomentScience without modifying site code.

**Outcome:** Deploy the MomentScience JS SDK via a GTM custom HTML tag, configured for both standard websites and single-page applications with optional payload targeting.
:::

# 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](https://app.momentscience.com/account/integration/customize#install)
- Access to your Google Tag Manager account with publishing permissions
- Knowledge of your website's structure (standard website vs. single-page application)

# Integration Steps

## 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

1. Log in to your [Google Tag Manager account](https://tagmanager.google.com/)
2. Navigate to **Tags** > **New**
3. Click **Tag Configuration** and select **Custom HTML**
4. Paste your MomentScience JS SDK snippet into the HTML field

### Step 2: Configure trigger for the tag

1. In the same tag configuration screen, click **Triggering**
2. Select **+ New Trigger**
3. Choose **Page View** as the trigger type
4. Select **Some Page Views**
5. 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

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

### Step 4: Test and publish

1. Click **Preview** to test your implementation
2. Navigate to your order confirmation page to verify the tag fires
3. Verify in the MomentScience dashboard that impressions are being recorded
4. 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:

:::Iframe{iframeHeight="0" code="<div style=&#x22;position: relative; padding-bottom: calc(54.37301587301587% + 42px); height: 0;&#x22;><iframe src=&#x22;https://play.momentscience.com/embed/clwpossn90ceh1vxw3vq9vyb5&#x22; title=&#x22;Implementing MomentScience with Google Tag Manager&#x22; allow=&#x22;clipboard-write&#x22; frameborder=&#x22;0&#x22; webkitallowfullscreen=&#x22;true&#x22; mozallowfullscreen=&#x22;true&#x22; allowfullscreen style=&#x22;position: absolute; top: 0; left: 0; width: 100%; height: 100%;&#x22;></iframe></div>"}

:::

## 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:

```html
<!-- 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

1. Log in to your [Google Tag Manager account](https://tagmanager.google.com/)
2. Navigate to **Tags** > **New**
3. Click **Tag Configuration** and select **Custom HTML**
4. Paste your MomentScience JS SDK snippet into the HTML field

### Step 3: Configure custom trigger based on DOM element

1. In the same tag configuration screen, click **Triggering**
2. Select **+ New Trigger**
3. 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**
4. Click **Save** to create the trigger

### Step 4: Enable document.write support

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

### Step 5: Test and publish

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

### SPA integration video walkthrough

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

:::Iframe{iframeHeight="0" code="<div style=&#x22;position: relative; padding-bottom: calc(53.050264550264544% + 42px); height: 0;&#x22;><iframe src=&#x22;https://play.momentscience.com/embed/clx6no2fr01j71xfw86644b9d&#x22; title=&#x22;Implementing MomentScience with Google Tag Manager (SPA)&#x22; allow=&#x22;clipboard-write&#x22; frameborder=&#x22;0&#x22; webkitallowfullscreen=&#x22;true&#x22; mozallowfullscreen=&#x22;true&#x22; allowfullscreen style=&#x22;position: absolute; top: 0; left: 0; width: 100%; height: 100%;&#x22;></iframe></div>"}

:::

# 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

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

```javascript
<script>
  var AdpxPayload = {
    email: 'customer@example.com', // 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

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

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

1. Name the variable `AdpxPayload` and click **Save**

## Step 3: Update your MomentScience tag

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

```html
window.AdpxUser = {{AdpxPayload}}
```

## Step 4: Test your implementation

1. Enable **Preview** mode in GTM
2. Navigate to your confirmation page
3. Verify that the `AdpxPayload` variable contains the expected data
4. Confirm that the tag fires with the payload data

# Verification and troubleshooting

## Verify your integration

1. Check the MomentScience dashboard [Payload Explorer](https://app.momentscience.com/account/tools/payload-explorer) to verify data is being received
2. Look for impressions in your MomentScience reporting dashboard
3. 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 [help@momentscience.com.](mailto\:help@momentscience.com)