@mindful-web/marko-web-gtm 1.0.0

package/.eslintignore

@@ -0,0 +1 @@
+*.marko.js

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Parameter1 LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# Mindful Web Marko Web GTM Components
+Google Tag Manager components for Mindful Web/Marko websites.
+
+## Installation
+Once you have a GTM container ID, you can enable GTM in your mindful-web-marko-web application. To do so, include this package and add the following two tags to your app:
+
+## Usage: Marko
+
+### `marko-web-gtm-init`
+This component initializes the GTM container(s) specified, and allows a standard set of inputs to be used for projects utilizing this package solo and for projects using the `marko-web-deferred-script-loader` package.
+
+To load GTM normally, include the following calls, specifying only your container id(s) and any of the optional arguments: `start`, `push`:
+```marko
+<marko-web-document ...input>
+  <@head>
+    <marko-web-gtm-init container-id="GTM-XXXXXX" start=true />
+    <${input.head} />
+  </@head>
+  <@above-wrapper>
+    <marko-web-gtm-noscript container-id="GTM-XXXXXX" />
+  </@above-wrapper>
+</marko-web-document>
+```
+
+To defer GTM, ensure the `marko-web-deferred-script-loader` package is installed and enabled, and then specify the relevant `on`, `request-frame`, and `target-tag` parameters along with your component call.
+```marko
+<marko-web-document ...input>
+  <@head>
+    <marko-web-gtm-init
+      container-id="GTM-XXXXXX"
+      start=true
+      on="load"
+      request-frame=true
+      target-tag="body"
+    />
+    <${input.head} />
+  </@head>
+  <@above-wrapper>
+    <marko-web-gtm-noscript container-id="GTM-XXXXXX" />
+  </@above-wrapper>
+</marko-web-document>
+```
+
+To specify an alternative datalayer name, use the `name="fooLayer"` parameter1.
+
+To pre-push data to the datalayer, you can use the `push={ foo: 'bar' }` parameter. See the `marko-web-gtm-push` component for more details.
+
+To automatically start your containers, send the `start=true` parameter with your `init` component. Otherwise, you must manually start the GTM container with the `marko-web-gtm-start` component.
+
+### `marko-web-gtm-noscript`
+
+### `marko-web-gtm-start`
+### `marko-web-gtm-push`
+### `marko-web-gtm-slot`
+### `marko-web-gtm-track-bus-event`
+### `marko-web-gtm-track-inview-event`
+### `marko-web-gtm-track-load-more`
+
+## Usage: Vue/Browser
+
+### `track-bus-event`
+
+### `track-in-view-event`
+
+### `track-load-more`

package/browser/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('../../../eslintrc.browser');

package/browser/index.js

@@ -0,0 +1,14 @@
+const GTMTrackInViewEvent = () => import(/* webpackChunkName: "gtm-track-in-view-event" */ './track-in-view-event.vue');
+const GTMTrackLoadMore = () => import(/* webpackChunkName: "gtm-track-load-more" */ './track-load-more.vue');
+const GTMTrackBusEvent = () => import(/* webpackChunkName: "gtm-track-bus-event" */ './track-bus-event.vue');
+
+export default (Browser) => {
+  const { EventBus } = Browser;
+  Browser.register('GTMTrackInViewEvent', GTMTrackInViewEvent);
+  Browser.register('GTMTrackLoadMore', GTMTrackLoadMore, {
+    provide: { EventBus },
+  });
+  Browser.register('GTMTrackBusEvent', GTMTrackBusEvent, {
+    provide: { EventBus },
+  });
+};

package/browser/track-bus-event.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="marko-web-gtm-track-bus-event"
+    :data-on="on"
+    :data-event-name="eventName"
+    :data-layer-name="layerName"
+    style="display: none;"
+  />
+</template>
+
+<script>
+export default {
+  inject: ['EventBus'],
+  props: {
+    /**
+     * The name of the data layer.
+     */
+    layerName: {
+      type: String,
+      default: 'dataLayer',
+    },
+
+    /**
+     * The EventBus event name.
+     */
+    on: {
+      type: String,
+      required: true,
+    },
+
+    /**
+     * The event name to send to GTM.
+     */
+    eventName: {
+      type: String,
+      default: null,
+    },
+
+    /**
+     * Whether to clear the data layer after firing the event,
+     */
+    clearData: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created() {
+    const { on } = this;
+    if (on) {
+      const eventName = this.eventName || on;
+      this.EventBus.$on(on, (data) => {
+        const dataLayer = window[this.layerName];
+        if (dataLayer) {
+          dataLayer.push({ [eventName]: data, event: eventName });
+          if (this.clearData) dataLayer.push({ [eventName]: undefined, event: undefined });
+        }
+      });
+    }
+  },
+};
+</script>

package/browser/track-in-view-event.vue

@@ -0,0 +1,45 @@
+<template>
+  <div :id="elementId" class="lazyload" :data-expand="expand" />
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: 'dataLayer',
+    },
+    event: {
+      type: String,
+      required: true,
+    },
+    expand: {
+      type: Number,
+      default: -100,
+    },
+    vars: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    elementId() {
+      return `gtm-track-in-view-event-${Date.now()}`;
+    },
+  },
+  created() {
+    document.addEventListener('lazybeforeunveil', this.lazyload.bind(this));
+  },
+  methods: {
+    lazyload({ target }) {
+      if (target.id === this.elementId) this.track();
+    },
+    track() {
+      const dataLayer = window[this.name];
+      if (!dataLayer) return;
+      const data = { event: this.event, ...this.vars };
+      dataLayer.push(data);
+    },
+  },
+};
+</script>

