Merge pull request #36 from zarathustra323/restructure-tracking

Restructure click/link tracking within P1 Events and Leaders

packages/marko-web-leaders/browser/index.js

@@ -1,13 +1,14 @@
 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');
+const LeadersP1EventsTracker = () => import(/* webpackChunkName: "leaders-p1-event-tracker" */ './p1events-tracker.vue');
 
 
-export default (Browser, { withGTM = true } = {}) => {
+export default (Browser, { withGTM = true, withP1Events = true } = {}) => {
   const { EventBus } = Browser;
   if (withGTM) Browser.register('LeadersGTMTracker', LeadersGTMTracker, { provide: { EventBus } });
+  if (withP1Events) Browser.register('LeadersP1EventsTracker', LeadersP1EventsTracker, { provide: { EventBus } });
   Browser.register('LeadersProgram', LeadersProgram, {
     withApollo: true,
     on: { action: (...args) => EventBus.$emit('leaders-action', ...args) },
@@ -18,7 +19,4 @@ 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-p1-events/browser/track-leaders.vue → packages/marko-web-leaders/browser/p1events-tracker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p1-events-track-leaders" />
+  <div class="marko-web-leaders-p1events-tracker" style="display: none;" />
 </template>
 
 <script>
@@ -60,6 +60,7 @@ export default {
         const matches = /^Company Social - (.+)$/.exec(label);
         queue.push({
           ...baseEvent,
+          category: 'Company Profile Page',
           ...(matches && { label: 'Company Social Link' }),
           action: 'Click',
           entity: { id: payload.companyId, ns: this.ns('content-company') },

packages/marko-web-leaders/components/marko.json

@@ -2,9 +2,6 @@
   "<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",
@@ -19,5 +16,8 @@
   },
   "<marko-web-leaders-gtm-tracker>": {
     "template": "./gtm-tracker.marko"
+  },
+  "<marko-web-leaders-p1events-tracker>": {
+    "template": "./p1events-tracker.marko"
   }
 }

packages/marko-web-leaders/components/p1events-tracker.marko

@@ -0,0 +1 @@
+<marko-web-browser-component name="LeadersP1EventsTracker" props={ baseTenantKey: process.env.TENANT_KEY } />

packages/marko-web-leaders/package.json

@@ -16,7 +16,6 @@
     "@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-p1-events/components/init.marko

@@ -5,7 +5,7 @@ $ const { enabled, tenant, cookieDomain } = site.getAsObject("p1events");
 $ const realm = core.website("id");
 $ const { NODE_ENV } = process.env;
 
-$ const scriptSrc = defaultValue(input.scriptSrc, "https://de3t5rrdmy18m.cloudfront.net/p1-events.b47b524e.js");
+$ const scriptSrc = defaultValue(input.scriptSrc, "https://de3t5rrdmy18m.cloudfront.net/p1-events.1ed2a30f.js");
 $ const uri = defaultValue(input.uri, "https://db0y8smio0.execute-api.us-east-2.amazonaws.com/default/p1-website-events-enqueue");
 $ const identityQueryBuilder = `
   identityQueryBuilder: function(query) {

packages/marko-web-p1-events/components/marko.json

@@ -9,11 +9,6 @@
     "template": "./track-content.marko",
     "@node": "object"
   },
-  "<marko-web-p1-events-track-leaders>": {
-    "template": "./track-leaders.marko",
-    "@base-tenant-key": "string",
-    "@event-name": "string"
-  },
   "<marko-web-p1-events-track-website-section>": {
     "template": "./track-website-section.marko",
     "@node": "object"

packages/marko-web-p1-events/package.json

@@ -11,6 +11,7 @@
     "test": "yarn compile && yarn lint"
   },
   "dependencies": {
+    "@parameter1/base-cms-inflector": "^2.0.0",
     "@parameter1/base-cms-object-path": "^2.5.0"
   },
   "peerDependencies": {

packages/marko-web-p1-events/utils/base-content-entity.js

@@ -0,0 +1,4 @@
+const { dasherize } = require('@parameter1/base-cms-inflector');
+const entity = require('./base-entity');
+
+module.exports = (id, type) => entity(id, `content-${dasherize(type)}`);

packages/marko-web-p1-events/utils/base-entity.js

@@ -0,0 +1,4 @@
+const { dasherize } = require('@parameter1/base-cms-inflector');
+const ns = require('./create-namespace');
+
+module.exports = (id, type) => `${ns(dasherize(type))}*${id}`;

packages/marko-web-p1-events/utils/link-attrs.js

@@ -0,0 +1,11 @@
+const PREFIX = 'data-p1';
+
+module.exports = (params = {}) => {
+  const keys = ['action', 'category', 'label', 'entity', 'context', 'props'];
+  return keys.reduce((o, key) => {
+    let value = key === 'props' ? JSON.stringify(params[key]) : params[key];
+    if (key === 'action' && !value) value = 'Click'; // assume click when not set
+    if (!value) return o;
+    return { ...o, [`${PREFIX}-${key}`]: value };
+  }, {});
+};

packages/marko-web-theme-default/components/content/contact-details/index.marko

@@ -17,6 +17,7 @@ $ if (showEmail) fields.push("publicEmail");
 $ const showFields = fields.some(k => content[k]);
 
 $ const websiteLinkAttrs = getAsObject(input, "websiteLinkAttrs");
+$ const socialLinkAttrs = getAsObject(input, "socialLinkAttrs");
 
 <default-theme-page-contact-details|{ blockName }|
   tag=input.tag
@@ -53,6 +54,7 @@ $ const websiteLinkAttrs = getAsObject(input, "websiteLinkAttrs");
           provider=item.provider
           href=item.url
           modifiers=["dark", "lg"]
+          attrs=socialLinkAttrs
         />
       </for>
     </default-theme-content-contact-details-section>

packages/marko-web-theme-default/components/content/contact-details/marko.json

@@ -13,7 +13,8 @@
     "@class": "string",
     "@modifiers": "array",
     "@attrs": "object",
-    "@website-link-attrs": "object"
+    "@website-link-attrs": "object",
+    "@social-link-attrs": "object"
   },
   "<default-theme-content-contact-details-section>": {
     "template": "./section.marko",

packages/marko-web-theme-default/components/social/icon-link.marko

@@ -10,7 +10,13 @@ $ const name = label || provider;
 $ const title = name ? `Visit us on ${name.charAt(0).toUpperCase()}${name.slice(1)}` : null;
 
 <if(formatted && input.href)>
-  <marko-web-link class=classNames href=input.href target=input.target title=title>
+  <marko-web-link
+    class=classNames
+    href=input.href
+    target=input.target
+    title=title
+    attrs=input.attrs
+  >
     <marko-web-icon name=provider modifiers=input.modifiers />
   </marko-web-link>
 </if>

packages/marko-web-theme-default/components/social/marko.json

@@ -6,7 +6,8 @@
     "@href": "string",
     "@target": "string",
     "@modifiers": "array",
-    "@class": "string"
+    "@class": "string",
+    "@attrs": "object"
   },
   "<default-theme-social-icons>": {
     "template": "./icons.marko"

yarn.lock

@@ -6733,11 +6733,6 @@ 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"