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 ` ``` +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 To send a page view, include the `` 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 `` component. This component requires a DOM selector in order to limit the tracking to a subset of links: +```marko +$ const { story } = input; + +<${document}> + <@head> + + + <@page> +

${story.title}

+
+ This will be tracked when clicked! +
+ + + +``` + +##### Social Sharing +If using the [marko-web-social-sharing](../marko-web-social-sharing) package, you can automatically track any share attempts by including the `` component in your story template: +```marko +$ const { story } = input; + +<${document}> + <@head> + + + <@page> + +

${story.title}

+ + + +``` + +##### End of content +To automatically track when the user reaches the bottom of the page, include the `` component below your story. This event will fire when the element comes into view: +```marko +$ const { story } = input; + +<${document}> + <@head> + + + <@page> +

${story.title}

+

...

+

...

+

...

+ + + +``` + +##### Manual/advanced implementations You can also send an event directly by using one of the available utility functions: ```vue