Google Tag Manager

If you use Google Tag Manager to manage third party scripts, you can use it to initialize LogRocket in your application. You will need to create a Custom HTML Tag for the LogRocket script and select a trigger for it. We recommend using the Window Loaded trigger.

To get started, create a new Custom HTML Tag in your Google Tag Manager instance and add both lines of the LogRocket script tag:

Add to your HTML:

<script src="https://cdn.logr-in.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init(YOUR_APP_ID);</script>

See example screenshot below. Note that the script tag is specific to your account, so we recommend copying directly from the Project Setup section of the LogRocket Settings:

If you don't already have an app ID, visit https://app.logrocket.com to get one.

Next, select a trigger for the tag. We recommend Window Loaded, but you can also use Page View.

📘
Gathering more data with LogRocket in GTM
All methods available with the LogRocket JavaScript SDK are available when initializing via Google Tag Manager. These include user identification, DOM sanitization and network sanitization, along with custom events.

Automatically Forwarding Custom Events

If you want to automatically send your GTM custom events to LogRocket, wrap dataLayer.push() using an approach like this in a Custom HTML tag that is loaded after LogRocket with Initialization - All Pages

<script>
(function () {
  var dataLayer = window.dataLayer = window.dataLayer || [];

  if (dataLayer.__logRocketMirrorInstalled) {
    return;
  }

  dataLayer.__logRocketMirrorInstalled = true;

  var originalPush = dataLayer.push;

  function normalizeValue(value) {
    if (value === null) {
      return "null";
    }

    if (
      typeof value === "string" ||
      typeof value === "boolean"
    ) {
      return value;
    }

    if (typeof value === "number") {
      return isFinite(value) ? value : String(value);
    }

    /*
     * LogRocket does not accept nested objects, so preserve them
     * as JSON strings.
     */
    if (typeof value === "object") {
      try {
        return JSON.stringify(value);
      } catch (error) {
        return undefined;
      }
    }

    return undefined;
  }

  function mirrorEvent(payload) {
    if (
      !payload ||
      typeof payload !== "object" ||
      Array.isArray(payload) ||
      typeof payload.event !== "string" ||
      /^gtm\./.test(payload.event) ||
      payload.event === "page_view"
    ) {
      return;
    }

    if (
      !window.LogRocket ||
      typeof window.LogRocket.track !== "function"
    ) {
      return;
    }

    var properties = {};

    Object.keys(payload).forEach(function (key) {
      if (
        key === "event" ||
        key === "eventCallback" ||
        key === "eventTimeout" ||
        /^gtm\./.test(key) ||
        key.length >= 100
      ) {
        return;
      }

      var value = normalizeValue(payload[key]);

      if (value !== undefined) {
        properties[key] = value;
      }
    });

    window.LogRocket.track(payload.event, properties);
  }

  /*
   * Capture events that were pushed before this tag ran.
   */
  for (var i = 0; i < dataLayer.length; i++) {
    mirrorEvent(dataLayer[i]);
  }

  /*
   * Capture all future dataLayer pushes.
   */
  dataLayer.push = function () {
    for (var i = 0; i < arguments.length; i++) {
      mirrorEvent(arguments[i]);
    }

    return originalPush.apply(dataLayer, arguments);
  };
})();
</script>