Make story data into an external component

parameter1 · Apr 5, 2021 · d10b926 · d10b926
1 parent 6e54fab
commit d10b926
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 87 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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={} />