From 7465f37e72de82212274cc9baf585b4332a106ab Mon Sep 17 00:00:00 2001
From: Jacob Bare <jacob@parameter1.com>
Date: Tue, 2 Mar 2021 14:23:51 -0600
Subject: [PATCH] Create Leaders click event emitter

---
 .../browser/click-emitter.vue                 | 50 +++++++++++++++++++
 .../marko-web-leaders/browser/gtm-tracker.vue |  2 +-
 packages/marko-web-leaders/browser/index.js   |  4 ++
 .../components/click-emitter.marko            |  1 +
 .../marko-web-leaders/components/marko.json   |  3 ++
 packages/marko-web-leaders/package.json       |  1 +
 .../marko-web-leaders/utils/event-attrs.js    |  8 +++
 .../utils/event-link-attrs.js                 | 16 ++++++
 yarn.lock                                     |  5 ++
 9 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 packages/marko-web-leaders/browser/click-emitter.vue
 create mode 100644 packages/marko-web-leaders/components/click-emitter.marko
 create mode 100644 packages/marko-web-leaders/utils/event-attrs.js
 create mode 100644 packages/marko-web-leaders/utils/event-link-attrs.js

diff --git a/packages/marko-web-leaders/browser/click-emitter.vue b/packages/marko-web-leaders/browser/click-emitter.vue
new file mode 100644
index 000000000..553c4b69b
--- /dev/null
+++ b/packages/marko-web-leaders/browser/click-emitter.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="marko-web-leaders-click-emitter" style="display: none;" />
+</template>
+
+<script>
+import { delegate } from 'dom-utils';
+
+export default {
+  data: () => ({
+    listener: null,
+  }),
+
+  created() {
+    this.listener = delegate(
+      document,
+      'click',
+      'a[data-leaders-action]',
+      this.emit.bind(this),
+    );
+  },
+
+  beforeDestroy() {
+    if (this.listener) this.listener.destroy();
+  },
+
+  methods: {
+    emit(_, link) {
+      const event = {
+        type: link.getAttribute('data-leaders-action'),
+        category: link.getAttribute('data-leaders-category'),
+        label: link.getAttribute('data-leaders-label'),
+      };
+
+      const payload = {
+        ...this.parseJSON(link.getAttribute('data-leaders-payload')),
+        href: link.getAttribute('href'),
+      };
+      this.$emit('action', event, payload);
+    },
+
+    parseJSON(value) {
+      try {
+        return JSON.parse(value) || {};
+      } catch (e) {
+        return {};
+      }
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-leaders/browser/gtm-tracker.vue b/packages/marko-web-leaders/browser/gtm-tracker.vue
index 2a953106e..45d24a551 100644
--- a/packages/marko-web-leaders/browser/gtm-tracker.vue
+++ b/packages/marko-web-leaders/browser/gtm-tracker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="marko-web-leaders-gtm-tracker" />
+  <div class="marko-web-leaders-gtm-tracker" style="display: none;" />
 </template>
 
 <script>
diff --git a/packages/marko-web-leaders/browser/index.js b/packages/marko-web-leaders/browser/index.js
index d5f105e74..6df79cd27 100644
--- a/packages/marko-web-leaders/browser/index.js
+++ b/packages/marko-web-leaders/browser/index.js
@@ -1,4 +1,5 @@
 const LeadersProgram = () => import(/* webpackChunkName: "leaders-program" */ '@parameter1/base-cms-leaders-program');
+const LeadersClickEmitter = () => import(/* webpackChunkName: "leaders-click-emitter" */ './click-emitter.vue');
 const LeadersCompanyWebsiteLink = () => import(/* webpackChunkName: "leaders-company-website-link" */ './company-website-link.vue');
 const LeadersCompanySocialLink = () => import(/* webpackChunkName: "leaders-company-social-link" */ './company-social-link.vue');
 const LeadersGTMTracker = () => import(/* webpackChunkName: "leaders-gtm-tracker" */ './gtm-tracker.vue');
@@ -17,4 +18,7 @@ export default (Browser, { withGTM = true } = {}) => {
   Browser.register('LeadersCompanySocialLink', LeadersCompanySocialLink, {
     on: { action: (...args) => EventBus.$emit('leaders-action', ...args) },
   });
+  Browser.register('LeadersClickEmitter', LeadersClickEmitter, {
+    on: { action: (...args) => EventBus.$emit('leaders-action', ...args) },
+  });
 };
diff --git a/packages/marko-web-leaders/components/click-emitter.marko b/packages/marko-web-leaders/components/click-emitter.marko
new file mode 100644
index 000000000..7f928f1f0
--- /dev/null
+++ b/packages/marko-web-leaders/components/click-emitter.marko
@@ -0,0 +1 @@
+<marko-web-browser-component name="LeadersClickEmitter" />
diff --git a/packages/marko-web-leaders/components/marko.json b/packages/marko-web-leaders/components/marko.json
index 25b7b2d7b..20d253901 100644
--- a/packages/marko-web-leaders/components/marko.json
+++ b/packages/marko-web-leaders/components/marko.json
@@ -2,6 +2,9 @@
   "<marko-web-leaders>": {
     "template": "./index.marko"
   },
+  "<marko-web-leaders-click-emitter>": {
+    "template": "./click-emitter.marko"
+  },
   "<marko-web-leaders-company-social-link>": {
     "template": "./company-social-link.marko",
     "@company": "object",
diff --git a/packages/marko-web-leaders/package.json b/packages/marko-web-leaders/package.json
index 06ee2ecc1..8db166867 100644
--- a/packages/marko-web-leaders/package.json
+++ b/packages/marko-web-leaders/package.json
@@ -16,6 +16,7 @@
     "@parameter1/base-cms-leaders-program": "^2.5.0",
     "@parameter1/base-cms-marko-web-icons": "^2.0.0",
     "@parameter1/base-cms-object-path": "^2.5.0",
+    "dom-utils": "^0.9.0",
     "graphql": "^14.7.0",
     "graphql-tag": "^2.11.0",
     "object-path": "^0.11.5"
diff --git a/packages/marko-web-leaders/utils/event-attrs.js b/packages/marko-web-leaders/utils/event-attrs.js
new file mode 100644
index 000000000..9f87c1520
--- /dev/null
+++ b/packages/marko-web-leaders/utils/event-attrs.js
@@ -0,0 +1,8 @@
+module.exports = (params = {}) => {
+  const keys = ['action', 'category', 'label', 'payload'];
+  return keys.reduce((o, key) => {
+    const value = key === 'payload' ? JSON.stringify(params[key]) : params[key];
+    if (!value) return o;
+    return { ...o, [`data-leaders-${key}`]: value };
+  }, {});
+};
diff --git a/packages/marko-web-leaders/utils/event-link-attrs.js b/packages/marko-web-leaders/utils/event-link-attrs.js
new file mode 100644
index 000000000..b8c9d52a9
--- /dev/null
+++ b/packages/marko-web-leaders/utils/event-link-attrs.js
@@ -0,0 +1,16 @@
+const leadersAttrs = require('./event-attrs');
+
+module.exports = ({
+  category,
+  label,
+  companyId,
+  linkAttrs,
+} = {}) => ({
+  ...linkAttrs,
+  ...leadersAttrs({
+    action: 'click',
+    category,
+    label,
+    payload: { companyId },
+  }),
+});
diff --git a/yarn.lock b/yarn.lock
index c7ec340a0..d0d8e2a23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6733,6 +6733,11 @@ dom-serializer@^1.0.1, dom-serializer@~1.2.0:
     domhandler "^4.0.0"
     entities "^2.0.0"
 
+dom-utils@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/dom-utils/-/dom-utils-0.9.0.tgz#e615a5af15ac4505e55ef612c72b5b5d176121f3"
+  integrity sha1-5hWlrxWsRQXlXvYSxytbXRdhIfM=
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"