Create content body link tracking component

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

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

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>

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"

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,
+  }
+/>