GTM can be used to integrate MoEngage Web SDK and use its functionality in your website without any code changes.

MoEngage Web SDK Integration Steps using GTM

1. Go to Google Tag Manager Admin console

2. Click on Tags

3. Create a new Custom HTML Tag
   

4. Insert the javascript code as a Custom HTML Tag inside GTM. Use the Tag for every page that requires tracking. 

   JavaScript

   <script type="text/javascript">
     (function(i,s,o,g,r,a,m,n){i.moengage_object=r;t={};q=function(f){return function(){(i.moengage_q=i.moengage_q||[]).push({f:f,a:arguments})}};f=['track_event','add_user_attribute','add_first_name','add_last_name','add_email','add_mobile','add_user_name','add_gender','add_birthday','destroy_session','add_unique_user_id','moe_events','call_web_push','track','location_type_attribute'],h={onsite:["getData","registerCallback"]};for(k
     in f){t[f[k]]=q(f[k])}for(k in h)for(l in h[k]){null==t[k]&&(t[k]={}),t[k][h[k][l]]=q(k+"."+h[k][l])}a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);i.moe=i.moe||function(){n=arguments[0];return t};a.onload=function(){if(n){i[r]=moe(n)}}})(window,document,'script','https://cdn.moengage.com/webpush/moe_webSdk.min.latest.js','Moengage')
   
   
     Moengage = moe({
     app_id:"APP ID",
     debug_logs: 0
     });
     </script>
   

   warning

   Critical - When Going Live While pushing the code to live website please ensure debug_logs: 0 is initialized to send website data to LIVE MoEngage Dashboard (top toggle switch on Dashboard to right). Moengage = moe( { app_id: "YOUR_APP_ID", debug_logs: 0 });

   You might get the error Uncaught Reference Error: userID is not defined if the user id is not passed properly when you are using GTM for MoEngage SDK.

   
   
   

    

5. Click on Save
6. Ensure that the serviceworker.js (right click and save) file is placed in the root folder of your project (for Web Push to work; read more about this here)
7. Go to Triggers -> Create a new Trigger -> Page View trigger
   
   
8. Click on Save
9. Go to Tags and open the Custom HTML Tag created in Step 3
10. Scroll down to the Triggers section and Select the Page View trigger which was created in Step 7
    
    
11. Click on Save and Publish
12. MoEngage Web SDK has been integrated successfully

Using MoEngage Web SDK through GTM

1. To track an event (or an attribute) on MoEngage, create a Data Layer Variable and send its values to GTM from your website (you can create and use multiple Data Layer variables in a single GTM event or different GTM events). In this example, we are going to create a variable called 'name'
   
   
   
2. Then, create a Custom Event (GTM trigger). By doing this, you are setting the event name of the event which you are going to send to GTM from your website. In this case, we will create a Custom Event by the name of 'ClickOnButton' and name the trigger as 'clickOnButton'
   
   
   
   
   
3. Next, we create a Custom HTML (GTM tag). This tag will contain the script which will have the MoEngage data tracking code. In this case, we will be tracking an event which we shall call 'test event' and its value will be {name: 'sdk test'} 
   
4. Then, we attach the Custom Event 'clickOnButton' (created in Step 2) to this tag. This will ensure that whenever you call a GTM event with the name 'ClickOnButton' from your website, this tag will get triggered and execute the script (i.e., MoEngage event tracking code)
   
5. Save and Publish the changes
6. You have this button on your webpage-

   <button onclick="dataLayer.push({event: 'ClickOnButton'})">This is a button</button>

   Clicking on this button will trigger the tag that we had created and hence, MoEngage event tracking will occur with key and value as set in Step 3
7. Now, because we had created a Data Layer Variable which we called 'name' in Step 1, we can make use of it to dynamically send values to MoEngage. We can add a key 'name' in the GTM event like this-

   <button onclick="dataLayer.push({event: 'ClickOnButton', name: 'moengage'})">This is a button</button>

8. Then, we have to use the GTM placeholder for the variable 'name' in the code inside our Custom HTML GTM tag (which was created in Step 3). Notice that the name's value is now {{name}}
   
9. Now, if we click on the same button which is on your webpage, MoEngage event tracking will occur as before but this time the name's value will be 'moengage' (and not the static value 'sdk test')
10. This way, MoEngage Web SDK can read the different attribute values from the GTM event that you send from your website
11. You can create multiple such tag+trigger pairs and variables and use them for different GTM events (and to subsequently track different MoEngage events and attributes in the process)
12. For event tracking syntax, refer this article. And for user attribute tracking syntax, refer this article.
13. For sample code, refer this repository