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>
}