# @frontend-sdk/google-tag-manager

> Google Tag Manager integrated for Shogun Frontend.

Latest version **0.26.0** (published 2022-03-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @frontend-sdk/google-tag-manager
pnpm add @frontend-sdk/google-tag-manager
yarn add @frontend-sdk/google-tag-manager
bun add @frontend-sdk/google-tag-manager
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.26.0 |
| Published | 2022-03-29 |
| First published | 2021-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 36.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shogun |
| Maintainers | georgy-nemtsov, edengetshogun, shogun-engineering, klaus-shogun, nino-majder, william-shogun, pamelakchen, andynguyen-shogun, hugo-shogun, ivins, luiz_shogun, caroline-getshogun.com, shogun-admin |

## Links

- npm: https://www.npmjs.com/package/@frontend-sdk/google-tag-manager
- Repository: https://github.com/getshogun/frontend-integrations
- Homepage: https://github.com/getshogun/frontend-integrations#readme
- Issues: https://github.com/getshogun/frontend-integrations/issues
- npm.io page: https://npm.io/package/@frontend-sdk/google-tag-manager

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.1.0

## Recent versions

- 0.26.0 (latest) — 2022-03-29
- 0.25.1 — 2022-02-17
- 0.25.0 — 2022-01-14
- 0.24.2 — 2021-10-28
- 0.24.1 — 2021-10-27
- 0.24.0 — 2021-10-21
- 0.23.0 — 2021-10-19
- 0.22.0 — 2021-10-02
- 0.21.0 — 2021-09-30
- 0.20.0 — 2021-09-23
- 0.19.0 — 2021-09-17
- 0.18.0 — 2021-09-08
- 0.17.0 — 2021-08-30
- 0.16.0 — 2021-08-05
- 0.15.1 — 2021-08-04
- … 6 more at https://npm.io/package/@frontend-sdk/google-tag-manager/versions

## README

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

---
_Source: https://npm.io/package/@frontend-sdk/google-tag-manager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._