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 https //tagmanager google com/ 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 order #12345 confirmed thank you for your purchase 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 '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 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 help\@momentscience com