Implement Session Replay with Google Tag Manager

Instrumenting Amplitude Session Replay with Google Tag Manager requires a different procedure than with the standard Browser SDK Plugin.

To instrument Session Replay with Google Tag Manager:

1. Add the Google Tag Manager Web Template for Amplitude Analytics Browser SDK if it's not yet enabled.
2. In Google Tag Manager, create an init tag with the same API key as your Amplitude Project. This is the project that receives the session replays.
   1. Set the Trigger to Initialization.
   2. Amplitude recommends that you enable default event tracking for better search support with Session Replay. Default events count against your event quota.
3. Create a Custom HTML tag for Session Replay, and paste the code shown below.
4. Set Trigger for the Session Replay Tag to Initialization.
5. Sequence the Amplitude Initialization Tag to fire after the Session Replay tag.
6. Deploy the tags. Replays should begin to appear on the home page of the Amplitude app. Ensure that you're looking at the correct project.

 1<script>
 2    function loadAsync(src, callback) {
 3      var script = document.createElement('script');
 4      script.src = src;
 5      if (script.readyState) { // IE, incl. IE9
 6        script.onreadystatechange = function() {
 7            if (script.readyState === "loaded" || script.readyState === "complete") {
 8                script.onreadystatechange = null;
 9                callback();
10            }
11        };
12      } else {
13        script.onload = function() { // Other browsers
14            callback();
15        };
16      }
17      document.getElementsByTagName('head')[0].appendChild(script);
18    }
19 
20    loadAsync("https://cdn.amplitude.com/libs/plugin-session-replay-browser-1.8.1-min.js.gz",
21      function () {
22        var sessionReplayTracking = window.sessionReplay.plugin({sampleRate: 1});
23        window.amplitude.add(sessionReplayTracking).promise;
24    });
25 
26</script>

Troubleshooting

Multiple instantiation of the Amplitude SDKs. This is a common problem seen with GTM and other code injection frameworks. Ensure that the initialization logic is only run once on your app. This could happen if:

• There is more than 1 “Init Tag” or another custom tag that’s running Amplitude.
• You have another Code Injection Framework (for example, SquareSpace or Bubble) that also runs Amplitude.

This template uses the Amplitude Browser SDK Plugin. For help troubleshooting, see Troubleshooting | Session Replay Plugin