From e8c642776e76cd8ee31b1c5cc0c89c4c91521a2a Mon Sep 17 00:00:00 2001
From: Osvaldas Valutis <osvaldas.v@gmail.com>
Date: Thu, 11 Jun 2020 11:59:11 +0300
Subject: [PATCH] Update readme

---
 README.md        | 76 ++++++++++++++++++++++++++++++++++++++++++------
 example/index.js |  2 +-
 2 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 7a635bb..f23f7d0 100644
--- a/README.md
+++ b/README.md
@@ -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"
@@ -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.:
 
@@ -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
@@ -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
diff --git a/example/index.js b/example/index.js
index 12c849b..0e80545 100644
--- a/example/index.js
+++ b/example/index.js
@@ -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` })