Skip to content

DataLayer Event Tracking GTM

We use @pit-tracking-analytics/tracking-gtm-lib with our own abstraction for tracking user interactions inside our app.

tracking-gtm-lib core functionalities

The tracking-gtm-lib exposes a set of functions/event-handlers which you can then use to listen/subscribe to interactions and or events which are emitted. tracking-gtm-lib

Note

By design the tracking-gtm-lib tracks all click/press events out of the box. A user should only add the tag to the element to be tracked.

POC implementation Overview

pushPageView(pathname: string)

Tracks the current page being viewed in GTM.

pushPageView parameters

pathname (string): The path of the page being viewed.

pushPageView behavior

  • Checks if GTM is enabled.
  • Pushes a page view event to the dataLayer.
  • Logs an error if the operation fails.

pushGetAccess(pathname: string)

  • Tracks a "Get Access" event in GTM when an unauthenticated user tries to access restricted content/functionalities.

pushGetAccess parameters

  • pathname (string): The path of the page where the event occurred.

pushGetAccess behavior

  • Checks if GTM is enabled.
  • Pushes a "Get Access" event to the dataLayer.
  • Logs an error if the operation fails.

pushFileDownload({ filename, extension })

Tracks a file download event in GTM. This could be but not limited to the downloading of a file or a chart.

pushFileDownload parameters

  • filename (string): The name of the file being downloaded.
  • extension (Extension): The file's extension.

pushFileDownload behavior

  • Checks if GTM is enabled.
  • Pushes a file download event to the dataLayer.
  • Logs an error if the operation fails.

Return Value

The useDataLayer hook returns an object containing the following methods:

  • pushPageView
  • pushGetAccess
  • pushFileDownload

These methods allow you to track specific events in GTM.

Example

import { Button } from "@statista/atlas";

import { baseDataGtmID } from "../../analytics/analytics.js";
import { useDataLayer } from "../../analytics/use-data-layer.js";
import Icon from "../../icons/icon.js";

export function Download() {
  const { pushFileDownload } = useDataLayer();
  return (
    <Button
      variant="neutral"
      onPress={pushFileDownload({ filename: "test_001", extension: "pdf" })}
      data-gtm={`${baseDataGtmID}download-btn`}
    >
      <span>
        <Icon name="16-bold-download-normal" />
        Download
      </span>
    </Button>
  );
}

export default function Index() {
  const { pushPageView } = useDataLayer();
  pushPageView(location.pathname);

  return (
    <Container>
      <MainPage />
    </Container>
  );
}
Last updated: January 26, 2026 at 14:54
By: renovate-token-app[bot]