From 8345b3c9ff7c1e384534af93885122eb5970e676 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Thu, 1 Apr 2021 13:00:29 -0500
Subject: [PATCH] Track outbound links

---
 packages/marko-web-native-x/browser/index.js  |  2 ++
 .../browser/track-outbound-links.vue          | 26 +++++++++++++++++++
 .../marko-web-native-x/components/marko.json  |  6 +++++
 .../story/track-outbound-links.marko          | 21 +++++++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 packages/marko-web-native-x/browser/track-outbound-links.vue
 create mode 100644 packages/marko-web-native-x/components/story/track-outbound-links.marko

diff --git a/packages/marko-web-native-x/browser/index.js b/packages/marko-web-native-x/browser/index.js
index ffeb22b4d..df61d539a 100644
--- a/packages/marko-web-native-x/browser/index.js
+++ b/packages/marko-web-native-x/browser/index.js
@@ -1,8 +1,10 @@
 const NativeXTrackEndOfContent = () => import(/* webpackChunkName: "native-x-track-end-of-content" */ './track-end-of-content.vue');
 const NativeXTrackSocialShare = () => import(/* webpackChunkName: "native-x-track-social-share" */ './track-social-share.vue');
+const NativeXTrackOutboundLinks = () => import(/* webpackChunkName: "native-x-track-outbound-links" */ './track-outbound-links.vue');
 
 export default (Browser) => {
   const { EventBus } = Browser;
   Browser.register('NativeXTrackEndOfContent', NativeXTrackEndOfContent);
   Browser.register('NativeXTrackSocialShare', NativeXTrackSocialShare, { provide: { EventBus } });
+  Browser.register('NativeXTrackOutboundLinks', NativeXTrackOutboundLinks);
 };
diff --git a/packages/marko-web-native-x/browser/track-outbound-links.vue b/packages/marko-web-native-x/browser/track-outbound-links.vue
new file mode 100644
index 000000000..0e5b7c36c
--- /dev/null
+++ b/packages/marko-web-native-x/browser/track-outbound-links.vue
@@ -0,0 +1,26 @@
+<template>
+  <div />
+</template>
+
+<script>
+import { outboundLink } from '../utils/gtm-events';
+
+export default {
+  props: {
+    container: {
+      type: String,
+      required: true,
+    },
+  },
+  created() {
+    const elements = document.querySelectorAll(`${this.container} a[href]`);
+    elements.forEach((element) => {
+      const url = element.getAttribute('href');
+      element.addEventListener('click', (e) => {
+        e.preventDefault();
+        outboundLink(window, url);
+      });
+    });
+  },
+};
+</script>
diff --git a/packages/marko-web-native-x/components/marko.json b/packages/marko-web-native-x/components/marko.json
index d727b59ba..01e538760 100644
--- a/packages/marko-web-native-x/components/marko.json
+++ b/packages/marko-web-native-x/components/marko.json
@@ -51,5 +51,11 @@
     "template": "./story/track-social-share.marko",
     "@story": "object",
     "@push": "boolean"
+  },
+  "<marko-web-native-x-story-track-outbound-links>": {
+    "template": "./story/track-outbound-links.marko",
+    "@story": "object",
+    "@push": "boolean",
+    "@container": "string"
   }
 }
diff --git a/packages/marko-web-native-x/components/story/track-outbound-links.marko b/packages/marko-web-native-x/components/story/track-outbound-links.marko
new file mode 100644
index 000000000..aea05b1a6
--- /dev/null
+++ b/packages/marko-web-native-x/components/story/track-outbound-links.marko
@@ -0,0 +1,21 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import { get, getAsObject } from "@parameter1/base-cms-object-path";
+
+$ const { req } = out.global;
+$ const story = getAsObject(input, "story");
+$ const push = defaultValue(input.push, false);
+
+<if(push)>
+  <marko-web-gtm-push name="dataLayerNativeX" data={
+    story_id: story.id,
+    page_path: req.path,
+    page_title: story.title,
+    publisher_id: get(story, "publisher.id"),
+    advertiser_id: get(story, "advertiser.id"),
+    preview_mode: Boolean(req.query.preview),
+  } />
+</if>
+
+<marko-web-browser-component name="NativeXTrackOutboundLinks" props={
+  container: input.container,
+} />