Moments
JS SDK (for Websites)

Google Tag Manager (GTM)

AdsPostX is now MomentScience! 🎉

We have rebranded AdsPostX to MomentScience. All the latest documentation and updates can now be found at MomentScience Documentation.

Introduction

Integrating AdsPostX with Google Tag Manager is a seamless process that can be completed in just a few simple steps. This document provides a quick guide to walk you through the integration process.

Requirements

To integrate AdsPostX with Google Tag Manager, you'll need:

  1. Your JS SDK snippet (obtainable through the Dashboard).
  2. Access to your Google Tag Manager account.
  3. Information on the page link/URL structure of your site's order confirmation page (or the intended display location for the AdsPostX unit).

Steps Overview

Depending on whether your app is a standard website with separate URLs for each page or a single-page application (SPA), your integration steps are slightly different.

Standard Page Integration

Standard page integration is designed for websites with explicit URL structures for the order confirmation page. Follow these steps to integrate AdsPostX with your standard website.

If your website is designed as a single-page application (SPA), you can skip this section and proceed to the SPA integration instructions below.

For a smoother integration process, we recommend following the playable demo below and simultaneously implementing the steps on your own.



Make sure to tick the box labeled "Support document write" on the tag configuration page.

Single-Page Application (SPA) Integration

This section is for websites built as single-page applications (SPAs), where the URL typically remains the same as users navigate different pages. If your website operates this way, please follow the steps outlined below for integrating AdsPostX.

Step 1: Identify the Trigger Element in GTM

In SPAs, a new HTML element often appears on the page when a user completes an order or confirms a form submission. You need to identify this element along with its ID or class selector. This information is necessary for setting up the AdsPostX tag in Google Tag Manager (GTM). For example, an HTML element that might appear after an order is submitted could look like this:

Element that might appear after an order is submitted


Or it could have a class like this:

HTML


Please note that these examples may differ from your actual page structure. It's essential to find a unique HTML element that only appears during the order confirmation event.

Step 2: Follow the Playable Demo

Use the interactive demo to set up the AdsPostX tag in Google Tag Manager (GTM). Follow the steps provided to complete the integration smoothly.



Advanced Integration

While the basic integration steps are sufficient for integrating AdsPostX with your site, you can further enhance functionality by passing payload parameters. This advanced integration option enables more targeted and personalized Offers.

Passing Payload Values

To enhance targeting and personalization of Offers, you can pass payload values when integrating AdsPostX with your site. Follow these steps for advanced integration, but first, you need to decide what information you want to include in the payload.

Step 1: Prepare the Payload Object

Make the payload object available via Javascript on the order confirmation page.

Payload Example


Step 2: Bind Payload to Google Tag Manager

Create a Custom JavaScript Variable named AdpxPayloadand bind it to the page variable. Use the provided JavaScript Custom Variable template.

AdpxPayload Variable


Once finished, the Custom JavaScript Variable screen should look like this:

Document image


Step 3: Update AdsPostX Tag in GTM

Modify the line that defineswindow.AdpxUser in the Custom HTML tag you created earlier to pass the AdpxPayloadparameters.

JS


Step 4: Publish Changes

Publish the changes to your Google Tag Manager container and verify that the AdsPostX tag loads correctly on the designated page.

If payload values were passed, check their acceptance in the AdsPostX dashboard under the Payload Explorer Section.



📢 If you're running into any issues while going through the integration process, feel free to contact us at [email protected].