@mindful-web/marko-web-gtm 1.0.0

package/components/push.marko.js

@@ -0,0 +1,35 @@
+// 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/push.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,
+    asObject = module_utils_module.asObject,
+    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");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const name = input.name || 'dataLayer';
+
+  const obj = asObject(input.data);
+
+  const script = `${name}.push(${JSON.stringify(obj)});`;
+
+  out.w("<script>" +
+    marko_escapeScript(script) +
+    "</script>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-gtm$1.0.0/components/push.marko"
+  };

package/components/slot.marko

@@ -0,0 +1,9 @@
+import { BEM } from "@mindful-web/utils";
+import { dasherize } from "@mindful-web/inflector";
+
+$ const { prefix, name } = input;
+$ const blockName = "marko-web-gtm-slot";
+$ const classNames = [blockName, ...BEM.applyModifiers(blockName, input.modifiers), input.class];
+$ const id = prefix ? `${prefix}-${name}` : name;
+
+<div id=dasherize(id) class=classNames />

package/components/slot.marko.js

@@ -0,0 +1,40 @@
+// 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/slot.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,
+    BEM = module_utils_module.BEM,
+    module_inflector_module = require("@mindful-web/inflector"),
+    inflector_module = module_inflector_module.default || module_inflector_module,
+    dasherize = module_inflector_module.dasherize,
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    marko_classAttr = require("marko/dist/runtime/html/helpers/class-attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { prefix, name } = input;
+
+  const blockName = "marko-web-gtm-slot";
+
+  const classNames = [blockName, ...BEM.applyModifiers(blockName, input.modifiers), input.class];
+
+  const id = prefix ? `${prefix}-${name}` : name;
+
+  out.w("<div" +
+    marko_attr("id", dasherize(id)) +
+    marko_classAttr(classNames) +
+    "></div>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-gtm$1.0.0/components/slot.marko"
+  };

package/components/start.marko

@@ -0,0 +1,7 @@
+$ const name = input.name || 'dataLayer';
+$ const payload = {
+  'gtm.start': new Date().getTime(),
+  event: 'gtm.js',
+};
+
+<marko-web-gtm-push name=name data=payload />

package/components/start.marko.js

@@ -0,0 +1,37 @@
+// 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/start.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_web_gtm_push_template = require("./push.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_gtm_push_tag = marko_loadTag(marko_web_gtm_push_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const name = input.name || 'dataLayer';
+
+  const payload = {
+  'gtm.start': new Date().getTime(),
+  event: 'gtm.js',
+};
+
+  marko_web_gtm_push_tag({
+      name: name,
+      data: payload
+    }, out, __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/start.marko",
+    tags: [
+      "./push.marko"
+    ]
+  };

package/components/track-bus-event.marko

@@ -0,0 +1 @@
+<marko-web-browser-component name="GTMTrackBusEvent" props=input />

package/components/track-bus-event.marko.js

@@ -0,0 +1,30 @@
+// 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/track-bus-event.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  marko_web_browser_component_tag({
+      name: "GTMTrackBusEvent",
+      props: input
+    }, out, __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/track-bus-event.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko"
+    ]
+  };

package/components/track-inview-event.marko

@@ -0,0 +1 @@
+<marko-web-browser-component name="GTMTrackInViewEvent" props=input />

package/components/track-inview-event.marko.js

@@ -0,0 +1,30 @@
+// 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/track-inview-event.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  marko_web_browser_component_tag({
+      name: "GTMTrackInViewEvent",
+      props: input
+    }, out, __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/track-inview-event.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko"
+    ]
+  };

package/components/track-load-more.marko

@@ -0,0 +1 @@
+<marko-web-browser-component name="GTMTrackLoadMore" props=input />

package/components/track-load-more.marko.js

@@ -0,0 +1,30 @@
+// 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/track-load-more.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  marko_web_browser_component_tag({
+      name: "GTMTrackLoadMore",
+      props: input
+    }, out, __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/track-load-more.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko"
+    ]
+  };

package/context/content.js

