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] 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>