Introduction
Google Tag Manager is a free tool that enables marketers to install, store, and manage marketing tags without modifying website code, and instantly deploy tags on your website or mobile app from an easy-to-use web-based interface.
MoEngage and Google Tag Manager Integration
With the MoEngage and Google Tag Manager integration, you can deploy the MoEngage Web SDK and leverage all its capabilities without writing any code on your website.
Integration via Web SDK
Ensure you have a Google Tag Manager account with permission to import templates and add new tags.
There are two Google Tag Manager templates built by MoEngage, the Initialization Tag and the Actions Tag. Both tags can be added to your workspace by importing them from the Templates section.
Import the templates into your GTM Workspace
Step 1: Download and import the two tags:
-
Download the Initialization Tag and the Actions Tag (right-click and Save).
-
To import the tag into your GTM workspace, go to the Templates screen from the left side menu.
-
Under Tag Templates, click the “New” button >> Actions menu (top-right) >> Import. Select the Initialization tag file you just downloaded.
-
Click save when you see the MoEngage logo on the left.
-
Do the same for the Actions tag as well.
Initialization tag
The Initialization tag is used to add the MoEngage Web SDK to your website. This will enable you to take full advantage of the MoEngage native setup.
Step 1: Select and configure the Initialisation Tag
- On your GTM dashboard, click Tags >> New.
- Click Tag Configuration, and under “Custom” look for the MoEngage initialization tag.
- Setup the tag according to your needs:
| Property | Value |
|---|
| Workspace ID | App ID of your MoEngage account. You can find this by navigating to Settings -> General Settings |
| Debug Logs | - True - if you want the logs to be shown on the console
- False - if you want to hide the logs (make sure you select False for production website)
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). |
| Data center | Your MoEngage Data Center region (DC_X). |
| Serviceworker custom path | The path of your service worker file. Read more about setting up Push notifications support here. |
| Is Onsite-Messaging disabled? | On-site Messaging Campaigns allow you to show personalized pop-ups and non-intrusive banners on your website.
Web SDK integration for On-site Messaging will automatically start working on all the pages where the web SDK is integrated.
If you want to disable Onsite-Messaging for this website, check this option. Read more about how to configure Onsite-Messaging here. |
| Is SPA enabled? | If your website is a Single Page Application (SPA), select this option. Read more about how MoEngage handles SPAs here. |
| Keep SDK disabled? | If selected, SDK is disabled during initialization. For more information, refer here. |
| Enable Web Personalization | Web Personalization is used to personalize the website experience for each user. Select this option if you want to leverage our Web Personalization capabilities. Read more about Web Personalization here. |
| Cards Config (in JSON) | If you want to personalize cards, paste the JSON config in here. Read more about how to customise cards according to your needs here. |
Step 2 (Optional): Enabling Web Push notification
Optionally, if you want to be able to send push through the Google Tag Manager, first follow the push integration guidelines and place serviceworker file at the root directory of your project.
Step 3: Triggering
After configuring the tag, trigger it at every page view of your site:
This will ensure the MoEngage Web SDK is initialized on every page of your website.
Actions tag
The MoEngage Actions Tag template lets you trigger custom events, update custom as well as standard user attributes, and add or update user IDs.
Step 1: Select and configure the Actions Tag:
- On your GTM dashboard, click Tags >> New.
- Click Tag Configuration, and under “Custom” look for the MoEngage Actions Tag.
- Setup the tag according to your needs.
The MoEngage Actions tag can be used to perform any of the following actions using the MoEngage Web SDK:
Track Custom Event
In order to track custom events, select the Tag Type as “Track Custom Event”.
| Property | Value |
|---|
| Tag type | Select “Track Custom Event”. |
| Event Name | The name of the event that you want to track. Note that standard events are automatically tracked by the SDK. |
| Event Attributes | Here you can specify additional event attributes that you want to track along with this event. For each attribute, click on “Add Row” and then provide: 1. Attribute Name: The name of the custom attribute 2. Attribute Value: The value of the custom attribute. You can also use variables here. |
Track Custom User Attributes
In order to track custom user attributes, select the Tag Type as “Track Custom User Attributes”.
| Property | Value |
|---|
| Tag type | Select “Track Custom User Attributes”. |
| Attribute Name | The name of the custom attribute that you want to track. |
| Attribute Value | The value of the custom attribute. You can also use variables here. |
Login
Please download and use the latest initialisation and action templates. If you are using “Login” tag type to login users, please switch to the below tag type.
In order to log the user in, select the Tag Type as “Identify User (Identity object as param)“
| Property | Value |
|---|
| Tag type | Select “Identify User (Identity object as param)”. |
| User Identities | Here you can specify all the attributes you want to identify the user with. For each attribute, click on “Add Row” and then provide: 1. Attribute Name: The name of the attribute you want to set as indentity. 2. Attribute Value: The value of the attribute. You can also use variables here. |
Use the below names as the “Attribute Name” if you want to track the standard user attributes. Custom user attribute names can be used as is.
| User Attribute Name | Name to be used in “Attribute Name” |
|---|
| ID | uid |
| Email (Standard) | u_em |
| Gender | u_gd |
| Birthday | u_bd |
| Name | u_n |
| First Name | u_fn |
| Last Name | u_ln |
| Mobile Number (Standard) | u_mb |
For example, if Email (Standard), Mobile Number (Standard) and ID are configured as User Indentities for your account, then you can login the user with these three attributes like it is done below. You can use variables to dynamically set the attribute values for the user; we have given static values just for the example.
If you want to login users with just an ID, you can choose the “Identify User (uid as param)” tag type instead.
| Property | Value |
|---|
| Tag type | Select “Identify User (uid as param)”. |
| Value of uid | The value of ID for the user. You can also use variables here. |
Logout
In order to log the user out, select the Tag Type as “Logout”.
| Property | Value |
|---|
| Tag type | Select “Logout”. |
Update User Identities
Please download and use the latest initialisation and action templates. If you are using “Update User ID” tag type to update user ID, please switch to the below tag type.
You can use Idenitfy User tag types to update the identities of the user. For example, if you wish to update the current user’s identities- Email and ID then it can be done like this (variables can be used)-
Read more about how updating the User ID of a user works in MoEngage.
Track Standard Attribute
In order to track a standard attribute, select the Tag Type as one of the following:
- Track First Name
- Track Last Name
- Track Email
- Track Mobile
- Track Username
- Track Gender
- Track Date of Birth
| Property | Value |
|---|
| Tag type | Select “Track First Name/Last Name/Email/Mobile/Username/Gender/Date of Birth”. |
| Value | The value of the standard attribute you selected. |
Read more about updating the standard attributes of a user in MoEngage.
Enable SDK
You can use this tag to enable the SDK. For more information, refer here.
| Property | Value |
|---|
| Tag type | Enable SDK |
Disable SDK
You can use this tag to disable the SDK. For more information, refer here.
| Property | Value |
|---|
| Tag type | Disable SDK |
Enable Data Tracking
You can use this track to enable data tracking. For more information, refer here.
| Property | Value |
|---|
| Tag type | Enable Data Tracking |
Disable Data Tracking
You can use this track to disable data tracking. For more information, refer here.
| Property | Value |
|---|
| Tag type | Disable Data Tracking |
Step 2: Triggering
After configuring the tag, trigger it at the appropriate point on your website. This will depend on whether you want to track a custom event, or login/logout a user.
Please ensure that the Initialisation Tag has been executed before any Action Tag is executed. If you have Actions that need to be executed on page load or immediately after the Initialisation tag, the Action tag may execute before the SDK is even initialised.
To prevent this undesired behavior, add Tag Sequencing and only fire the Action tag after the Initialisation Tag.
-
Go to your Action Tag -> Advanced Settings -> Tag Sequencing -> Fire a tag before Moengage Actions Tag fires
-
Select the Initialisation Tag.
Integration via GTM Server Side
You can also forward the events captured on your GTM server to MoEngage without writing any code on your website. Read more about how to set up the integration with GTM Server and MoEngage on our help docs.
Handle Ad Blockers (Custom Proxy Domain)
To ensure ad blockers do not interrupt MoEngage SDK traffic, you can route requests through a custom proxy domain. For more information, refer to Handle Ad Blockers. Follow these steps to update your GTM configuration.
1. Update Template Permissions:
You must authorize the MoEngage SDK to load scripts from your custom domain by updating the script injection permissions in the GTM template. Follow these steps:
- In the MoEngage initialization tag template, select the Permissions tab and expand the Inject scripts section.
- Add your custom domain to the allowed URL match patterns. Use the format https://cdn.yoursubdomain.yourdomain.com, replacing the placeholder with your actual customProxyDomain.
2. Configure the Custom Proxy Domain Field:
Specify your subdomain hostname in the tag configuration to ensure all network requests use your proxy.
- In the Custom Proxy Domain field, enter your configured subdomain hostname, for example, yoursubdomain.yourdomain.com.