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 <> Google Tag Manager
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 on 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.
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 on Tags >> New.
- Click on Tag Configuration, and under "Custom" look for the MoEngage initialization tag.
- Setup the tag according to your needs:
|App ID of your MoEngage account. You can find this by navigating to Settings -> App Settings
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.
|Is SPA enabled?
|If your website is a Single Page Application (SPA), select this option. Read more about how MoEngage handles SPAs 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.
|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.
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 on Tags >> New.
- Click on 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".
|Select "Track Custom Event".
|The name of the event that you want to track. Note that standard events are automatically tracked by the SDK.
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:
Track Custom User Attributes
In order to track custom user attributes, select the Tag Type as "Track Custom User Attributes".
|Select "Track Custom User Attributes".
|The name of the custom attribute that you want to track.
The value of the custom attribute. You can also use variables here.
In order to log the user in, select the Tag Type as "Login".
|The User ID of the user that has performed the login. This will be used to identify the user on MoEngage.
In order to log the user out, select the Tag Type as "Logout".
Update User ID
In order to update an existing User ID of the logged-in user, select the Tag Type as "Update User ID".
|Select "Update User ID".
|The updated User ID of the user is being tracked.
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
|Select "Track First Name/Last Name/Email/Mobile/Username/Gender/Date of Birth".
|The value of the standard attribute you selected.
Read more about updating the standard attributes of a user in MoEngage.
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.
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.