google-tag-manager

Google Tag Manager

Google Tag Manager integrated for Shogun Frontend.

Manage all your website tags without editing code. Google Tag Manager delivers simple, reliable, easily integrated tag management solutions — for free.

⚠️ This package runs on Shogun Frontend and is in customer Beta. It might not currently support all ecommerce platforms or cover all use cases.

Google Tag Manager website →

Google Tag Manager developers website →

Installation

yarn add @frontend-sdk/google-tag-manager

npm install @frontend-sdk/google-tag-manager

Usage

First we need to install the GTM script - we need to make a call to useGoogleTagManager with the GTM ID (GTM-XXXXXXX):

import { useGoogleTagManager } from '@frontend-sdk/google-tag-manager'

const App = () => {
  useGoogleTagManager({
    /**
     * Google Tag Manager container id (aka gtmId).
     */
    containerId: 'GTM-XXXXXXX',
    /**
     * Global currency code.
     * There is occasionally some breakage that happens if the global value for currency hasn't been set properly,
     * that's why it is required during initialization.
     * This value can be override in each single event.
     */
    currencyCode: 'USD',
    /**
     * (optional)
     * Google Optimize container id.
     * Set this if you have Google Optimize and you are initializing it outside of gtm
     */
    optimizeContainerId: 'XXXXXX',
    /**
     * (optional)
     * This field is for session tracking purposes in Google Analytics
     */
    gaSessionId: 'XXXXXX',
  })
  return <div>...</div>
}

After that we can use actions to track different events:

import { useGoogleTagManagerActions } from '@frontend-sdk/google-tag-manager'
import { useEffect } from 'react'

const Cart = ({ products }) => {
  const { trackProductDetailView } = useGoogleTagManagerActions()
  useEffect(() => trackProductDetailView(props.products), [products])
  return <div>...</div>
}

It's also possible to track arbitrary event of any required shape:

import { useGoogleTagManagerActions } from '@frontend-sdk/google-tag-manager'
import { useEffect } from 'react'

const App = () => {
  const { track } = useGoogleTagManagerActions()
  // this will send "hey!" string to your GTM container
  useEffect(() => track('hey!'), [])
  return <div>...</div>
}

Did this page help you?