@frontend-sdk/google-tag-manager v0.26.0

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.

Google Tag Manager website →

Google Tag Manager developers website →

Installation

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

or

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

Product Schema

Product data must be passed as an array of objects:

/**
 * All values should be dynamic and specific to each product.
 */
const products = [
  {
    name: "men's t-shirt",
    id: '09123809',
    variant: 'red',
    price: '99.00',
    quanitity: '2',
    category: 'shirts',
    brand: 'nike',
  },
  {
    //additional objects if more than one product.
  },
]

Usage

First we need to install the GTM script - we need to make a call to useGoogleTagManager in our App component with your GTM ID (GTM-XXXXXXX):

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

const App = () => {
  useGoogleTagManager({
    /**
     * [REQUIRED] - Google Tag Manager container id (aka gtmId).
     * This is specific to your GTM account.
     */
    containerId: 'GTM-XXXXXXX',
    /**
     * [REQUIRED] - This field is for session tracking purposes in Google Analytics
     * Generate a random string, or use `new Date().getTime()`
     */
    gaSessionId: 'XXXXXX',
    /**
     * (optional) - Global currency code.
     */
    currencyCode: 'USD',
    /**
     * (optional) - Google Optimize container id.
     * Set this if you have Google Optimize and you are initializing it inside of GTM
     */
    optimizeContainerId: 'XXXXXX',
  })
  return <div>...</div>
}

After that we can use actions to track different events:

Such as adding an item to your cart

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

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

Tracking a product view

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

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

Or tracking a product list page

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

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