npm package: @frontend-sdk/google-tag-manager
Description: Google Tag Manager integrated for Shogun Frontend.
Author: Shogun
Latest version: 0.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.

<table>
  <tbody>
    <tr>
      <td>⚠️</td>
      <td>This package runs on Shogun Frontend and is in customer Beta. It might not currently support all ecommerce platforms or cover all use cases.</td>
    </tr>
  </tbody>
</table>

[Google Tag Manager website →](https://marketingplatform.google.com/about/tag-manager/)

[Google Tag Manager developers website →](https://developers.google.com/tag-manager)

## 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:

```jsx
/**
 * 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`):

```jsx
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

```jsx
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

```jsx
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

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