From 6d03788695229df12263793f02eaa548c312022b Mon Sep 17 00:00:00 2001
From: Jacob Bare <jacob@parameter1.com>
Date: Wed, 3 Mar 2021 16:57:33 -0600
Subject: [PATCH] Create content body link tracking component

---
 .../marko-web-p1-events/browser/.eslintrc.js  | 21 ++++++++
 packages/marko-web-p1-events/browser/index.js |  5 ++
 .../browser/track-content-body-links.vue      | 49 +++++++++++++++++++
 .../marko-web-p1-events/components/marko.json | 17 +++++++
 .../components/track-content-body-links.marko | 15 ++++++
 5 files changed, 107 insertions(+)
 create mode 100644 packages/marko-web-p1-events/browser/.eslintrc.js
 create mode 100644 packages/marko-web-p1-events/browser/index.js
 create mode 100644 packages/marko-web-p1-events/browser/track-content-body-links.vue
 create mode 100644 packages/marko-web-p1-events/components/track-content-body-links.marko

diff --git a/packages/marko-web-p1-events/browser/.eslintrc.js b/packages/marko-web-p1-events/browser/.eslintrc.js
new file mode 100644
index 000000000..2eb0b8d9c
--- /dev/null
+++ b/packages/marko-web-p1-events/browser/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+  extends: [
+    'airbnb-base',
+    'plugin:vue/recommended',
+  ],
+  env: {
+    browser: true,
+  },
+  rules: {
+    'vue/max-attributes-per-line': ['error', {
+      singleline: 3,
+      multiline: {
+        max: 1,
+        allowFirstLine: false,
+      },
+    }],
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};
diff --git a/packages/marko-web-p1-events/browser/index.js b/packages/marko-web-p1-events/browser/index.js
new file mode 100644
index 000000000..a01be7255
--- /dev/null
+++ b/packages/marko-web-p1-events/browser/index.js
@@ -0,0 +1,5 @@
+const TrackContentBodyLinks = () => import(/* webpackChunkName: "p1-events-track-content-body-links" */ './track-content-body-links.vue');
+
+export default (Browser) => {
+  Browser.register('P1EventsTrackContentBodyLinks', TrackContentBodyLinks);
+};
diff --git a/packages/marko-web-p1-events/browser/track-content-body-links.vue b/packages/marko-web-p1-events/browser/track-content-body-links.vue
new file mode 100644
index 000000000..8cf04729e
--- /dev/null
+++ b/packages/marko-web-p1-events/browser/track-content-body-links.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="marko-web-p1-events-content-body-links" style="display: none;" />
+</template>
+
+<script>
+export default {
+  props: {
+    entity: {
+      type: String,
+      required: true,
+    },
+    selector: {
+      type: String,
+      default: '.page-contents__content-body',
+    },
+    linkType: {
+      type: String,
+      default: 'external',
+    },
+    action: {
+      type: String,
+      default: 'Click',
+    },
+    category: {
+      type: String,
+      default: 'In-Body Content Link',
+    },
+  },
+
+  created() {
+    const { p1events } = window;
+    if (!p1events) return;
+    p1events('trackLinks', {
+      ancestor: this.selector,
+      linkType: this.linkType,
+      handler: ({ element }) => {
+        const url = element.getAttribute('href');
+        if (!url) return null;
+        return {
+          action: 'Click',
+          category: 'In-Body Content Link',
+          entity: this.entity,
+          props: { url },
+        };
+      },
+    });
+  },
+};
+</script>
diff --git a/packages/marko-web-p1-events/components/marko.json b/packages/marko-web-p1-events/components/marko.json
index f4f9a7d0a..05a631b31 100644
--- a/packages/marko-web-p1-events/components/marko.json
+++ b/packages/marko-web-p1-events/components/marko.json
@@ -9,6 +9,23 @@
     "template": "./track-content.marko",
     "@node": "object"
   },
+  "<marko-web-p1-events-track-content-body-links>": {
+    "template": "./track-content-body-links.marko",
+    "<content>": {
+      "@id": {
+        "type": "number",
+        "required": true
+      },
+      "@type": {
+        "type": "string",
+        "required": true
+      }
+    },
+    "@selector": "string",
+    "@link-type": "string",
+    "@action": "string",
+    "@category": "string"
+  },
   "<marko-web-p1-events-track-website-section>": {
     "template": "./track-website-section.marko",
     "@node": "object"
diff --git a/packages/marko-web-p1-events/components/track-content-body-links.marko b/packages/marko-web-p1-events/components/track-content-body-links.marko
new file mode 100644
index 000000000..a6fb67c72
--- /dev/null
+++ b/packages/marko-web-p1-events/components/track-content-body-links.marko
@@ -0,0 +1,15 @@
+import { getAsObject } from "@parameter1/base-cms-object-path";
+import eventEntity from "../utils/base-content-entity";
+
+$ const content = getAsObject(input, "content");
+
+<marko-web-browser-component
+  name="P1EventsTrackContentBodyLinks"
+  props={
+    entity: eventEntity(content.id, content.type),
+    selector: input.selector,
+    linkType: input.linkType,
+    action: input.action,
+    category: input.category,
+  }
+/>