@mindful-web/marko-web-gtm 1.0.0

package/components/context/magazine-issue.marko.js

@@ -0,0 +1,77 @@
+// 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/magazine-issue.marko",
+    marko_component = require("./magazine-issue.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,
+    magazineIssueBuilder = module_context_module.magazineIssueBuilder,
+    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 : magazineIssueBuilder;
+
+  const queryFragment = input.queryFragment || gql`
+fragment MagazineIssueContextFragment on MagazineIssue {
+  id
+  name
+  canonicalPath
+  mailed
+  publication {
+    id
+    name
+  }
+}
+`;
+
+  if (id) {
+    marko_web_query_tag({
+        collapsible: true,
+        name: "magazine-issue",
+        params: {
+            id: id,
+            queryFragment: queryFragment
+          },
+        renderBody: function(out, { node }) {
+          const context = builder({ type: "magazine-issue", 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 magazine issue context: no issue 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/magazine-issue.marko",
+    component: "./magazine-issue.marko",
+    tags: [
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/context/magazine-publication.marko

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

package/components/context/magazine-publication.marko.js

@@ -0,0 +1,72 @@
+// 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/magazine-publication.marko",
+    marko_component = require("./magazine-publication.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,
+    magazinePublicationBuilder = module_context_module.magazinePublicationBuilder,
+    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 : magazinePublicationBuilder;
+
+  const queryFragment = input.queryFragment || gql`
+fragment MagazinePublicationContextFragment on MagazinePublication {
+  id
+  name
+  canonicalPath
+}
+`;
+
+  if (id) {
+    marko_web_query_tag({
+        collapsible: true,
+        name: "magazine-publication",
+        params: {
+            id: id,
+            queryFragment: queryFragment
+          },
+        renderBody: function(out, { node }) {
+          const context = builder({ type: "magazine-publication", 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 magazine publication context: no publication 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/magazine-publication.marko",
+    component: "./magazine-publication.marko",
+    tags: [
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/context/marko.json

@@ -0,0 +1,44 @@
+{
+  "<marko-web-gtm-default-context>": {
+    "template": "./default.marko",
+    "@type": "string",
+    "@obj": "object",
+    "@builder": "function"
+  },
+  "<marko-web-gtm-content-context>": {
+    "template": "./content.marko",
+    "@id": "number",
+    "@builder": "function",
+    "@query-fragment": "expression"
+  },
+  "<marko-web-gtm-website-section-context>": {
+    "template": "./website-section.marko",
+    "@alias": "string",
+    "@builder": "function",
+    "@query-fragment": "expression"
+  },
+  "<marko-web-gtm-dynamic-page-context>": {
+    "template": "./dynamic-page.marko",
+    "@alias": "string",
+    "@builder": "function",
+    "@query-fragment": "expression"
+  },
+  "<marko-web-gtm-magazine-issue-context>": {
+    "template": "./magazine-issue.marko",
+    "@id": "string",
+    "@builder": "function",
+    "@query-fragment": "expression"
+  },
+  "<marko-web-gtm-magazine-publication-context>": {
+    "template": "./magazine-publication.marko",
+    "@id": "string",
+    "@builder": "function",
+    "@query-fragment": "expression"
+  },
+  "<marko-web-gtm-native-x-story-context>": {
+    "template": "./native-x-story.marko",
+    "@type": "string",
+    "@obj": "object",
+    "@builder": "function"
+  }
+}

package/components/context/native-x-story.marko

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

package/components/context/native-x-story.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/native-x-story.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,
+    nativeXStoryBuilder = module_context_module.nativeXStoryBuilder,
+    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 : nativeXStoryBuilder;
+
+  const type = input.type || "content";
+
+  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/native-x-story.marko"
+  };

package/components/context/website-section.marko

@@ -0,0 +1,32 @@
+import gql from "graphql-tag";
+import { isFunction, warn } from "@mindful-web/utils";
+import { websiteSectionBuilder } from "../../context";
+
+$ const { req } = out.global;
+$ const { alias } = input;
+$ const builder = isFunction(input.builder) ? input.builder : websiteSectionBuilder;
+
+$ const queryFragment = input.queryFragment || gql`
+fragment WebsiteSectionContextFragment on WebsiteSection {
+  id
+  alias
+  name
+  fullName
+  canonicalPath
+  hierarchy {
+    id
+    name
+    alias
+  }
+}
+`;
+
+<if(alias)>
+  <marko-web-query|{ node }| name="website-section" params={ alias, queryFragment }>
+    $ const context = builder({ type: "website-section", obj: node, req });
+    <${input.renderBody} context=context />
+  </marko-web-query>
+</if>
+<else>
+  $ warn('Unable to create GTM website section context: no section alias was provided.');
+</else>

package/components/context/website-section.marko.js

@@ -0,0 +1,79 @@
+// 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/website-section.marko",
+    marko_component = require("./website-section.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,
+    websiteSectionBuilder = module_context_module.websiteSectionBuilder,
+    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 : websiteSectionBuilder;
+
+  const queryFragment = input.queryFragment || gql`
+fragment WebsiteSectionContextFragment on WebsiteSection {
+  id
+  alias
+  name
+  fullName
+  canonicalPath
+  hierarchy {
+    id
+    name
+    alias
+  }
+}
+`;
+
+  if (alias) {
+    marko_web_query_tag({
+        collapsible: true,
+        name: "website-section",
+        params: {
+            alias: alias,
+            queryFragment: queryFragment
+          },
+        renderBody: function(out, { node }) {
+          const context = builder({ type: "website-section", 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 website section context: no section 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/website-section.marko",
+    component: "./website-section.marko",
+    tags: [
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/init.marko

@@ -0,0 +1,52 @@
+import { isObject, warn } from "@mindful-web/utils";
+
+$ const disabledFeatures = out.global.disabledFeatures || new Set();
+
+$ const { isArray } = Array;
+
+$ const createContainerScript = (containerId, name) => `
+(function(w,d,s,l,i){w[l]=w[l]||[];
+var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','${name}','${containerId}');
+`;
+
+$ const on = disabledFeatures.has('gtm') ? 'never' : input.on;
+$ const name = input.name || "dataLayer";
+$ const containerIds = (isArray(input.containerId) ? input.containerId : [input.containerId]).filter(v => v);
+$ const start = input.start == null ? false : input.start;
+
+<if(on && containerIds.length)>
+  <for|containerId| of=containerIds>
+    $ let src = `https://www.googletagmanager.com/gtm.js?id=${containerId}`;
+    $ if (name !== "dataLayer") src = `${src}&l=${name}`;
+    <marko-web-deferred-script-loader-register
+      name=`${name}_${containerId}`
+      src=src
+      on=on
+      request-frame=input.requestFrame
+      target-tag=input.targetTag
+      init=`var w = window, l = '${name}'; w[l] = w[l] || [];`
+      init-only=input.initOnly
+    />
+  </for>
+</if>
+<else-if(containerIds.length)>
+  $ const scripts = containerIds.map(containerId => createContainerScript(containerId, name));
+  <script>${scripts.join().replace(/\n/g, '')}</script>
+</else-if>
+
+<if(containerIds.length)>
+  <if(input.push)>
+    <!-- Immediately push data to the container -->
+    <marko-web-gtm-push name=name data=input.push />
+  </if>
+  <if(start)>
+    <!-- Immediately start the container -->
+    <marko-web-gtm-start name=name />
+  </if>
+</if>
+<else>
+  $ warn('Unable to create GTM container script: no container IDs were provided.');
+</else>

package/components/init.marko.js

@@ -0,0 +1,104 @@
+// 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/init.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,
+    isObject = module_utils_module.isObject,
+    warn = module_utils_module.warn,
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_web_deferred_script_loader_register_template = require("@mindful-web/marko-web-deferred-script-loader/components/register.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_deferred_script_loader_register_tag = marko_loadTag(marko_web_deferred_script_loader_register_template),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_escapeScript = require("marko/dist/runtime/html/helpers/escape-script-placeholder"),
+    marko_web_gtm_push_template = require("./push.marko"),
+    marko_web_gtm_push_tag = marko_loadTag(marko_web_gtm_push_template),
+    marko_web_gtm_start_template = require("./start.marko"),
+    marko_web_gtm_start_tag = marko_loadTag(marko_web_gtm_start_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const disabledFeatures = out.global.disabledFeatures || new Set();
+
+  const { isArray } = Array;
+
+  const createContainerScript = (containerId, name) => `
+(function(w,d,s,l,i){w[l]=w[l]||[];
+var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','${name}','${containerId}');
+`;
+
+  const on = disabledFeatures.has('gtm') ? 'never' : input.on;
+
+  const name = input.name || "dataLayer";
+
+  const containerIds = (isArray(input.containerId) ? input.containerId : [input.containerId]).filter(v => v);
+
+  const start = input.start == null ? false : input.start;
+
+  if (on && containerIds.length) {
+    var $for$0 = 0;
+
+    marko_forOf(containerIds, function(containerId) {
+      let src = `https://www.googletagmanager.com/gtm.js?id=${containerId}`;
+
+      if (name !== "dataLayer") src = `${src}&l=${name}`;
+
+      var $keyScope$0 = "[" + (($for$0++) + "]");
+
+      marko_web_deferred_script_loader_register_tag({
+          name: (name + "_") + containerId,
+          src: src,
+          on: on,
+          requestFrame: input.requestFrame,
+          targetTag: input.targetTag,
+          init: ("var w = window, l = '" + name) + "'; w[l] = w[l] || [];",
+          initOnly: input.initOnly
+        }, out, __component, "0" + $keyScope$0);
+    });
+  } else if (containerIds.length) {
+    const scripts = containerIds.map(containerId => createContainerScript(containerId, name));
+
+    out.w("<script>" +
+      marko_escapeScript(scripts.join().replace(/\n/g, "")) +
+      "</script>");
+  }
+
+  if (containerIds.length) {
+    if (input.push) {
+      marko_web_gtm_push_tag({
+          name: name,
+          data: input.push
+        }, out, __component, "1");
+    }
+
+    if (start) {
+      marko_web_gtm_start_tag({
+          name: name
+        }, out, __component, "2");
+    }
+  } else {
+    warn('Unable to create GTM container script: no container IDs were provided.');
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-gtm$1.0.0/components/init.marko",
+    tags: [
+      "@mindful-web/marko-web-deferred-script-loader/components/register.marko",
+      "./push.marko",
+      "./start.marko"
+    ]
+  };

package/components/marko.json

@@ -0,0 +1,61 @@
+{
+  "taglib-imports": [
+    "./context/marko.json"
+  ],
+  "<marko-web-gtm-init>": {
+    "template": "./init.marko",
+    "@container-id": "expression",
+    "@name": {
+      "type": "string",
+      "default-value": "dataLayer"
+    },
+    "@push": "object",
+    "@start": {
+      "type": "boolean",
+      "default-value": false
+    },
+    "@on": "string",
+    "@target-tag": "string",
+    "@request-frame": "boolean",
+    "@init-only": "boolean"
+  },
+  "<marko-web-gtm-start>": {
+    "template": "./start.marko",
+    "@name": {
+      "type": "string",
+      "default-value": "dataLayer"
+    }
+  },
+  "<marko-web-gtm-noscript>": {
+    "template": "./noscript.marko",
+    "@container-id": "expression"
+  },
+  "<marko-web-gtm-push>": {
+    "template": "./push.marko",
+    "@name": {
+      "type": "string",
+      "default-value": "dataLayer"
+    },
+    "@data": "object"
+  },
+  "<marko-web-gtm-slot>": {
+    "template": "./slot.marko",
+    "@prefix": "string",
+    "@name": "string",
+    "@class": "string",
+    "@modifiers": "array"
+  },
+  "<marko-web-gtm-track-inview-event>": {
+    "template": "./track-inview-event.marko"
+  },
+  "<marko-web-gtm-track-load-more>": {
+    "template": "./track-load-more.marko"
+  },
+  "<marko-web-gtm-track-bus-event>": {
+    "template": "./track-bus-event.marko",
+    "@on": "string",
+    "@event-name": "string",
+    "@layer-name": "string",
+    "@clear-data": "boolean"
+  }
+}

package/components/noscript.marko

@@ -0,0 +1,11 @@
+$ const { isArray } = Array;
+$ const containerIds = (isArray(input.containerId) ? input.containerId : [input.containerId]).filter(v => v);
+
+<if(containerIds.length)>
+  <for|containerId| of=containerIds>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ containerId }}"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+  </for>
+</if>

package/components/noscript.marko.js

@@ -0,0 +1,44 @@
+// 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/noscript.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    noscript_template = require("./noscript.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    noscript_tag = marko_loadTag(noscript_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { isArray } = Array;
+
+  const containerIds = (isArray(input.containerId) ? input.containerId : [input.containerId]).filter(v => v);
+
+  if (containerIds.length) {
+    var $for$0 = 0;
+
+    marko_forOf(containerIds, function(containerId) {
+      var $keyScope$0 = "[" + (($for$0++) + "]");
+
+      noscript_tag({
+          renderBody: function(out) {
+            out.w("<iframe src=\"https://www.googletagmanager.com/ns.html?id={{ containerId }}\" height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe>");
+          }
+        }, out, __component, "0" + $keyScope$0);
+    });
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-gtm$1.0.0/components/noscript.marko",
+    tags: [
+      "./noscript.marko"
+    ]
+  };

package/components/push.marko

@@ -0,0 +1,7 @@
+import { asObject } from '@mindful-web/utils';
+
+$ const name = input.name || 'dataLayer';
+$ const obj = asObject(input.data);
+$ const script = `${name}.push(${JSON.stringify(obj)});`;
+
+<script>${script}</script>