This repository has been archived by the owner on Dec 9, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #62 from solocommand/native-x-container-id
NativeX story GTM/event tracking
- Loading branch information
Showing
15 changed files
with
294 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +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); | ||
| }; |
20 changes: 20 additions & 0 deletions
20
packages/marko-web-native-x/browser/track-end-of-content.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <template> | ||
| <div id="native-x-end-of-content" /> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { endOfContent } from '../utils/gtm-events'; | ||
| export default { | ||
| created() { | ||
| this.observer = new IntersectionObserver((event) => { | ||
| if (event[0].isIntersecting) { | ||
| endOfContent(); | ||
| } | ||
| }); | ||
| }, | ||
| mounted() { | ||
| this.observer.observe(this.$el); | ||
| }, | ||
| }; | ||
| </script> |
26 changes: 26 additions & 0 deletions
26
packages/marko-web-native-x/browser/track-outbound-links.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(url); | ||
| }); | ||
| }); | ||
| }, | ||
| }; | ||
| </script> |
24 changes: 24 additions & 0 deletions
24
packages/marko-web-native-x/browser/track-social-share.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(provider); | ||
| }); | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| 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"); | ||
|
|
||
| <marko-web-gtm-init | ||
| name="dataLayerNativeX" | ||
| container-id="GTM-PVHD8N5" | ||
| on=on | ||
| request-frame=requestFrame | ||
| target-tag=targetTag | ||
| start=true | ||
| push=input.push | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
packages/marko-web-native-x/components/story/track-end-of-content.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <marko-web-browser-component name="NativeXTrackEndOfContent" props={} /> |
13 changes: 13 additions & 0 deletions
13
packages/marko-web-native-x/components/story/track-init.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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), | ||
| } /> |
3 changes: 3 additions & 0 deletions
3
packages/marko-web-native-x/components/story/track-outbound-links.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <marko-web-browser-component name="NativeXTrackOutboundLinks" props={ | ||
| container: input.container, | ||
| } /> |
1 change: 1 addition & 0 deletions
1
packages/marko-web-native-x/components/story/track-page-view.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <marko-web-gtm-push name="dataLayerNativeX" data={ event: "page_load" } /> |
1 change: 1 addition & 0 deletions
1
packages/marko-web-native-x/components/story/track-social-share.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <marko-web-browser-component name="NativeXTrackSocialShare" props={} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /* eslint-disable no-undef */ | ||
| export const pageLoad = () => { | ||
| const dataLayer = window.dataLayerNativeX; | ||
| if (dataLayer) dataLayer.push({ event: 'page_load' }); | ||
| }; | ||
|
|
||
| export const outboundLink = (url) => { | ||
| const dataLayer = window.dataLayerNativeX; | ||
| if (dataLayer) dataLayer.push({ event: 'outbound_click', outbound_url: url, eventTimeout: 3000 }); | ||
| }; | ||
|
|
||
| export const share = (provider) => { | ||
| const dataLayer = window.dataLayerNativeX; | ||
| if (dataLayer) dataLayer.push({ event: 'share', social_provider: provider }); | ||
| }; | ||
|
|
||
| export const endOfContent = () => { | ||
| const dataLayer = window.dataLayerNativeX; | ||
| if (dataLayer) dataLayer.push({ event: 'scroll_to_bottom' }); | ||
| }; |