package/browser/track-load-more.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="marko-web-gtm-track-load-more" />
+</template>
+
+<script>
+export default {
+  inject: ['EventBus'],
+  props: {
+    name: {
+      type: String,
+      default: 'dataLayer',
+    },
+    event: {
+      type: String,
+      default: 'page_load',
+    },
+  },
+  created() {
+    this.EventBus.$on('load-more-in-view', ({ data }) => {
+      const dataLayer = window[this.name];
+      if (dataLayer) dataLayer.push({ ...data, event: this.event });
+    });
+  },
+};
+</script>

package/components/context/content.marko

@@ -0,0 +1,97 @@
+import gql from "graphql-tag";
+import { isFunction, warn } from "@mindful-web/utils";
+import { contentBuilder } from "../../context";
+
+$ const { req } = out.global;
+$ const { id } = input;
+$ const builder = isFunction(input.builder) ? input.builder : contentBuilder;
+
+$ const queryFragment = input.queryFragment || gql`
+fragment ContentContextFragment on Content {
+  id
+  type
+  name
+  labels
+  siteContext {
+    path
+  }
+  published
+  createdBy {
+    id
+    username
+    firstName
+    lastName
+  }
+  company {
+    id
+    name
+  }
+  primarySection {
+    id
+    name
+    alias
+    fullName
+    hierarchy {
+      id
+      name
+      alias
+    }
+  }
+  taxonomy {
+    edges {
+      node {
+        id
+        type
+        name
+        fullName
+      }
+    }
+  }
+  userRegistration {
+    isCurrentlyRequired
+    accessLevels
+  }
+  ... on Authorable {
+    authors {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+  websiteSchedules {
+    section {
+      id
+      name
+    }
+  }
+   emailSchedules {
+      id
+      deploymentDate
+      newsletter {
+        id
+        name
+      }
+    }
+    magazineSchedules {
+      id
+      issue {
+        id
+        name
+        mailDate(input: {format:"MM/DD/YYYY"})
+      }
+    }
+}
+`;
+
+<if(id)>
+  <marko-web-query|{ node }| name="content" params={ id, queryFragment }>
+    $ const context = builder({ type: "content", obj: node, req });
+    <${input.renderBody} context=context />
+  </marko-web-query>
+</if>
+<else>
+  $ warn('Unable to create GTM content context: no content id was provided.');
+</else>

package/components/context/content.marko.js

