Skip to content

add v3 #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dawnerd wants to merge 8 commits into
base: master
Choose a base branch
from
Open

add v3 #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b033c61
add v3
dawnerd Apr 20, 2022
3fd99f7
add type to package
dawnerd Apr 20, 2022
6185c18
add some debug
dawnerd Apr 20, 2022
23c85e6
debugging
dawnerd Apr 20, 2022
479c2fe
Update index.js
orthagonal Aug 8, 2022
0d947bc
Update index.js
orthagonal Aug 8, 2022
ad2df13
Update index.js
orthagonal Aug 8, 2022
28140b3
Update index.js
orthagonal Aug 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .node-version
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions .npmignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,3 @@ test/*
.DS_Store
.git
.editorconfig
.node-version
.travis.yml
18 changes: 0 additions & 18 deletions .travis.yml
View file
Open in desktop

This file was deleted.

96 changes: 46 additions & 50 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,39 @@
# GA-Track

[![Build Status](https://travis-ci.org/firstandthird/ga-track.svg?branch=master)](https://travis-ci.org/firstandthird/ga-track)
<span class="ga-track-npmversion"><a href="https://npmjs.org/package/ga-track" title="View this project on NPM"><img src="https://img.shields.io/npm/v/ga-track.svg" alt="NPM version" /></a></span>

Google Analytics Tracking helper with support for GTag, ga and _gaq.

## V3+ Note

To support a wider range of front-end layout systems (WordPress/Shopify/React) we've removed some features. Legacy sites should stick to v2.

- Autotrack (`[data-ga-track]`) has been removed. We recommend binding clicks to the `sendEvent()` method.
- Outline mode has been removed to reduce dependencies.
- `sendEvent()` no longer accepts the callback and timeout arguments.
- `getData()` has been removed.
- The method to enable debug mode has changed. See docs below.
- The method to change the tracker name has changed. See docs below.

## Installation

```sh
// npm
npm install ga-track

// yarn
yarn add ga-track
```

## Usage

> Make sure you also include your Google Analytics script as shown [in the example](./example/index.html#L7).

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


## Methods

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.

### sendEvent(category, action, label, callback, timeout)
### sendEvent(category, action, label)

Manually sends an event to Google Analytics.
Manually sends an event to Google Analytics. Returns a promise.

#### Parameters:

Expand All @@ -47,10 +43,6 @@ Manually sends an event to Google Analytics.

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

### sendData()

Safely pass data to Google Analytics:
Expand All @@ -59,36 +51,40 @@ Safely pass data to Google Analytics:
GATrack.sendData('set', 'dimension2', 'member');
```

## Example
## Options

### Debug Mode

```js
import GATrack from 'ga-track';

GATrack.debug = true;
```

### Changing Tracker Name

See the [complete example](./example/index.html).
```js
import GATrack from 'ga-track';

```html
<html>
GATrack.trackerName = 'SomeTrackerName';
```

...
### Forcing a provider

</body>
Supported values: `''`, `'ga'`, `'gaq'`, `'gtag'`

...

<span>Click</span>
<span>Me</span>
<span>One</span>
<span>Time</span>
This is useful if you have multiple tags on the same page but only want to use one of them.

<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>
```js
import GATrack from 'ga-track';

GATrack.force = 'ga';
```

### Category Prefix

```js
import GATrack from 'ga-track';

<script>
GaTrack.track([
{
element: 'span',
category: 'span',
label: 'click'
}
])
</script>
</body>
</html>
GATrack.prefix = 'SiteName'; // category becomes SiteName-categoryvalue
```
58 changes: 0 additions & 58 deletions example/index.html
View file
Open in desktop

This file was deleted.

Loading