Solved

Installing Session Replay when using GTM for Amplitude

  • 7 February 2024
  • 4 replies
  • 228 views
M
Rank
Badge

Hi,

what is the best way to install session replay feature when using GTM?

Tried custom html option (it gives me error on const because feature is only supported for ECMASCRIPT 2015 onwards), changed const to VAR and it loads, but nothing is visible inside Amplitude (added initialization tag to load before this html). What did I miss to make this work?

 

icon

Best answer by channing 8 February 2024, 21:01

View original

4 replies

J

Hi @Marin Radovan ,

Thank you for the question and trying out Session Replay! We are still in the early stage of supporting GTM with Session Replay, so it requires some custom setup. Here are some initial resources for you to try out: 

We recommend following https://www.docs.developers.amplitude.com/data/sources/google-tag-manager-client/ to get the Amplitude integration setup. 

Once that’s done, here’s a code snippet/example that you can follow to instrument session replay.: 

<script src="https://cdn.amplitude.com/libs/plugin-session-replay-browser-1.0.0-min.js.gz"></script>
<script type="text/javascript">
// Load Browser SDK 2.0 script
!function(){"use strict";!function(e,t){var r=e.amplitude||{_q:[],_iq:{}};if(r.invoked)...

// Initialize Amplitude with defaultTracking to false to enable start/end session event tracking
amplitudeGTM.init('<AMPLITUDE_API_KEY>', {
  defaultTracking: false
})

// Set sample rate and add Session Replay plugin
const sessionReplayTracking = window.sessionReplay.plugin({
  sampleRate: .01     // collects 1% of sessions for replay
}); 

amplitudeGTM.add(sessionReplayTracking);


amplitudeGTM.track('My Event’);

</script>


Please let us know if you have additional questions. 

M
Rank
Badge

@Jackson Huang thank you for your help, but this is not working.

Amplitude works perfectly fine through GTM (custom and default events).

Provided code is showing errors, so I tried to modify the script a little bit, but still no data inside Amplitude.

Latest code:

<script src="https://cdn.amplitude.com/libs/plugin-session-replay-browser-0.10.1-min.js.gz"></script>
<script type="text/javascript">
  // Load Browser SDK 2.0 script
  !function() {
    "use strict";
    !function(e, t) {
      var r = e.amplitude || { _q: [], _iq: {} };
      if (r.invoked) {

        // Initialize Amplitude with defaultTracking to false to enable start/end session event tracking
        amplitudeGTM.init('API KEY', {
          defaultTracking: false
        });

        // Set sample rate and add Session Replay plugin
        var sessionReplayTracking = window.sessionReplay.plugin({
          sampleRate: 0.08 // collects 8% of sessions for replay
        });

        amplitudeGTM.add(sessionReplayTracking);
        amplitudeGTM.track('My Event');
      }
    }(/* your arguments here */);
  }();
</script>

Also I tried to change replay-browser-version number but still no luck.

Also, tried to remove API KEY from the code and fired init tag before this script loads and still no luck…

 

C
Rank

Hello Marin,

The issue is that the loading of the Session Replay plugin via the script tag is asynchronous, so it is not guaranteed (or even likely) that the required code has been loaded before you try to access the elements defined within it.

I have successfully enabled Amplitude Session Replay in a GTM app with the following custom html tag definition triggered by Initialization - All Pages.

Please note that I’ve configured Session Replay to track 100% of the sessions (sampleRate = 1). This is helpful for testing, but you do not want to configure it this way on a production deployment as you will quickly consume your session replay entitlement.

<script>
    function loadAsync(src, callback) {
      var script = document.createElement('script');
      script.src = src;
      if (script.readyState) { // IE, incl. IE9
        script.onreadystatechange = function() {
            if (script.readyState === "loaded" || script.readyState === "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
      } else {
        script.onload = function() { // Other browsers
            callback();
        };
      }
      document.getElementsByTagName('head')[0].appendChild(script);
    }

    loadAsync("https://cdn.amplitude.com/libs/plugin-session-replay-browser-0.8.1-min.js.gz", 
      function () {
        window.amplitude.add(window.sessionReplay.plugin({sampleRate: 1}));
    });

</script>

Please let me know if you are able to get this working in your environment. I did notice that I once got a message in the browser console that session replay was not enabled because a session_id was not available, so if you’re not seeing the session replays in Amplitude, check that. It did seem to eventually recover and start recording a replay.

 

-- Channing Benson

channing@amplitude.com

Channing Benson
M
Rank
Badge

@channing this works from the looks of it. Will use it in production and see.

Thank you.

Reply


Terms & ConditionsCookie settings