From 002ccba8fe318409ec6268f4309b5fe332cd2737 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 31 Mar 2021 13:23:03 -0500
Subject: [PATCH 01/19] Add gtmContainerId to middleware and set default value

---
 packages/marko-web-native-x/middleware/with-story.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/marko-web-native-x/middleware/with-story.js b/packages/marko-web-native-x/middleware/with-story.js
index b823a1e57..c9a4c60a9 100644
--- a/packages/marko-web-native-x/middleware/with-story.js
+++ b/packages/marko-web-native-x/middleware/with-story.js
@@ -4,6 +4,8 @@ const createClient = require('../apollo/create-client');
 const defaultFragment = require('../apollo/graphql/fragments/story');
 const buildQuery = require('../apollo/graphql/queries/story');
 
+const gtmContainerId = process.env.NATIVE_X_GTM_CONTAINER_ID || 'GTM-PVHD8N5';
+
 /**
  * @param NativeXConfiguration The NativeX config
  * @param object The Marko template to render
@@ -21,5 +23,5 @@ module.exports = ({
     variables: { input: { id } },
   });
   const story = getAsObject(result, 'data.publishedStory');
-  res.marko(template, { story });
+  res.marko(template, { story, gtmContainerId });
 });

From b0664e9f9461bd2d0d0efed91d5c585dc86773aa Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 31 Mar 2021 13:32:03 -0500
Subject: [PATCH 02/19] Pass in as a middleware option

---
 packages/marko-web-native-x/middleware/with-story.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/marko-web-native-x/middleware/with-story.js b/packages/marko-web-native-x/middleware/with-story.js
index c9a4c60a9..d2f3a6000 100644
--- a/packages/marko-web-native-x/middleware/with-story.js
+++ b/packages/marko-web-native-x/middleware/with-story.js
@@ -4,8 +4,6 @@ const createClient = require('../apollo/create-client');
 const defaultFragment = require('../apollo/graphql/fragments/story');
 const buildQuery = require('../apollo/graphql/queries/story');
 
-const gtmContainerId = process.env.NATIVE_X_GTM_CONTAINER_ID || 'GTM-PVHD8N5';
-
 /**
  * @param NativeXConfiguration The NativeX config
  * @param object The Marko template to render
@@ -15,6 +13,7 @@ module.exports = ({
   config,
   template,
   queryFragment = defaultFragment,
+  gtmContainerId = 'GTM-PVHD8N5',
 } = {}) => asyncRoute(async (req, res) => {
   const client = createClient(config.getGraphQLUri());
   const { id } = req.params;

From 3f4cc4e5c39c1f4d37097299837a70f7ced1d33f Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 31 Mar 2021 14:12:39 -0500
Subject: [PATCH 03/19] Revert "Pass in as a middleware option"

This reverts commit b0664e9f9461bd2d0d0efed91d5c585dc86773aa.
---
 packages/marko-web-native-x/middleware/with-story.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/marko-web-native-x/middleware/with-story.js b/packages/marko-web-native-x/middleware/with-story.js
index d2f3a6000..c9a4c60a9 100644
--- a/packages/marko-web-native-x/middleware/with-story.js
+++ b/packages/marko-web-native-x/middleware/with-story.js
@@ -4,6 +4,8 @@ const createClient = require('../apollo/create-client');
 const defaultFragment = require('../apollo/graphql/fragments/story');
 const buildQuery = require('../apollo/graphql/queries/story');
 
+const gtmContainerId = process.env.NATIVE_X_GTM_CONTAINER_ID || 'GTM-PVHD8N5';
+
 /**
  * @param NativeXConfiguration The NativeX config
  * @param object The Marko template to render
@@ -13,7 +15,6 @@ module.exports = ({
   config,
   template,
   queryFragment = defaultFragment,
-  gtmContainerId = 'GTM-PVHD8N5',
 } = {}) => asyncRoute(async (req, res) => {
   const client = createClient(config.getGraphQLUri());
   const { id } = req.params;

From 0768898e9fb3f4a212aed607d2b6fd5ca5016131 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 31 Mar 2021 14:12:45 -0500
Subject: [PATCH 04/19] Revert "Add gtmContainerId to middleware and set
 default value"

This reverts commit 002ccba8fe318409ec6268f4309b5fe332cd2737.
---
 packages/marko-web-native-x/middleware/with-story.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/marko-web-native-x/middleware/with-story.js b/packages/marko-web-native-x/middleware/with-story.js
index c9a4c60a9..b823a1e57 100644
--- a/packages/marko-web-native-x/middleware/with-story.js
+++ b/packages/marko-web-native-x/middleware/with-story.js
@@ -4,8 +4,6 @@ const createClient = require('../apollo/create-client');
 const defaultFragment = require('../apollo/graphql/fragments/story');
 const buildQuery = require('../apollo/graphql/queries/story');
 
-const gtmContainerId = process.env.NATIVE_X_GTM_CONTAINER_ID || 'GTM-PVHD8N5';
-
 /**
  * @param NativeXConfiguration The NativeX config
  * @param object The Marko template to render
@@ -23,5 +21,5 @@ module.exports = ({
     variables: { input: { id } },
   });
   const story = getAsObject(result, 'data.publishedStory');
-  res.marko(template, { story, gtmContainerId });
+  res.marko(template, { story });
 });

From e34b90cf6f65a494be582856fd240cc900402bcb Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 31 Mar 2021 14:18:48 -0500
Subject: [PATCH 05/19] Add GTM init component to NativeX package

---
 .../components/gtm-init.marko                 | 27 +++++++++++++++++++
 .../marko-web-native-x/components/marko.json  |  7 +++++
 packages/marko-web-native-x/package.json      |  1 +
 3 files changed, 35 insertions(+)
 create mode 100644 packages/marko-web-native-x/components/gtm-init.marko

diff --git a/packages/marko-web-native-x/components/gtm-init.marko b/packages/marko-web-native-x/components/gtm-init.marko
new file mode 100644
index 000000000..e2c68cfbc
--- /dev/null
+++ b/packages/marko-web-native-x/components/gtm-init.marko
@@ -0,0 +1,27 @@
+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 on = defaultValue(input.on, "load");
+$ const requestFrame = defaultValue(input.requestFrame, true);
+$ const targetTag = defaultValue(input.targetTag, "body");
+$ const push = {
+  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),
+  event: "page_load",
+};
+
+<marko-web-gtm-init
+  name="dataLayerNativeX"
+  container-id="GTM-PVHD8N5"
+  on=on
+  request-frame=requestFrame
+  target-tag=targetTag
+  start=true
+  push=push
+/>
diff --git a/packages/marko-web-native-x/components/marko.json b/packages/marko-web-native-x/components/marko.json
index fbf43b7f6..a7417d891 100644
--- a/packages/marko-web-native-x/components/marko.json
+++ b/packages/marko-web-native-x/components/marko.json
@@ -29,5 +29,12 @@
     "@uri": "string",
     "@id": "string",
     "@opts": "object"
+  },
+  "<marko-web-native-x-gtm-init>": {
+    "template": "./gtm-init.marko",
+    "@on": "string",
+    "@target-tag": "string",
+    "@request-frame": "boolean",
+    "@story": "object"
   }
 }
diff --git a/packages/marko-web-native-x/package.json b/packages/marko-web-native-x/package.json
index 6753062aa..5e31bd43f 100644
--- a/packages/marko-web-native-x/package.json
+++ b/packages/marko-web-native-x/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@parameter1/base-cms-marko-web-deferred-script-loader": "^2.13.0",
+    "@parameter1/base-cms-marko-web-gtm": "^2.13.1",
     "@parameter1/base-cms-object-path": "^2.5.0",
     "@parameter1/base-cms-utils": "^2.4.2",
     "@parameter1/base-cms-web-common": "^2.5.0",

From 2e6712006873f7c8e21135cc3ca28d7451905d76 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 31 Mar 2021 16:10:47 -0500
Subject: [PATCH 06/19] add gtm events

---
 .../marko-web-native-x/utils/gtm-events.js    | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 packages/marko-web-native-x/utils/gtm-events.js

diff --git a/packages/marko-web-native-x/utils/gtm-events.js b/packages/marko-web-native-x/utils/gtm-events.js
new file mode 100644
index 000000000..d17b9d6de
--- /dev/null
+++ b/packages/marko-web-native-x/utils/gtm-events.js
@@ -0,0 +1,19 @@
+export const pageLoad = (window) => {
+  const dataLayer = window.dataLayerNativeX || [];
+  dataLayer.push({ event: 'page_load' });
+};
+
+export const outboundLink = (window, url) => {
+  const dataLayer = window.dataLayerNativeX || [];
+  dataLayer.push({ event: 'outbound_click', outbound_url: url, eventTimeout: 3000 });
+};
+
+export const share = (window, provider) => {
+  const dataLayer = window.dataLayerNativeX || [];
+  dataLayer.push({ event: 'share', social_provider: provider });
+};
+
+export const endOfContent = (window) => {
+  const dataLayer = window.dataLayerNativeX || [];
+  dataLayer.push({ event: 'scroll_to_bottom' });
+};

From aded7b77d45d55dd81e486c56304164a105b68c6 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 31 Mar 2021 16:11:03 -0500
Subject: [PATCH 07/19] =?UTF-8?q?don=E2=80=99t=20initialize=20data=20layer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/marko-web-native-x/components/gtm-init.marko | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/marko-web-native-x/components/gtm-init.marko b/packages/marko-web-native-x/components/gtm-init.marko
index e2c68cfbc..a41a3c8e1 100644
--- a/packages/marko-web-native-x/components/gtm-init.marko
+++ b/packages/marko-web-native-x/components/gtm-init.marko
@@ -6,15 +6,6 @@ $ const story = getAsObject(input, "story");
 $ const on = defaultValue(input.on, "load");
 $ const requestFrame = defaultValue(input.requestFrame, true);
 $ const targetTag = defaultValue(input.targetTag, "body");
-$ const push = {
-  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),
-  event: "page_load",
-};
 
 <marko-web-gtm-init
   name="dataLayerNativeX"
@@ -23,5 +14,5 @@ $ const push = {
   request-frame=requestFrame
   target-tag=targetTag
   start=true
-  push=push
+  push=input.push
 />

From e78c14e997e93471dc980172ffdfdcbf42c4984b Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 31 Mar 2021 16:11:23 -0500
Subject: [PATCH 08/19] Add track pageview component

---
 .../marko-web-native-x/browser/.eslintrc.js   | 21 +++++++++++
 packages/marko-web-native-x/browser/index.js  |  5 +++
 .../browser/track-page-view.vue               | 37 +++++++++++++++++++
 .../marko-web-native-x/components/marko.json  |  4 ++
 .../components/story/track-page-view.marko    | 10 +++++
 5 files changed, 77 insertions(+)
 create mode 100644 packages/marko-web-native-x/browser/.eslintrc.js
 create mode 100644 packages/marko-web-native-x/browser/index.js
 create mode 100644 packages/marko-web-native-x/browser/track-page-view.vue
 create mode 100644 packages/marko-web-native-x/components/story/track-page-view.marko

diff --git a/packages/marko-web-native-x/browser/.eslintrc.js b/packages/marko-web-native-x/browser/.eslintrc.js
new file mode 100644
index 000000000..2eb0b8d9c
--- /dev/null
+++ b/packages/marko-web-native-x/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-native-x/browser/index.js b/packages/marko-web-native-x/browser/index.js
new file mode 100644
index 000000000..97a989428
--- /dev/null
+++ b/packages/marko-web-native-x/browser/index.js
@@ -0,0 +1,5 @@
+const TrackNativeXStoryPageView = () => import(/* webpackChunkName: "native-x-story-track-page-view" */ './track-page-view.vue');
+
+export default (Browser) => {
+  Browser.register('TrackNativeXStoryPageView', TrackNativeXStoryPageView);
+};
diff --git a/packages/marko-web-native-x/browser/track-page-view.vue b/packages/marko-web-native-x/browser/track-page-view.vue
new file mode 100644
index 000000000..4eec94ebb
--- /dev/null
+++ b/packages/marko-web-native-x/browser/track-page-view.vue
@@ -0,0 +1,37 @@
+<template>
+  <div />
+</template>
+
+<script>
+import { get } from '@parameter1/base-cms-object-path';
+import { pageLoad } from '../utils/gtm-events';
+
+export default {
+  props: {
+    story: {
+      type: Object,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    preview: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created() {
+    const dl = window.dataLayerNativeX || [];
+    dl.push({
+      story_id: this.story.id,
+      page_path: this.path,
+      page_title: this.story.title,
+      publisher_id: get(this.story, 'publisher.id'),
+      advertiser_id: get(this.story, 'advertiser.id'),
+      preview_mode: this.preview,
+    });
+    pageLoad(window);
+  },
+};
+</script>
diff --git a/packages/marko-web-native-x/components/marko.json b/packages/marko-web-native-x/components/marko.json
index a7417d891..492e4e0a0 100644
--- a/packages/marko-web-native-x/components/marko.json
+++ b/packages/marko-web-native-x/components/marko.json
@@ -36,5 +36,9 @@
     "@target-tag": "string",
     "@request-frame": "boolean",
     "@story": "object"
+  },
+  "<marko-web-native-x-story-track-page-view>": {
+    "template": "./story/track-page-view.marko",
+    "@story": "object"
   }
 }
