Google Analytics Tracking helper with support for GTag, ga and _gaq.
npm install ga-trackMake sure you also include your Google Analytics script as shown in the example.
import 'ga-track';
// or
import GATrack from 'ga-track';Any element with data-ga-track as an attribute, will be tracked on click. Here's a quick reference:
| Attribute | Description | Default |
|---|---|---|
data-ga-track |
Needed for autotracking. If a value is given it serves as category. | ga-track |
data-ga-track-label |
Label of the event. | Element's href |
data-ga-track-action |
Action of the event. | Element's textContent |
data-ga-track-href |
Should this be false the link won't be navigated to. Otherwise ga-track will wait till the track happens and then navigates. |
Element's href |
GATrack exposes a few method being the following two the most importants. It is a safe call so if Google Analytics gets blocked by an adblocker it won't throw any exceptions due to not being present.
Manually sends an event to Google Analytics.
category - {string} - Event's category.
action - {string} - Event's action.
label - {string} - Event's label.
[callback] - {Function} - Callback to be called once the event has been tracked.
[timeout=1000] - Timeout after which the callback will be called if it didn't finish.
Safely pass data to Google Analytics:
GATrack.sendData('set', 'dimension2', 'member');See the complete example.
<html>
...
</body>
...
<span>Click</span>
<span>Me</span>
<span>One</span>
<span>Time</span>
<a data-ga-track href="http://www.firstandthird.com">Link</a>
<a data-ga-track href="http://www.firstandthird.com" target="_blank">External link</a>
<script>
GaTrack.track([
{
element: 'span',
category: 'span',
label: 'click'
}
])
</script>
</body>
</html>