Merge pull request #34 from zarathustra323/leaders-click-emitter

Create Leaders click event emitter

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>

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>

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) },
+  });
 };

packages/marko-web-leaders/components/click-emitter.marko

@@ -0,0 +1 @@
+<marko-web-browser-component name="LeadersClickEmitter" />

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",

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"

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 };
+  }, {});
+};

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 },
+  }),
+});

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"