diff --git a/packages/marko-web-native-x/components/story/track-page-view.marko b/packages/marko-web-native-x/components/story/track-page-view.marko
new file mode 100644
index 000000000..c16b5d53c
--- /dev/null
+++ b/packages/marko-web-native-x/components/story/track-page-view.marko
@@ -0,0 +1,10 @@
+import { getAsObject } from "@parameter1/base-cms-object-path"
+
+$ const { req } = out.global;
+$ const story = getAsObject(input, "story");
+
+<marko-web-browser-component name="TrackNativeXStoryPageView" props={
+  story: input.story,
+  path: req.path,
+  preview: Boolean(req.query.preview),
+} />

From ed2c257606c3100bddbb56a45b3b182b93d3478f Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 31 Mar 2021 16:19:52 -0500
Subject: [PATCH 09/19] Update docs

---
 packages/marko-web-native-x/README.md | 40 +++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/packages/marko-web-native-x/README.md b/packages/marko-web-native-x/README.md
index 55b8e2986..4eda5fccf 100644
--- a/packages/marko-web-native-x/README.md
+++ b/packages/marko-web-native-x/README.md
@@ -131,3 +131,43 @@ module.exports = gql`
 `;
 
 ```
+#### Event Tracking and analytics
+
+To utilize NativeX's story analytics, you must use the event tracking [utility functions](utils/gtm-events) to send events to the NativeX GTM container.
+
+The GTM container can be initialized by including the `<marko-web-native-x-gtm-init>` component within your `document`'s `<head>`:
+```marko
+<${document}>
+  <@head>
+    <marko-web-native-x-gtm-init />
+  </@head>
+</>
+```
+
+To send a page view, include the `<marko-web-native-x-story-track-page-view>` and pass the `story` property through (from the Nx middleware):
+```marko
+$ const { story } = input;
+
+<${document}>
+  <@head>
+    <marko-web-native-x-gtm-init />
+  </@head>
+  <@page>
+    <marko-web-native-x-story-track-page-view story=story />
+    <h1>${story.title}</h1>
+  </@page>
+</>
+```
+
+You can also send an event directly by using one of the available utility functions:
+```vue
+<script>
+import { endOfContent } from "@parameter1/base-cms-marko-web-native-x/utils/gtm-events";
+
+export default {
+  created() {
+    endOfContent(window);
+  }
+};
+</script>
+```

From e856ece6ac3169d39dc50f655bb900da4c47f54f Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 31 Mar 2021 16:33:01 -0500
Subject: [PATCH 10/19] Remove browser components, use gtm-push

---
 .../marko-web-native-x/browser/.eslintrc.js   | 21 -----------
 packages/marko-web-native-x/browser/index.js  |  5 ---
 .../browser/track-page-view.vue               | 37 -------------------
 .../components/story/track-page-view.marko    | 14 ++++---
 4 files changed, 9 insertions(+), 68 deletions(-)
 delete mode 100644 packages/marko-web-native-x/browser/.eslintrc.js
 delete mode 100644 packages/marko-web-native-x/browser/index.js
 delete mode 100644 packages/marko-web-native-x/browser/track-page-view.vue

diff --git a/packages/marko-web-native-x/browser/.eslintrc.js b/packages/marko-web-native-x/browser/.eslintrc.js
deleted file mode 100644
index 2eb0b8d9c..000000000
--- a/packages/marko-web-native-x/browser/.eslintrc.js
+++ /dev/null
@@ -1,21 +0,0 @@
-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-native-x/browser/index.js b/packages/marko-web-native-x/browser/index.js
deleted file mode 100644
index 97a989428..000000000
--- a/packages/marko-web-native-x/browser/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const TrackNativeXStoryPageView = () => import(/* webpackChunkName: "native-x-story-track-page-view" */ './track-page-view.vue');
-
-export default (Browser) => {
-  Browser.register('TrackNativeXStoryPageView', TrackNativeXStoryPageView);
-};
diff --git a/packages/marko-web-native-x/browser/track-page-view.vue b/packages/marko-web-native-x/browser/track-page-view.vue
deleted file mode 100644
index 4eec94ebb..000000000
--- a/packages/marko-web-native-x/browser/track-page-view.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script>
-import { get } from '@parameter1/base-cms-object-path';
-import { pageLoad } from '../utils/gtm-events';
-
-export default {
-  props: {
-    story: {
-      type: Object,
-      required: true,
-    },
-    path: {
-      type: String,
-      required: true,
-    },
-    preview: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  created() {
-    const dl = window.dataLayerNativeX || [];
-    dl.push({
-      story_id: this.story.id,
-      page_path: this.path,
-      page_title: this.story.title,
-      publisher_id: get(this.story, 'publisher.id'),
-      advertiser_id: get(this.story, 'advertiser.id'),
-      preview_mode: this.preview,
-    });
-    pageLoad(window);
-  },
-};
-</script>
diff --git a/packages/marko-web-native-x/components/story/track-page-view.marko b/packages/marko-web-native-x/components/story/track-page-view.marko
index c16b5d53c..2d0b9c26e 100644
--- a/packages/marko-web-native-x/components/story/track-page-view.marko
+++ b/packages/marko-web-native-x/components/story/track-page-view.marko
@@ -1,10 +1,14 @@
-import { getAsObject } from "@parameter1/base-cms-object-path"
+import { get, getAsObject } from "@parameter1/base-cms-object-path"
 
 $ const { req } = out.global;
 $ const story = getAsObject(input, "story");
 
-<marko-web-browser-component name="TrackNativeXStoryPageView" props={
-  story: input.story,
-  path: req.path,
-  preview: Boolean(req.query.preview),
+<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),
+  event: "page_load",
 } />

From 3461fe76725341db8adff371a0365f46b4b7b52a Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Thu, 1 Apr 2021 11:25:40 -0500
Subject: [PATCH 11/19] Add end of content tracker

---
 .../marko-web-native-x/browser/.eslintrc.js   | 22 ++++++++++
 packages/marko-web-native-x/browser/index.js  |  5 +++
 .../browser/track-end-of-content.vue          | 44 +++++++++++++++++++
 .../marko-web-native-x/components/marko.json  |  4 ++
 .../story/track-end-of-content.marko          | 10 +++++
 5 files changed, 85 insertions(+)
 create mode 100644 packages/marko-web-native-x/browser/.eslintrc.js
 create mode 100644 packages/marko-web-native-x/browser/index.js
 create mode 100644 packages/marko-web-native-x/browser/track-end-of-content.vue
 create mode 100644 packages/marko-web-native-x/components/story/track-end-of-content.marko

diff --git a/packages/marko-web-native-x/browser/.eslintrc.js b/packages/marko-web-native-x/browser/.eslintrc.js
new file mode 100644
index 000000000..c321b7395
--- /dev/null
+++ b/packages/marko-web-native-x/browser/.eslintrc.js
@@ -0,0 +1,22 @@
+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,
+      },
+    }],
+    'vue/no-v-html': 'off',
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};
diff --git a/packages/marko-web-native-x/browser/index.js b/packages/marko-web-native-x/browser/index.js
new file mode 100644
index 000000000..6c9b36bc6
--- /dev/null
+++ b/packages/marko-web-native-x/browser/index.js
@@ -0,0 +1,5 @@
+const NativeXTrackEndOfContent = () => import(/* webpackChunkName: "native-x-track-end-of-content" */ './track-end-of-content.vue');
+
+export default (Browser) => {
+  Browser.register('NativeXTrackEndOfContent', NativeXTrackEndOfContent);
+};
diff --git a/packages/marko-web-native-x/browser/track-end-of-content.vue b/packages/marko-web-native-x/browser/track-end-of-content.vue
new file mode 100644
index 000000000..244668a1a
--- /dev/null
+++ b/packages/marko-web-native-x/browser/track-end-of-content.vue
@@ -0,0 +1,44 @@
+<template>
+  <div id="native-x-end-of-content" />
+</template>
+
+<script>
+import { get } from '@parameter1/base-cms-object-path';
+import { endOfContent } from '../utils/gtm-events';
+
+export default {
+  props: {
+    story: {
+      type: Object,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    preview: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created() {
+    this.observer = new IntersectionObserver((event) => {
+      if (event[0].isIntersecting) {
+        endOfContent(window);
+      }
+    });
+    const dl = window.dataLayerNativeX || [];
+    dl.push({
+      story_id: this.story.id,
+      page_path: this.path,
+      page_title: this.story.title,
+      publisher_id: get(this.story, 'publisher.id'),
+      advertiser_id: get(this.story, 'advertiser.id'),
+      preview_mode: this.preview,
+    });
+  },
+  mounted() {
+    this.observer.observe(this.$el);
+  },
+};
+</script>
diff --git a/packages/marko-web-native-x/components/marko.json b/packages/marko-web-native-x/components/marko.json
index 492e4e0a0..da6d54b4b 100644
--- a/packages/marko-web-native-x/components/marko.json
+++ b/packages/marko-web-native-x/components/marko.json
@@ -40,5 +40,9 @@
   "<marko-web-native-x-story-track-page-view>": {
     "template": "./story/track-page-view.marko",
     "@story": "object"
+  },
+  "<marko-web-native-x-story-track-end-of-content>": {
+    "template": "./story/track-end-of-content.marko",
+    "@story": "object"
   }
 }
diff --git a/packages/marko-web-native-x/components/story/track-end-of-content.marko b/packages/marko-web-native-x/components/story/track-end-of-content.marko
new file mode 100644
index 000000000..c992d39cc
--- /dev/null
+++ b/packages/marko-web-native-x/components/story/track-end-of-content.marko
@@ -0,0 +1,10 @@
+import { getAsObject } from "@parameter1/base-cms-object-path"
+
+$ const { req } = out.global;
+$ const story = getAsObject(input, "story");
+
+<marko-web-browser-component name="NativeXTrackEndOfContent" props={
+  story: input.story,
+  path: req.path,
+  preview: Boolean(req.query.preview),
+} />

From 54db8fe89cffad315b15c2151aaeec4e03d7323b Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Thu, 1 Apr 2021 12:36:52 -0500
Subject: [PATCH 12/19] Add social share component

---
 packages/marko-web-native-x/browser/index.js  |  3 +++
 .../browser/track-social-share.vue            | 24 +++++++++++++++++++
 .../components/story/track-social-share.marko | 19 +++++++++++++++
 3 files changed, 46 insertions(+)
 create mode 100644 packages/marko-web-native-x/browser/track-social-share.vue
 create mode 100644 packages/marko-web-native-x/components/story/track-social-share.marko

diff --git a/packages/marko-web-native-x/browser/index.js b/packages/marko-web-native-x/browser/index.js
index 6c9b36bc6..ffeb22b4d 100644
--- a/packages/marko-web-native-x/browser/index.js
+++ b/packages/marko-web-native-x/browser/index.js
@@ -1,5 +1,8 @@
 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');
 
 export default (Browser) => {
+  const { EventBus } = Browser;
   Browser.register('NativeXTrackEndOfContent', NativeXTrackEndOfContent);
+  Browser.register('NativeXTrackSocialShare', NativeXTrackSocialShare, { provide: { EventBus } });
 };
diff --git a/packages/marko-web-native-x/browser/track-social-share.vue b/packages/marko-web-native-x/browser/track-social-share.vue
new file mode 100644
index 000000000..bb5e2617f
--- /dev/null
+++ b/packages/marko-web-native-x/browser/track-social-share.vue
@@ -0,0 +1,24 @@
+<template>
+  <div />
+</template>
+
+<script>
+import { get } from '@parameter1/base-cms-object-path';
+import { share } from '../utils/gtm-events';
+
+export default {
+  inject: ['EventBus'],
+  props: {
+    eventName: {
+      type: String,
+      default: 'social-share-open',
+    },
+  },
+  created() {
+    this.EventBus.$on(this.eventName, (event) => {
+      const provider = get(event, 'provider.name');
+      share(window, provider);
+    });
+  },
+};
+</script>
diff --git a/packages/marko-web-native-x/components/story/track-social-share.marko b/packages/marko-web-native-x/components/story/track-social-share.marko
new file mode 100644
index 000000000..d1c57b615
--- /dev/null
+++ b/packages/marko-web-native-x/components/story/track-social-share.marko
@@ -0,0 +1,19 @@
+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="NativeXTrackSocialShare" props={} />

From da4944f7a3df731c8ec7912fb70283adde773880 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Thu, 1 Apr 2021 12:37:31 -0500
Subject: [PATCH 13/19] Move data layer manipulation to marko components

---
 .../browser/track-end-of-content.vue          | 24 ------------------
 .../marko-web-native-x/components/marko.json  | 11 ++++++--
 .../story/track-end-of-content.marko          | 21 +++++++++++-----
 .../components/story/track-page-view.marko    | 25 +++++++++++--------
 4 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/packages/marko-web-native-x/browser/track-end-of-content.vue b/packages/marko-web-native-x/browser/track-end-of-content.vue
index 244668a1a..a07427ea8 100644
--- a/packages/marko-web-native-x/browser/track-end-of-content.vue
+++ b/packages/marko-web-native-x/browser/track-end-of-content.vue
@@ -3,39 +3,15 @@
 </template>
 
 <script>
-import { get } from '@parameter1/base-cms-object-path';
 import { endOfContent } from '../utils/gtm-events';
 
 export default {
-  props: {
-    story: {
-      type: Object,
-      required: true,
-    },
-    path: {
-      type: String,
-      required: true,
-    },
-    preview: {
-      type: Boolean,
-      default: false,
-    },
-  },
   created() {
     this.observer = new IntersectionObserver((event) => {
       if (event[0].isIntersecting) {
         endOfContent(window);
       }
     });
-    const dl = window.dataLayerNativeX || [];
-    dl.push({
-      story_id: this.story.id,
-      page_path: this.path,
-      page_title: this.story.title,
-      publisher_id: get(this.story, 'publisher.id'),
-      advertiser_id: get(this.story, 'advertiser.id'),
-      preview_mode: this.preview,
-    });
   },
   mounted() {
     this.observer.observe(this.$el);
diff --git a/packages/marko-web-native-x/components/marko.json b/packages/marko-web-native-x/components/marko.json
index da6d54b4b..d727b59ba 100644
--- a/packages/marko-web-native-x/components/marko.json
+++ b/packages/marko-web-native-x/components/marko.json
@@ -39,10 +39,17 @@
   },
   "<marko-web-native-x-story-track-page-view>": {
     "template": "./story/track-page-view.marko",
-    "@story": "object"
+    "@story": "object",
+    "@push": "boolean"
   },
   "<marko-web-native-x-story-track-end-of-content>": {
     "template": "./story/track-end-of-content.marko",
-    "@story": "object"
+    "@story": "object",
+    "@push": "boolean"
+  },
+  "<marko-web-native-x-story-track-social-share>": {
+    "template": "./story/track-social-share.marko",
+    "@story": "object",
+    "@push": "boolean"
   }
 }
diff --git a/packages/marko-web-native-x/components/story/track-end-of-content.marko b/packages/marko-web-native-x/components/story/track-end-of-content.marko
index c992d39cc..4d7bb4d04 100644
--- a/packages/marko-web-native-x/components/story/track-end-of-content.marko
+++ b/packages/marko-web-native-x/components/story/track-end-of-content.marko
@@ -1,10 +1,19 @@
-import { getAsObject } from "@parameter1/base-cms-object-path"
+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);
 
-<marko-web-browser-component name="NativeXTrackEndOfContent" props={
-  story: input.story,
-  path: req.path,
-  preview: Boolean(req.query.preview),
-} />
+<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="NativeXTrackEndOfContent" props={} />
diff --git a/packages/marko-web-native-x/components/story/track-page-view.marko b/packages/marko-web-native-x/components/story/track-page-view.marko
index 2d0b9c26e..30db59cb9 100644
--- a/packages/marko-web-native-x/components/story/track-page-view.marko
+++ b/packages/marko-web-native-x/components/story/track-page-view.marko
@@ -1,14 +1,19 @@
-import { get, getAsObject } from "@parameter1/base-cms-object-path"
+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, true);
 
-<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),
-  event: "page_load",
-} />
+<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-gtm-push name="dataLayerNativeX" data={ event: "page_load" } />

From 8587119ccaf7c9db2d19d8322d73f53ffc99f659 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Thu, 1 Apr 2021 12:41:43 -0500
Subject: [PATCH 14/19] Only push events if the datalayer exists

---
 packages/marko-web-native-x/utils/gtm-events.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/marko-web-native-x/utils/gtm-events.js b/packages/marko-web-native-x/utils/gtm-events.js
index d17b9d6de..c523d4835 100644
--- a/packages/marko-web-native-x/utils/gtm-events.js
+++ b/packages/marko-web-native-x/utils/gtm-events.js
@@ -1,19 +1,19 @@
 export const pageLoad = (window) => {
-  const dataLayer = window.dataLayerNativeX || [];
-  dataLayer.push({ event: 'page_load' });
+  const dataLayer = window.dataLayerNativeX;
+  if (dataLayer) dataLayer.push({ event: 'page_load' });
 };
 
 export const outboundLink = (window, url) => {
-  const dataLayer = window.dataLayerNativeX || [];
-  dataLayer.push({ event: 'outbound_click', outbound_url: url, eventTimeout: 3000 });
+  const dataLayer = window.dataLayerNativeX;
+  if (dataLayer) dataLayer.push({ event: 'outbound_click', outbound_url: url, eventTimeout: 3000 });
 };
 
 export const share = (window, provider) => {
-  const dataLayer = window.dataLayerNativeX || [];
-  dataLayer.push({ event: 'share', social_provider: provider });
+  const dataLayer = window.dataLayerNativeX;
+  if (dataLayer) dataLayer.push({ event: 'share', social_provider: provider });
 };
 
 export const endOfContent = (window) => {
-  const dataLayer = window.dataLayerNativeX || [];
-  dataLayer.push({ event: 'scroll_to_bottom' });
+  const dataLayer = window.dataLayerNativeX;
+  if (dataLayer) dataLayer.push({ event: 'scroll_to_bottom' });
 };

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

From 7673a58b5ed75427e20f6eb77aed705c8f68cb7c Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Thu, 1 Apr 2021 13:15:17 -0500
Subject: [PATCH 16/19] Update docs

---
 packages/marko-web-native-x/README.md | 58 +++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/packages/marko-web-native-x/README.md b/packages/marko-web-native-x/README.md
index 4eda5fccf..8734ef694 100644
--- a/packages/marko-web-native-x/README.md
+++ b/packages/marko-web-native-x/README.md
@@ -143,7 +143,9 @@ The GTM container can be initialized by including the `<marko-web-native-x-gtm-i
   </@head>
 </>
 ```
+See examples of available events below. By default, including the `<marko-web-native-x-story-track-page-view>` component will populate the datalayer with the story details. To disable this behavior, send the `push=false` parameter when including the component. All other story components assume this has already happened -- to force population of the data layer, send the `push=true` parameter when including the relevant component.
 
+##### Page View
 To send a page view, include the `<marko-web-native-x-story-track-page-view>` and pass the `story` property through (from the Nx middleware):
 ```marko
 $ const { story } = input;
