Track outbound links

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

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>

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

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