Skip to content
Frend Front

Google Tag Manager

Installation

The following are the installation instructions for Next.js

Terminal window
pnpm add @frend-digital/events @next/third-parties

Whats handled out of the box?

By using the centraGTMAdapter (detailed below), GTM event handling for ALL centra events is handled automatically. This includes:

  • add_to_cart
  • remove_from_cart
  • add_to_wishlist
  • begin_checkout
  • purchase
  • select_item
  • sign_up
  • search

No additional configuration is required for events to be published to GTM. Simply use the packages as normal.

Usage

Initialize GTM in RootLayout

In your RootLayout file, initialize the GTM script

import { GoogleTagManager } from "@next/third-parties/google";


export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  );
}

Create an EventSubscription

In a file such as events.tsx, create an EventSubscription component

import { EventSubscription } from "@frend-digital/events/client";


import { centraGTMAdapter } from "@frend-digital/events/gtm";


export const Events = () => {
  const [adapters] = useState(() => [centraGTMAdapter()]);
  return <EventSubscription adapters={adapters} />;
};

Render the event subscription

In your RootLayout file, render the Events component, make sure to lazy load it.

import { GoogleTagManager } from "@next/third-parties/google";
import dynamic from "next/dynamic";


const Events = dynamic(() => import("./events"));


export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
      <Events />
    </html>
  );
}