@@ -0,0 +1,74 @@
+const { getAsObject, getAsArray, get } = require('@mindful-web/object-path');
+const { asObject } = require('@mindful-web/utils');
+const buildQueryString = require('../utils/build-query-string');
+
+module.exports = ({ obj, req }) => {
+  const content = asObject(obj);
+  const company = getAsObject(content, 'company');
+  const createdBy = getAsObject(content, 'createdBy');
+  const section = getAsObject(content, 'primarySection');
+  const userRegistration = getAsObject(content, 'userRegistration');
+  const hierarchy = getAsArray(section, 'hierarchy').map((s) => ({
+    id: s.id,
+    name: s.name,
+    alias: s.alias,
+  }));
+  const taxonomy = getAsArray(content, 'taxonomy.edges').map(({ node }) => ({
+    id: node.id,
+    type: node.type,
+    name: node.name,
+    fullName: node.fullName,
+  }));
+  const authors = getAsArray(content, 'authors.edges').map(({ node }) => ({
+    id: node.id,
+    name: node.name,
+  }));
+  const schedules = getAsArray(content, 'websiteSchedules').map(({ section: s }) => ({
+    id: s.id,
+    name: s.name,
+  }));
+  const emailSchedules = getAsArray(content, 'emailSchedules')
+    .map((schedule) => ({
+      name: schedule.newsletter.name,
+      deploymentDate: schedule.deploymentDate,
+    }))
+    .sort((a, b) => a.deploymentDate - b.deploymentDate);
+  const magazineSchedules = getAsArray(content, 'magazineSchedules')
+    .map(({ issue: i }) => ({ name: i.name, mailDate: i.mailDate }))
+    .sort((a, b) => new Date(a.mailDate) - new Date(b.mailDate));
+  return {
+    page_type: 'content',
+    canonical_path: get(content, 'siteContext.path'),
+    query_string: buildQueryString({ req }),
+    content: {
+      id: content.id,
+      type: content.type,
+      name: content.name,
+      published: content.published ? new Date(content.published).toISOString() : undefined,
+      labels: getAsArray(content, 'labels'),
+      userRegistration,
+    },
+    created_by: {
+      id: createdBy.id,
+      username: createdBy.username,
+      firstName: createdBy.firstName,
+      lastName: createdBy.lastName,
+    },
+    company: {
+      id: company.id,
+      name: company.name,
+    },
+    section: {
+      id: section.id,
+      name: section.name,
+      alias: section.alias,
+      fullName: section.fullName,
+    },
+    section_hierarchy: hierarchy,
+    taxonomy,
+    authors,
+    schedules,
+    emailSchedules,
+    magazineSchedules,
+  };
+};

package/context/default.js

@@ -0,0 +1,11 @@
+const { asObject } = require('@mindful-web/utils');
+const buildQueryString = require('../utils/build-query-string');
+
+module.exports = ({ type, obj, req }) => {
+  const o = asObject(obj);
+  return {
+    page_type: type,
+    canonical_path: o.canonicalPath || req.path,
+    query_string: buildQueryString({ req }),
+  };
+};

package/context/dynamic-page.js

@@ -0,0 +1,17 @@
+const { get } = require('@mindful-web/object-path');
+const { asObject } = require('@mindful-web/utils');
+const buildQueryString = require('../utils/build-query-string');
+
+module.exports = ({ obj, req }) => {
+  const page = asObject(obj);
+  return {
+    page_type: 'dynamic-page',
+    canonical_path: get(page, 'siteContext.path'),
+    query_string: buildQueryString({ req }),
+    page: {
+      id: page.id,
+      name: page.name,
+      alias: page.alias,
+    },
+  };
+};

package/context/index.js

@@ -0,0 +1,17 @@
+const defaultBuilder = require('./default');
+const contentBuilder = require('./content');
+const websiteSectionBuilder = require('./website-section');
+const dynamicPageBuilder = require('./dynamic-page');
+const magazineIssueBuilder = require('./magazine-issue');
+const magazinePublicationBuilder = require('./magazine-publication');
+const nativeXStoryBuilder = require('./native-x-story');
+
+module.exports = {
+  defaultBuilder,
+  contentBuilder,
+  websiteSectionBuilder,
+  dynamicPageBuilder,
+  magazineIssueBuilder,
+  magazinePublicationBuilder,
+  nativeXStoryBuilder,
+};

package/context/magazine-issue.js

@@ -0,0 +1,22 @@
+const { getAsObject } = require('@mindful-web/object-path');
+const { asObject } = require('@mindful-web/utils');
+const buildQueryString = require('../utils/build-query-string');
+
+module.exports = ({ obj, req }) => {
+  const issue = asObject(obj);
+  const publication = getAsObject(issue, 'publication');
+  return {
+    page_type: 'magazine-issue',
+    canonical_path: issue.canonicalPath,
+    query_string: buildQueryString({ req }),
+    issue: {
+      id: issue.id,
+      name: issue.name,
+      mailed: issue.mailed ? new Date(issue.mailed).toISOString() : undefined,
+    },
+    publication: {
+      id: publication.id,
+      name: publication.name,
+    },
+  };
+};