@@ -159,6 +161,62 @@ $ const { story } = input;
 </>
 ```
 
+##### Outbound Links
+To automatically track outbound links, include the `<marko-web-native-x-story-track-outbound-links>` component. This component requires a DOM selector in order to limit the tracking to a subset of links:
+```marko
+$ const { story } = input;
+
+<${document}>
+  <@head>
+    <marko-web-native-x-gtm-init />
+  </@head>
+  <@page>
+    <h1>${story.title}</h1>
+    <div id="my-story-body">
+      <a href="https://google.com">This will be tracked when clicked!</a>
+    </div>
+    <marko-web-native-x-story-track-outbound-links story=story container="#my-story-body" />
+  </@page>
+</>
+```
+
+##### Social Sharing
+If using the [marko-web-social-sharing](../marko-web-social-sharing) package, you can automatically track any share attempts by including the `<marko-web-native-x-story-track-social-share>` component in your story template:
+```marko
+$ const { story } = input;
+
+<${document}>
+  <@head>
+    <marko-web-native-x-gtm-init />
+  </@head>
+  <@page>
+    <marko-web-native-x-story-track-social-share story=story />
+    <h1>${story.title}</h1>
+    <marko-web-social-sharing path=story.url providers=["facebook", "email"] />
+  </@page>
+</>
+```
+
+##### End of content
+To automatically track when the user reaches the bottom of the page, include the `<marko-web-native-x-story-track-end-of-content>` component below your story. This event will fire when the element comes into view:
+```marko
+$ const { story } = input;
+
+<${document}>
+  <@head>
+    <marko-web-native-x-gtm-init />
+  </@head>
+  <@page>
+    <h1>${story.title}</h1>
+    <p>...</p>
+    <p>...</p>
+    <p>...</p>
+    <marko-web-native-x-story-track-end-of-content story=story />
+  </@page>
+</>
+```
+
+##### Manual/advanced implementations
 You can also send an event directly by using one of the available utility functions:
 ```vue
 <script>

