Google Tag Manager (GTM)
If you currently use Google Tag Manager (GTM) with your website, AdsPostX can be integrated within just a few steps which are outlined below.
- Access to your Google Tag Manager account
- Information on the page link/URL structure of your site's order confirmation page (or wherever you intend to display the AdsPostX unit)
Depending on whether your app is a standard website with seperate URLs for each page or a single-page application (SPA) your integration steps are slightly different.
This guide is designed for standard websites that have an explicit URL structure for the order confirmation page.
If you operate a single-page application oriented website, please skip this section and continue to the SPA integration section below.
To make the process as smooth as possible, please step through the playable demo and follow along with your own integration efforts.
Be sure to check "Support document.write" in the tag configuration page.
This guide is designed for single-page application websites. Single-page application websites typically have page URLs do not change as users visit different pages.
For example, if the URL stays the same as your users navigate from your shopping cart page to your order confirmation page when placing an order, you likely have an SPA implementation and should continue integrating with the steps in this section.
Step 1. Determine which HTML element should trigger the AdsPostX tag in GTM
The single-page application will typically display a new HTML element on the page when a user completes an order or takes an action to confirm form submission. Determine which element this is along with the ID or class selector of the element. You will need this when setting up the AdsPostX tag in Google Tag Manager.
An example of an HTML element that may be rendered after an order is submitted could look like the following:
The examples above is likely going to differ from your own page. It is recommended that you find a unique HTML element on the page that only appears on the order confirmation event.
Step 2. Follow the playable demo below to continue setting up the AdsPostX tag in Google Tag Manager
While the instructions above are sufficient to integrate AdsPostX with your site, the following topic(s) cover more advanced integration options such as passing payload parameters.
Passing payload values offers the ability to deeper target ads and offers as well as personalize them where applicable. To pass payload values, first determine what information you would like to pass in the payload and then follow this guide to integrate with AdsPostX via Google Tag Manager.
Step 1. Make the payload object available via Javascript on the order confirmation page.
Step 2. "Bind" the payload to Google Tag Manager using Custom Javascript Variables.
Create a Custom Javascript Variable called AdpxPayload and bind the page variable. For your convenience, the Javascript Custom Variable template to use is provided below.
When complete, the Custom Javascript Variable screen should resemble the following:
Step 3. Update the AdsPostX tag in GTM to pass the payload parameters in.
Find the line that defines window.AdpxUser in the Custom HTML tag you created earlier and change to:
Step 4. Publish changes to the Google Tag Manager container and verify that the AdsPostX tag loads on the appropriate page. If you passed any payload values, you can verify that these values were accepted by logging into the AdsPostX dashboard and navigating to the Payload Explorer from the Tools in the side menu.