package/context/magazine-publication.js

@@ -0,0 +1,15 @@
+const { asObject } = require('@mindful-web/utils');
+const buildQueryString = require('../utils/build-query-string');
+
+module.exports = ({ obj, req }) => {
+  const publication = asObject(obj);
+  return {
+    page_type: 'magazine-publication',
+    canonical_path: publication.canonicalPath,
+    query_string: buildQueryString({ req }),
+    publication: {
+      id: publication.id,
+      name: publication.name,
+    },
+  };
+};

package/context/native-x-story.js

@@ -0,0 +1,37 @@
+const { getAsObject, getAsArray, get } = require('@mindful-web/object-path');
+const { asObject } = require('@mindful-web/utils');
+const buildQueryString = require('../utils/build-query-string');
+
+module.exports = ({ type, obj, req }) => {
+  const content = asObject(obj);
+  const company = getAsObject(content, 'company');
+  const section = getAsObject(content, 'primarySection');
+  const hierarchy = getAsArray(section, 'hierarchy').map((s) => ({
+    id: s.id,
+    name: s.name,
+    alias: s.alias,
+  }));
+  return {
+    page_type: type,
+    canonical_path: get(content, 'siteContext.path'),
+    query_string: buildQueryString({ req }),
+    content: {
+      id: content.id,
+      type: content.type,
+      name: content.name,
+      published: content.published ? new Date(content.published).toISOString() : undefined,
+      labels: getAsArray(content, 'labels'),
+    },
+    company: {
+      id: company.id,
+      name: company.name,
+    },
+    section: {
+      id: section.id,
+      name: section.name,
+      alias: section.alias,
+      fullName: section.fullName,
+    },
+    section_hierarchy: hierarchy,
+  };
+};

package/context/website-section.js

@@ -0,0 +1,24 @@
+const { getAsArray } = require('@mindful-web/object-path');
+const { asObject } = require('@mindful-web/utils');
+const buildQueryString = require('../utils/build-query-string');
+
+module.exports = ({ obj, req }) => {
+  const section = asObject(obj);
+  const hierarchy = getAsArray(section, 'hierarchy').map((s) => ({
+    id: s.id,
+    name: s.name,
+    alias: s.alias,
+  }));
+  return {
+    page_type: 'website-section',
+    canonical_path: section.canonicalPath,
+    query_string: buildQueryString({ req }),
+    section: {
+      id: section.id,
+      name: section.name,
+      alias: section.alias,
+      fullName: section.fullName,
+    },
+    section_hierarchy: hierarchy,
+  };
+};

package/marko.json

@@ -0,0 +1,6 @@
+{
+  "taglib-id": "@mindful-web/marko-web-gtm",
+  "taglib-imports": [
+    "./components/marko.json"
+  ]
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@mindful-web/marko-web-gtm",
+  "version": "1.0.0",
+  "description": "Google Tag Manager (GAM) Marko components for Mindful Web websites",
+  "author": "Jacob Bare <jacob@parameter1.com>",
+  "license": "MIT",
+  "repository": "https://github.com/parameter1/mindful-web/tree/main/packages/marko-web-gtm",
+  "scripts": {
+    "lint:fix": "yarn lint --fix",
+    "lint": "eslint --ext .js --ext .vue --max-warnings 5 ./",
+    "compile": "mindful-web-marko-compile compile",
+    "prepublish": "yarn compile --silent",
+    "test": "yarn compile --no-clean && yarn lint"
+  },
+  "dependencies": {
+    "@mindful-web/inflector": "^1.0.0",
+    "@mindful-web/marko-web-deferred-script-loader": "^1.0.0",
+    "@mindful-web/object-path": "^1.0.0",
+    "@mindful-web/utils": "^1.0.0",
+    "graphql": "^14.7.0",
+    "graphql-tag": "^2.12.6"
+  },
+  "peerDependencies": {
+    "@mindful-web/marko-core": "^0.0.0",
+    "@mindful-web/marko-web": "^0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0b77cab713eb5841202bb86c7119949866bc68b5"
+}

package/scss/slot.scss

@@ -0,0 +1,7 @@
+.marko-web-gtm-slot {
+  width: 100%;
+  height: auto;
+  &:empty {
+    display: none;
+  }
+}

package/utils/build-query-string.js

@@ -0,0 +1,3 @@
+const { URLSearchParams } = require('url');
+
+module.exports = ({ req }) => (new URLSearchParams(req.query)).toString();