GTM integration on web requires installing our Javascript SDK, and then setting up GTM to trigger SDK functions using custom HTML tags. This demo apps is a proof of concept, with just the 3 most important functionalities implemented (logging events, setting user Id, and setting user properties). Here is our GTM container setup:

Note: Make sure to put the Amplitude JS load snippet and initialize with your API key on every page before you load the Google Tag Manager script.

• eventProperties
• eventType
• userId
• userProperties

• logEvent: Event equals 'logEvent'
• setUserId: Event equals 'setUserId'
• setUserProperties: Event equals 'setUserProperties'

logEvent

• type: Custom HTML Tag
• HTML: <script>amplitude.getInstance().logEvent('{{eventType}}', {{eventProperties}});</script>
• Fire on trigger: Event equals 'logEvent'

setUserId

• type: Custom HTML Tag
• HTML: <script>amplitude.getInstance().setUserId('{{userId}}');</script>
• Fire on trigger: Event equals 'setUserId'

setUserProperties

• type: Custom HTML Tag
• HTML: <script>amplitude.getInstance().setUserProperties({{userProperties}});</script>
• Fire on trigger: Event equals 'setUserProperties'

The idea is that when you want to log an event, you push a "logEvent" event to the data layer with the variables for eventType and eventProperties -> activates the logEvent trigger -> activates the logEvent tag -> calls our SDK's logEvent using the script tags.

1. Run npm install
2. Run node server.js
3. In browser, navigate to http://localhost:9000/amplitudejs-gtm.html

A lot of the other functionality from the SDK hasn't been implemented (such as logging revenue, user property operations, etc), but this proof of concept demonstrates that GTM integration with Amplitude is possible, and events are being logged with the correct user Ids. Implementing the other functionalities would follow a similar pattern. You can customize your integration based on your setup, for example you can have tags triggered by clicks or page views, but the important thing is that you map it to the correct SDK function in the custom HTML.