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 ` ``` +Before sending any events, make sure to include the `` component. This component initializes the data layer with the story data that other events rely upon. +```marko +<${document}> + <@head> + + + <@page> + + + +``` + See examples of available events below. By default, including the `` 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; <@page> - +

${story.title}

@@ -175,7 +187,7 @@ $ const { story } = input;
This will be tracked when clicked!
- + ``` @@ -190,7 +202,7 @@ $ const { story } = input; <@page> - +

${story.title}

@@ -211,7 +223,7 @@ $ const { story } = input;

...

...

...

- + ``` 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" }, + "": { + "template": "./story/track-init.marko", + "@story": "object" + }, "": { - "template": "./story/track-page-view.marko", - "@story": "object", - "@push": "boolean" + "template": "./story/track-page-view.marko" }, "": { - "template": "./story/track-end-of-content.marko", - "@story": "object", - "@push": "boolean" + "template": "./story/track-end-of-content.marko" }, "": { - "template": "./story/track-social-share.marko", - "@story": "object", - "@push": "boolean" + "template": "./story/track-social-share.marko" }, "": { "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); - - - - - 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"); + + 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); - - - - - 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); - - - - - 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); - - - - -