@@ -0,0 +1,144 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-gtm$1.0.0/components/context/content.marko",
+    marko_component = require("./content.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_gql = require("graphql-tag"),
+    gql = module_gql.default || module_gql,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    isFunction = module_utils_module.isFunction,
+    warn = module_utils_module.warn,
+    module_context_module = require("../../context"),
+    context_module = module_context_module.default || module_context_module,
+    contentBuilder = module_context_module.contentBuilder,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_query_template = require("@mindful-web/marko-core/components/queries/index.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_query_tag = marko_loadTag(marko_web_query_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { req } = out.global;
+
+  const { id } = input;
+
+  const builder = isFunction(input.builder) ? input.builder : contentBuilder;
+
+  const queryFragment = input.queryFragment || gql`
+fragment ContentContextFragment on Content {
+  id
+  type
+  name
+  labels
+  siteContext {
+    path
+  }
+  published
+  createdBy {
+    id
+    username
+    firstName
+    lastName
+  }
+  company {
+    id
+    name
+  }
+  primarySection {
+    id
+    name
+    alias
+    fullName
+    hierarchy {
+      id
+      name
+      alias
+    }
+  }
+  taxonomy {
+    edges {
+      node {
+        id
+        type
+        name
+        fullName
+      }
+    }
+  }
+  userRegistration {
+    isCurrentlyRequired
+    accessLevels
+  }
+  ... on Authorable {
+    authors {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+  websiteSchedules {
+    section {
+      id
+      name
+    }
+  }
+   emailSchedules {
+      id
+      deploymentDate
+      newsletter {
+        id
+        name
+      }
+    }
+    magazineSchedules {
+      id
+      issue {
+        id
+        name
+        mailDate(input: {format:"MM/DD/YYYY"})
+      }
+    }
+}
+`;
+
+  if (id) {
+    marko_web_query_tag({
+        collapsible: true,
+        name: "content",
+        params: {
+            id: id,
+            queryFragment: queryFragment
+          },
+        renderBody: function(out, { node }) {
+          const context = builder({ type: "content", obj: node, req });
+
+          marko_dynamicTag(out, input.renderBody, function() {
+            return {
+                context: context
+              };
+          }, null, null, null, __component, "1");
+        }
+      }, out, __component, "0");
+  } else {
+    warn('Unable to create GTM content context: no content id was provided.');
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-gtm$1.0.0/components/context/content.marko",
+    component: "./content.marko",
+    tags: [
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/context/default.marko

@@ -0,0 +1,9 @@
+import { isFunction, warn } from "@mindful-web/utils";
+import { defaultBuilder } from "../../context";
+
+$ const { req } = out.global;
+$ const builder = isFunction(input.builder) ? input.builder : defaultBuilder;
+$ const type = input.type || "page";
+
+$ const context = builder({ type, obj: input.obj, req });
+<${input.renderBody} context=context />

package/components/context/default.marko.js

@@ -0,0 +1,41 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-gtm$1.0.0/components/context/default.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    isFunction = module_utils_module.isFunction,
+    warn = module_utils_module.warn,
+    module_context_module = require("../../context"),
+    context_module = module_context_module.default || module_context_module,
+    defaultBuilder = module_context_module.defaultBuilder,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { req } = out.global;
+
+  const builder = isFunction(input.builder) ? input.builder : defaultBuilder;
+
+  const type = input.type || "page";
+
+  const context = builder({ type, obj: input.obj, req });
+
+  marko_dynamicTag(out, input.renderBody, function() {
+    return {
+        context: context
+      };
+  }, null, null, null, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-gtm$1.0.0/components/context/default.marko"
+  };

package/components/context/dynamic-page.marko

@@ -0,0 +1,28 @@
+import gql from "graphql-tag";
+import { isFunction, warn } from "@mindful-web/utils";
+import { dynamicPageBuilder } from "../../context";
+
+$ const { req } = out.global;
+$ const { alias } = input;
+$ const builder = isFunction(input.builder) ? input.builder : dynamicPageBuilder;
+
+$ const queryFragment = input.queryFragment || gql`
+fragment DynamicPageContextFragment on ContentPage {
+  id
+  name
+  alias
+  siteContext {
+    path
+  }
+}
+`;
+
+<if(alias)>
+  <marko-web-query|{ node }| name="dynamic-page" params={ alias, queryFragment }>
+    $ const context = builder({ type: "dynamic-page", obj: node, req });
+    <${input.renderBody} context=context />
+  </marko-web-query>
+</if>
+<else>
+  $ warn('Unable to create GTM dynamic page context: no page alias was provided.');
+</else>

package/components/context/dynamic-page.marko.js

@@ -0,0 +1,75 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-gtm$1.0.0/components/context/dynamic-page.marko",
+    marko_component = require("./dynamic-page.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_gql = require("graphql-tag"),
+    gql = module_gql.default || module_gql,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    isFunction = module_utils_module.isFunction,
+    warn = module_utils_module.warn,
+    module_context_module = require("../../context"),
+    context_module = module_context_module.default || module_context_module,
+    dynamicPageBuilder = module_context_module.dynamicPageBuilder,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_query_template = require("@mindful-web/marko-core/components/queries/index.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_query_tag = marko_loadTag(marko_web_query_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { req } = out.global;
+
+  const { alias } = input;
+
+  const builder = isFunction(input.builder) ? input.builder : dynamicPageBuilder;
+
+  const queryFragment = input.queryFragment || gql`
+fragment DynamicPageContextFragment on ContentPage {
+  id
+  name
+  alias
+  siteContext {
+    path
+  }
+}
+`;
+
+  if (alias) {
+    marko_web_query_tag({
+        collapsible: true,
+        name: "dynamic-page",
+        params: {
+            alias: alias,
+            queryFragment: queryFragment
+          },
+        renderBody: function(out, { node }) {
+          const context = builder({ type: "dynamic-page", obj: node, req });
+
+          marko_dynamicTag(out, input.renderBody, function() {
+            return {
+                context: context
+              };
+          }, null, null, null, __component, "1");
+        }
+      }, out, __component, "0");
+  } else {
+    warn('Unable to create GTM dynamic page context: no page alias was provided.');
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-gtm$1.0.0/components/context/dynamic-page.marko",
+    component: "./dynamic-page.marko",
+    tags: [
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/context/magazine-issue.marko

@@ -0,0 +1,30 @@
+import gql from "graphql-tag";
+import { isFunction, warn } from "@mindful-web/utils";
+import { magazineIssueBuilder } from "../../context";
+
+$ const { req } = out.global;
+$ const { id } = input;
+$ const builder = isFunction(input.builder) ? input.builder : magazineIssueBuilder;
+
+$ const queryFragment = input.queryFragment || gql`
+fragment MagazineIssueContextFragment on MagazineIssue {
+  id
+  name
+  canonicalPath
+  mailed
+  publication {
+    id
+    name
+  }
+}
+`;
+
+<if(id)>
+  <marko-web-query|{ node }| name="magazine-issue" params={ id, queryFragment }>
+    $ const context = builder({ type: "magazine-issue", obj: node, req });
+    <${input.renderBody} context=context />
+  </marko-web-query>
+</if>
+<else>
+  $ warn('Unable to create GTM magazine issue context: no issue id was provided.');
+</else>