https://github.com/zanonnicola/tracking-ready-hook

Notify when GA and GTM are loaded in your React Component
https://github.com/zanonnicola/tracking-ready-hook

gtm hooks reactjs tracking

Last synced: 26 days ago
JSON representation

Notify when GA and GTM are loaded in your React Component

• Host: GitHub
• URL: https://github.com/zanonnicola/tracking-ready-hook
• Owner: zanonnicola
• Created: 2019-03-15T13:17:09.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T17:53:08.000Z (almost 2 years ago)
• Last Synced: 2024-11-15T10:49:04.574Z (about 1 month ago)
• Topics: gtm, hooks, reactjs, tracking
• Language: JavaScript
• Size: 666 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



# React Hook

Tiny **327 bytes** `React` Hook that notifes you when GA or GTM is loaded in your React Component

Use `requestAnimationFrame` to check when the tracking code has been loaded. There's a pre-defined `timeOut` (default `5000`) that will stop the checking automatically and report an error if you need for example to log it somewhere.

## :package: Installation

```bash

npm install tracking-ready-hook --save

```

## :rocket: Load

```js

// using es modules

import useTrackingIsLoaded from 'tracking-ready-hook'

// common.js

const useTrackingIsLoaded = require('tracking-ready-hook')

```

Or use script tags and globals.

```html

```

And then grab it off the global like so:

```js

const useTrackingIsLoaded = trackingIsLoaded.default;

```

## :bulb: Usage

Let's assume you want to send some data to GA or to the `dataLayer` but in order to do that you need to wait for GA or GTM to be available in `window`.

```javascript

function App() {

  const [status, error] = useTrackingIsLoaded();

  return (

    


      {status ? 
Loaded
 : 
Not Loaded
}

      {error ? 
Error: {error.message}
 : null}

    

  );

}

```


Maybe more useful: run inside `useEffect` Hook or `onClick` to send data to `dataLayer`

```javascript

function App() {

  const [status, error] = useTrackingIsLoaded();

  useEffect(() => {

    if (status) {

      window.dataLayer.push({

      ecommerce: {

			  currencyCode: 'USD',

			  impressions: [{foo: 'bar'}]

			}

		});

    }

  })

  return (

    


      Please track me!!!

    

  );

}


```

## API

#### `useTrackingIsLoaded(timeout: Number);` Default `timeout` 5000

Returns an `Array` of `status: Boolean` and `error: Error Object`

## Tests

`npm test`

## Legals

Released under MIT license.