Skip to content

Commit

Permalink
Update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
osvaldasvalutis committed Jun 11, 2020
1 parent 7c38099 commit e8c6427
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 10 deletions.
76 changes: 67 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,19 @@ GDPR compliant tracking.
- Google Tag Manager (GTM)
- Google Analytics (GA)

## Example code
## Example codes

### Usual workflow

```html
<div class="consent-dialog" hidden>
<p>Do you wanna get tracked?</p>
<p>
<button type="button" data-type="accept">Accept</button>
<button type="button" data-type="deny">Deny</button>
</p>
</div>
```

```js
import TrackingUtil from "@kollegorna/tracking-util"
Expand All @@ -25,33 +37,41 @@ const tu = new TrackingUtil({
},
})

const dialogEl = document.querySelector(`.consent-dialog`)

// Displays cookie consent dialog if user hasn't already made a decision
if (tu.userReacted()) {
document.querySelector(`.consent-dialog`).removeAttribute(`hidden`)
dialogEl.removeAttribute(`hidden`)
}

// Sets tracking accepted on button click
document
.querySelector(`.consent-dialog button[data-type="accept"]`)
dialogEl
.querySelector(`button[data-type="accept"]`)
.addEventListener(`click`, () => {
tu.setTrackingAccepted(true, {
defaultGTMdataLayer: [
{ pageTitle: `Home` },
{ event: `pageView` },
{ event: `pageview` },
],
defaultGAcommands: [
[`set`, `anonymizeIp`, true],
[`send`, `pageview`],
],
})
dialogEl.setAttribute(`hidden`, ``) // Hides the dialog
})

// Sets tracking denied on button click
document
.querySelector(`.consent-dialog button[data-type="deny"]`)
.addEventListener(`click`, () => tu.setTrackingAccepted(false))
dialogEl
.querySelector(`button[data-type="deny"]`)
.addEventListener(`click`, () => {
tu.setTrackingAccepted(false)
dialogEl.setAttribute(`hidden`, ``) // Hides the dialog
})
```

### Tracking clicks

Once `TrackingUtil` instance is created it also becomes accessible via
`window.trackingUtil`, e.g.:

Expand All @@ -77,6 +97,44 @@ document.querySelector(`a.logo`).addEventListener(`click`, () => {
})
```

### Tracking categories with Google Tag Manager

You may want to allow the user to choose how advanced tracking they are fine
with:

```html
<div class="consent-dialog" hidden>
<!-- ... -->
<label><input type="checkbox" name="performance" /> Performance</label>
<label><input type="checkbox" name="marketing" /> Marketing</label>
<label><input type="checkbox" name="analytics" /> Analytics</label>
<!-- ... -->
</div>
```

```js
// ...
dialogEl
.querySelector(`button[data-type="accept"]`)
.addEventListener(`click`, () => {
const defaultGTMdataLayer = [{ event: `pageview` }]

if (dialogEl.querySelector(`input[name="performance"]`).checked)
defaultGTMdataLayer.push({ event: `trackingCategory:performance` })

if (dialogEl.querySelector(`input[name="marketing"]`).checked)
defaultGTMdataLayer.push({ event: `trackingCategory:marketing` })

if (dialogEl.querySelector(`input[name="analytics"]`).checked)
defaultGTMdataLayer.push({ event: `trackingCategory:analytics` })

tu.setTrackingAccepted(true, { defaultGTMdataLayer })

dialogEl.setAttribute(`hidden`, ``)
})
// ...
```

## Default options

```js
Expand Down Expand Up @@ -217,6 +275,6 @@ Doesn't do anything if tracking hasn't been accepted by user.

## TODO

- [ ] Implement async callback functions, e.g.: `initCb()`.
- [ ] Support functions in `defaultGTMdataLayer` and `defaultGAcommands`
- [ ] Support multiple trackers
- [x] Support Google Analytics
2 changes: 1 addition & 1 deletion example/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ if (!tu.userReacted()) {
dialogEl
.querySelector(`button[data-type="accept"]`)
.addEventListener(`click`, () => {
const defaultGTMdataLayer = [{ pageTitle: `Home` }, { event: `pageView` }]
const defaultGTMdataLayer = [{ pageTitle: `Home` }, { event: `pageview` }]

if (dialogEl.querySelector(`input[name="performance"]`).checked)
defaultGTMdataLayer.push({ event: `trackingCategory:performance` })
Expand Down

0 comments on commit e8c6427

Please sign in to comment.