Google Tag Manager (GTM)

introduction integrating momentscience 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 momentscience with google tag manager, you'll need your js sdk snippet (obtainable through the dashboard ) access to your google tag manager account information on the page link/url structure of your site's order confirmation page (or the intended display location for the momentscience 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 momentscience 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 momentscience 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 momentscience 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 your order is confirmed (order #a30xx30) or it could have a class like this your order is confirmed (order #a30xx30) 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 momentscience 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 momentscience 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 momentscience 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 \<script> var adpxpayload = { email 'john\@doe com', //this can be a hashed value too firstname '', lastname '', mobile '', confirmationref '', amount '69 44', currency 'usd', paymenttype '', ccbin '', zipcode '100001', country 'us', language '', tags 'cookware,loyalty', //any comma separated values can be added here subid null } \</script> step 2 bind payload to google tag manager create a custom javascript variable named adpxpayload and bind it to the page variable use the provided javascript custom variable template adpxpayload variable function () { if(adpxpayload) //looks for a page defined variable return adpxpayload; else return {}; } once finished, the custom javascript variable screen should look like this step 3 update momentscience tag in gtm modify the line that defines window\ adpxuser in the custom html tag you created earlier to pass the adpxpayload parameters window\ adpxuser = {{adpxpayload}} step 4 publish changes publish the changes to your google tag manager container and verify that the momentscience tag loads correctly on the designated page if payload values were passed, check their acceptance in the momentscience 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 help\@momentscience com