From 98187f7d0dd02b8f5bf36f902babc4772d2da3da Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Fri, 2 Apr 2021 10:17:27 -0500
Subject: [PATCH 17/19] =?UTF-8?q?Don=E2=80=99t=20pass=20in=20the=20window?=
 =?UTF-8?q?=20global?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/marko-web-native-x/utils/gtm-events.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/marko-web-native-x/utils/gtm-events.js b/packages/marko-web-native-x/utils/gtm-events.js
index c523d4835..8d3f605bd 100644
--- a/packages/marko-web-native-x/utils/gtm-events.js
+++ b/packages/marko-web-native-x/utils/gtm-events.js
@@ -1,19 +1,20 @@
-export const pageLoad = (window) => {
+/* eslint-disable no-undef */
+export const pageLoad = () => {
   const dataLayer = window.dataLayerNativeX;
   if (dataLayer) dataLayer.push({ event: 'page_load' });
 };
 
-export const outboundLink = (window, url) => {
+export const outboundLink = (url) => {
   const dataLayer = window.dataLayerNativeX;
   if (dataLayer) dataLayer.push({ event: 'outbound_click', outbound_url: url, eventTimeout: 3000 });
 };
 
-export const share = (window, provider) => {
+export const share = (provider) => {
   const dataLayer = window.dataLayerNativeX;
   if (dataLayer) dataLayer.push({ event: 'share', social_provider: provider });
 };
 
-export const endOfContent = (window) => {
+export const endOfContent = () => {
   const dataLayer = window.dataLayerNativeX;
   if (dataLayer) dataLayer.push({ event: 'scroll_to_bottom' });
 };

From 6e54fab4a7de77ac885fbd75a3853f33a0a516b9 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Fri, 2 Apr 2021 10:18:56 -0500
Subject: [PATCH 18/19] =?UTF-8?q?don=E2=80=99t=20pass=20window=20through?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/marko-web-native-x/README.md                        | 2 +-
 packages/marko-web-native-x/browser/track-end-of-content.vue | 2 +-
 packages/marko-web-native-x/browser/track-outbound-links.vue | 2 +-
 packages/marko-web-native-x/browser/track-social-share.vue   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/marko-web-native-x/README.md b/packages/marko-web-native-x/README.md
index 8734ef694..0f3cfa04a 100644
--- a/packages/marko-web-native-x/README.md
+++ b/packages/marko-web-native-x/README.md
@@ -224,7 +224,7 @@ import { endOfContent } from "@parameter1/base-cms-marko-web-native-x/utils/gtm-
 
 export default {
   created() {
-    endOfContent(window);
+    endOfContent();
   }
 };
 </script>
diff --git a/packages/marko-web-native-x/browser/track-end-of-content.vue b/packages/marko-web-native-x/browser/track-end-of-content.vue
index a07427ea8..92c7613ea 100644
--- a/packages/marko-web-native-x/browser/track-end-of-content.vue
+++ b/packages/marko-web-native-x/browser/track-end-of-content.vue
@@ -9,7 +9,7 @@ export default {
   created() {
     this.observer = new IntersectionObserver((event) => {
       if (event[0].isIntersecting) {
-        endOfContent(window);
+        endOfContent();
       }
     });
   },
diff --git a/packages/marko-web-native-x/browser/track-outbound-links.vue b/packages/marko-web-native-x/browser/track-outbound-links.vue
index 0e5b7c36c..b10680583 100644
--- a/packages/marko-web-native-x/browser/track-outbound-links.vue
+++ b/packages/marko-web-native-x/browser/track-outbound-links.vue
@@ -18,7 +18,7 @@ export default {
       const url = element.getAttribute('href');
       element.addEventListener('click', (e) => {
         e.preventDefault();
-        outboundLink(window, url);
+        outboundLink(url);
       });
     });
   },
diff --git a/packages/marko-web-native-x/browser/track-social-share.vue b/packages/marko-web-native-x/browser/track-social-share.vue
index bb5e2617f..ed4d79886 100644
--- a/packages/marko-web-native-x/browser/track-social-share.vue
+++ b/packages/marko-web-native-x/browser/track-social-share.vue
@@ -17,7 +17,7 @@ export default {
   created() {
     this.EventBus.$on(this.eventName, (event) => {
       const provider = get(event, 'provider.name');
-      share(window, provider);
+      share(provider);
     });
   },
 };

From d10b9265e93305424262d715a167972d0f92e8a3 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Mon, 5 Apr 2021 09:40:42 -0500
Subject: [PATCH 19/19] Make story data into an external component

---
 packages/marko-web-native-x/README.md         | 20 +++++++++++++++----
 .../marko-web-native-x/components/marko.json  | 18 +++++++----------
 .../story/track-end-of-content.marko          | 18 -----------------
 .../components/story/track-init.marko         | 13 ++++++++++++
 .../story/track-outbound-links.marko          | 18 -----------------
 .../components/story/track-page-view.marko    | 18 -----------------
 .../components/story/track-social-share.marko | 18 -----------------
 7 files changed, 36 insertions(+), 87 deletions(-)
 create mode 100644 packages/marko-web-native-x/components/story/track-init.marko

diff --git a/packages/marko-web-native-x/README.md b/packages/marko-web-native-x/README.md
index 0f3cfa04a..d53ee48f9 100644
--- a/packages/marko-web-native-x/README.md
+++ b/packages/marko-web-native-x/README.md
@@ -143,6 +143,18 @@ The GTM container can be initialized by including the `<marko-web-native-x-gtm-i
   </@head>
 </>
 ```
+Before sending any events, make sure to include the `<marko-web-native-x-story-track-init>` component. This component initializes the data layer with the story data that other events rely upon.
+```marko
+<${document}>
+  <@head>
+    <marko-web-native-x-gtm-init />
+  </@head>
+  <@page>
+    <marko-web-native-x-story-track-init story=story />
+  </@page>
+</>
+```
+
 See examples of available events below. By default, including the `<marko-web-native-x-story-track-page-view>` component will populate the datalayer with the story details. To disable this behavior, send the `push=false` parameter when including the component. All other story components assume this has already happened -- to force population of the data layer, send the `push=true` parameter when including the relevant component.
 
 ##### Page View
@@ -155,7 +167,7 @@ $ const { story } = input;
     <marko-web-native-x-gtm-init />
   </@head>
   <@page>
-    <marko-web-native-x-story-track-page-view story=story />
+    <marko-web-native-x-story-track-page-view />
     <h1>${story.title}</h1>
   </@page>
 </>
@@ -175,7 +187,7 @@ $ const { story } = input;
     <div id="my-story-body">
       <a href="https://google.com">This will be tracked when clicked!</a>
     </div>
-    <marko-web-native-x-story-track-outbound-links story=story container="#my-story-body" />
+    <marko-web-native-x-story-track-outbound-links container="#my-story-body" />
   </@page>
 </>
 ```
@@ -190,7 +202,7 @@ $ const { story } = input;
     <marko-web-native-x-gtm-init />
   </@head>
   <@page>
-    <marko-web-native-x-story-track-social-share story=story />
+    <marko-web-native-x-story-track-social-share />
     <h1>${story.title}</h1>
     <marko-web-social-sharing path=story.url providers=["facebook", "email"] />
   </@page>
@@ -211,7 +223,7 @@ $ const { story } = input;
     <p>...</p>
     <p>...</p>
     <p>...</p>
-    <marko-web-native-x-story-track-end-of-content story=story />
+    <marko-web-native-x-story-track-end-of-content />
   </@page>
 </>
 ```
diff --git a/packages/marko-web-native-x/components/marko.json b/packages/marko-web-native-x/components/marko.json
index 01e538760..05d8fb736 100644
--- a/packages/marko-web-native-x/components/marko.json
+++ b/packages/marko-web-native-x/components/marko.json
@@ -37,25 +37,21 @@
     "@request-frame": "boolean",
     "@story": "object"
   },
+  "<marko-web-native-x-story-track-init>": {
+    "template": "./story/track-init.marko",
+    "@story": "object"
+  },
   "<marko-web-native-x-story-track-page-view>": {
-    "template": "./story/track-page-view.marko",
-    "@story": "object",
-    "@push": "boolean"
+    "template": "./story/track-page-view.marko"
   },
   "<marko-web-native-x-story-track-end-of-content>": {
-    "template": "./story/track-end-of-content.marko",
-    "@story": "object",
-    "@push": "boolean"
+    "template": "./story/track-end-of-content.marko"
   },
   "<marko-web-native-x-story-track-social-share>": {
-    "template": "./story/track-social-share.marko",
-    "@story": "object",
-    "@push": "boolean"
+    "template": "./story/track-social-share.marko"
   },
   "<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-end-of-content.marko b/packages/marko-web-native-x/components/story/track-end-of-content.marko
index 4d7bb4d04..42226cc2c 100644
--- a/packages/marko-web-native-x/components/story/track-end-of-content.marko
+++ b/packages/marko-web-native-x/components/story/track-end-of-content.marko
@@ -1,19 +1 @@
-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="NativeXTrackEndOfContent" props={} />
diff --git a/packages/marko-web-native-x/components/story/track-init.marko b/packages/marko-web-native-x/components/story/track-init.marko
new file mode 100644
index 000000000..f5d5c064f
--- /dev/null
+++ b/packages/marko-web-native-x/components/story/track-init.marko
@@ -0,0 +1,13 @@
+import { get, getAsObject } from "@parameter1/base-cms-object-path";
+
+$ const { req } = out.global;
+$ const story = getAsObject(input, "story");
+
+<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),
+} />
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
index aea05b1a6..0f8b1c659 100644
--- a/packages/marko-web-native-x/components/story/track-outbound-links.marko
+++ b/packages/marko-web-native-x/components/story/track-outbound-links.marko
@@ -1,21 +1,3 @@
-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,
 } />
diff --git a/packages/marko-web-native-x/components/story/track-page-view.marko b/packages/marko-web-native-x/components/story/track-page-view.marko
index 30db59cb9..86b9130bc 100644
--- a/packages/marko-web-native-x/components/story/track-page-view.marko
+++ b/packages/marko-web-native-x/components/story/track-page-view.marko
@@ -1,19 +1 @@
-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, true);
-
-<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-gtm-push name="dataLayerNativeX" data={ event: "page_load" } />
diff --git a/packages/marko-web-native-x/components/story/track-social-share.marko b/packages/marko-web-native-x/components/story/track-social-share.marko
index d1c57b615..729767082 100644
--- a/packages/marko-web-native-x/components/story/track-social-share.marko
+++ b/packages/marko-web-native-x/components/story/track-social-share.marko
@@ -1,19 +1 @@
-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="NativeXTrackSocialShare" props={} />