Merge pull request #947 from solocommand/mindful-web-banner-ads

Mindful web banner ad delivery

packages/marko-web-mindful-ads/.eslintignore

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

packages/marko-web-mindful-ads/components/marko.json

@@ -0,0 +1,25 @@
+{
+  "<marko-web-mindful-ads-website-banner>": {
+    "template": "./website-banner.marko",
+    "@ad-unit-id": {
+      "type": "string",
+      "required": true
+    },
+    "@limit": {
+      "type": "number",
+      "default-value": 1
+    },
+    "@namespace": {
+      "type": "string",
+      "required": true
+    },
+    "@sizes": {
+      "type": "array",
+      "default-value": []
+    },
+    "@debug": {
+      "type": "boolean",
+      "default-value": false
+    }
+  }
+}

packages/marko-web-mindful-ads/components/website-banner.marko

@@ -0,0 +1,53 @@
+import { randomElementId } from "@parameter1/base-cms-utils";
+import { logger, fetchAds } from "../utils";
+
+$ const {
+  adUnitId,
+  debug,
+  sizes = [],
+  limit = 1,
+  namespace,
+} = input;
+$ const log = logger(debug);
+
+$ if (debug) log('website-banner-fetch input', input);
+$ const elementId = randomElementId({ prefix: 'mindful' });
+
+<marko-web-resolve|{ resolved }| promise=fetchAds({
+  adUnitId,
+  debug,
+  sizes,
+  limit,
+  namespace,
+})>
+  <if(resolved.error && process.env.NODE_ENV === 'development')>
+    $ throw resolved.error;
+  </if>
+  $ /** @type {import("../utils/fetch-ads").MindfulWebsiteBannerCreative} **/
+  <for|creative| of=resolved.results>
+    <div
+      id=elementId
+      data-unit-form="WEBSITE_BANNER"
+      data-channel-id=resolved.unit.websiteChannel._id
+      data-creative-id=creative._id
+      data-unit-id=resolved.unit._id
+    >
+      <if(input.renderBody)>
+        <${input.renderBody} unit=resolved.unit creative=creative />
+      </if>
+      <else>
+        <a href=creative.clickUrl target="_blank">
+          <img src=creative.src alt=creative.name />
+        </a>
+      </else>
+    </div>
+  </for>
+  <if(!resolved.results || !resolved.results.length)>
+    <div
+      id=elementId
+      data-unit-form="WEBSITE_BANNER"
+      data-channel-id=resolved.unit.websiteChannel._id
+      data-unit-id=resolved.unit._id
+    />
+  </if>
+</marko-web-resolve>

packages/marko-web-mindful-ads/marko.json

@@ -0,0 +1,6 @@
+{
+  "taglib-id": "@parameter1/base-cms-marko-newsletters-mindful",
+  "taglib-imports": [
+    "./components/marko.json"
+  ]
+}

packages/marko-web-mindful-ads/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@parameter1/base-cms-marko-web-mindful-ads",
+  "version": "4.61.0",
+  "description": "Mindful Ads Marko components for BaseCMS websites.",
+  "author": "Josh Worden <[email protected]>",
+  "license": "MIT",
+  "repository": "https://github.com/parameter1/base-cms/tree/master/packages/marko-web-mindful-ads",
+  "scripts": {
+    "lint:fix": "yarn lint --fix",
+    "lint": "eslint --ext .js --max-warnings 5 ./",
+    "compile": "basecms-marko-compile compile",
+    "prepublish": "yarn compile --silent",
+    "test": "yarn compile --no-clean && yarn lint"
+  },
+  "dependencies": {
+    "@parameter1/base-cms-utils": "^4.40.3",
+    "node-fetch": "^2.6.9"
+  },
+  "peerDependencies": {
+    "@parameter1/base-cms-marko-core": "^4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/marko-web-mindful-ads/utils/fetch-ads.js

@@ -0,0 +1,83 @@
+const fetch = require('node-fetch');
+const logger = require('./logger');
+
+const { error } = console;
+const host = process.env.MINDFUL_ADVERTISING_DELIVERY_API_URL || 'https://delivery.mindfulcms.com';
+
+/**
+ * @param MindfulWebsiteBannerRequestArgs
+ * @returns {Promise<MindfulWebsiteBannerResponse[]>}
+ */
+module.exports = async ({
+  adUnitId,
+  debug = true,
+  limit = 1,
+  sizes = [],
+  namespace,
+} = {}) => {
+  if (!namespace) throw new Error('Mindful namespace must be supplied.');
+  if (!adUnitId) throw new Error('Mindful ad unit id must be supplied.');
+  const log = logger(debug);
+  log({
+    adUnitId,
+    limit,
+    sizes,
+    namespace,
+  });
+  try {
+    const url = new URL(`${host}/${namespace}/website-banner/${adUnitId}`);
+    url.searchParams.set('limit', limit);
+    sizes.forEach((size) => url.searchParams.append('sizes', size));
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`Unable to retrieve mindful ads: ${res.status} ${res.statusText}`);
+    return res.json();
+  } catch (e) {
+    error('Unable to retrieve mindful ads!', e);
+    return { error: e };
+  }
+};
+
+/**
+ * @typedef MindfulWebsiteBannerRequestArgs
+ * @prop {string} namespace The Mindful namespace (tenant/workspace keys)
+ * @prop {string} adUnitId
+ * @prop {boolean} debug
+ * @prop {string[]} sizes
+ *
+ * @typedef MindfulWebsiteBannerAdUnit
+ * @prop {string} _id
+ * @prop {string[]} sizes
+ * @prop {string} name
+ * @prop {MindfulWebsiteChannel} websiteChannel
+ *
+ * @typedef MindfulWebsiteChannel
+ * @prop {string} _id
+ * @prop {string} name
+ *
+ * @typedef MindfulAdvertisingOrder
+ * @prop {string} _id
+ * @prop {string} name
+ *
+ * @typedef MindfulAdvertisingCompany
+ * @prop {string} _id
+ * @prop {string} name
+ *
+ * @typedef MindfulWebsiteBannerCreative
+ * @prop {string} _id
+ * @prop {string} form
+ * @prop {string} kind
+ * @prop {number} width
+ * @prop {number} height
+ * @prop {string} clickUrl
+ * @prop {string} src
+ * @prop {MindfulWebsiteBannerLineItem} lineItem
+ * @prop {MindfulAdvertisingOrder} order
+ * @prop {MindfulAdvertisingCompany} company
+ *
+ * @typedef MindfulWebsiteBannerResponse
+ * @prop {MindfulWebsiteBannerAdUnit} unit
+ * @prop {number} limit
+ * @prop {string[]} sizes
+ * @prop {MindfulWebsiteBannerCreative[]} results
+ *
+ */

packages/marko-web-mindful-ads/utils/index.js

@@ -0,0 +1,7 @@
+const fetchAds = require('./fetch-ads');
+const logger = require('./logger');
+
+module.exports = {
+  fetchAds,
+  logger,
+};

packages/marko-web-mindful-ads/utils/logger.js

@@ -0,0 +1,5 @@
+const { log } = console;
+
+module.exports = (debug = false, key = 'mindful') => (...args) => {
+  if (debug) log(key, ...args);
+};

packages/marko-web-p1-events/components/init.marko

@@ -7,11 +7,13 @@ $ const { NODE_ENV, DEBUG } = process.env;
 $ const debug = `${DEBUG}`.includes('p1events');
 
 $ const { on } = input;
-$ const scriptSrc = defaultValue(input.scriptSrc, "https://cdn.parameter1.com/p1-events/v1.3.4/lib.min.js");
+$ const scriptSrc = defaultValue(input.scriptSrc, "https://cdn.parameter1.com/p1-events/v1.4.1/lib.min.js");
 $ const uri = defaultValue(input.uri, "https://db0y8smio0.execute-api.us-east-2.amazonaws.com/default/p1-website-events-enqueue");
 $ const identityQueryBuilder = `identityQueryBuilder: function(query, cookies) { ${input.identityQueryBuilder ? input.identityQueryBuilder.split("\n").map((l) => l.trim()).join(" ") : ""} }`;
 $ const enableGamPlugin = defaultValue(input.enableGamPlugin, false);
+$ const enableMindfulPlugin = defaultValue(input.enableMindfulPlugin, false);
 $ const gamPluginOptions = defaultValue(input.gamPluginOptions, {});
+$ const mindfulPluginOptions = defaultValue(input.mindfulPluginOptions, {});
 
 <if(enabled && tenant)>
   <if(on)>
@@ -36,5 +38,5 @@ $ const gamPluginOptions = defaultValue(input.gamPluginOptions, {});
     </script>
     <script type="module" src=scriptSrc async defer></script>
   </else>
-  <script>p1events('init', { tenant: '${tenant}', realm: '${realm}', env: '${NODE_ENV}', debug: ${debug}, uri: '${uri}', cookieDomain: '${cookieDomain}', ${identityQueryBuilder}, enableGamPlugin: ${enableGamPlugin}, gamPluginOptions: ${JSON.stringify(gamPluginOptions)} });</script>
+  <script>p1events('init', { tenant: '${tenant}', realm: '${realm}', env: '${NODE_ENV}', debug: ${debug}, uri: '${uri}', cookieDomain: '${cookieDomain}', ${identityQueryBuilder}, enableMindfulPlugin: ${enableMindfulPlugin}, mindfulPluginOptions: ${JSON.stringify(mindfulPluginOptions)}, enableGamPlugin: ${enableGamPlugin}, gamPluginOptions: ${JSON.stringify(gamPluginOptions)} });</script>
 </if>

packages/marko-web-p1-events/components/marko.json

@@ -4,15 +4,17 @@
   ],
   "<marko-web-p1-events-init>": {
     "template": "./init.marko",
-    "@script-src": "string",
-    "@uri": "string",
+    "@enable-gam-plugin": "boolean",
+    "@enable-mindful-plugin": "boolean",
+    "@gam-plugin-options": "object",
     "@identity-query-builder": "string",
+    "@init-only": "boolean",
+    "@mindful-plugin-options": "object",
     "@on": "string",
-    "@target-tag": "string",
     "@request-frame": "boolean",
-    "@init-only": "boolean",
-    "@enable-gam-plugin": "boolean",
-    "@gam-plugin-options": "object"
+    "@script-src": "string",
+    "@target-tag": "string",
+    "@uri": "string"
   },
   "<marko-web-p1-events-track-content>": {
     "template": "./track-content.marko",

scripts/down.sh

@@ -1,2 +1,2 @@
 #!/bin/bash
-docker-compose down
+docker compose down

scripts/install.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
-docker-compose build commands
-docker-compose run \
+docker compose build commands
+docker compose run \
   --rm \
   --no-deps \
   --entrypoint yarn \

scripts/lint.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-docker-compose run \
+docker compose run \
   --rm \
   --no-deps \
   --entrypoint yarn \

scripts/run.sh

@@ -25,7 +25,7 @@ function arguments() {
 [[ -d $COMPOSEDIR ]] || compose
 
 echo -e "\nStarting dev environment for $1\n"
-docker-compose \
+docker compose \
   run \
     --rm \
     --service-ports \

scripts/terminal.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-docker-compose run \
+docker compose run \
   --rm \
   --no-deps \
   --entrypoint /bin/bash \

scripts/test.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-docker-compose run \
+docker compose run \
   --rm \
   --no-deps \
   --entrypoint yarn \

scripts/yarn.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-docker-compose run \
+docker compose run \
   --rm \
   --no-deps \
   --entrypoint yarn \

services/example-website/package.json

@@ -30,6 +30,7 @@
     "@parameter1/base-cms-marko-web-identity-x": "^4.61.0",
     "@parameter1/base-cms-marko-web-inquiry": "^4.40.3",
     "@parameter1/base-cms-marko-web-leaders": "^4.56.2",
+    "@parameter1/base-cms-marko-web-mindful-ads": "^4.61.0",
     "@parameter1/base-cms-marko-web-native-x": "^4.60.2",
     "@parameter1/base-cms-marko-web-omeda": "^4.51.0",
     "@parameter1/base-cms-marko-web-omeda-identity-x": "^4.61.0",

services/example-website/server/components/document.marko

@@ -19,6 +19,8 @@ $ const { nativeX, cdn, contentMeterState } = out.global;
       request-frame=true
       target-tag="body"
       identity-query-builder=createOmedaIdentityBuilder(omedaConfig.brandKey)
+      enable-mindful-plugin=true
+      mindful-plugin-options={ namespace: "parameter1/default" }
     />
 
     <!-- init gam -->

services/example-website/server/templates/index.marko

@@ -13,11 +13,9 @@ import ns from "@parameter1/base-cms-marko-web-p1-events/utils/create-namespace"
     <marko-web-page-wrapper>
       <@section>
         <div class="ad-container ad-container--inline text-center py-5">
-          <marko-web-gam-define-display-ad
-            path="/142181607/ovd/leaderboard"
-            size=[[970,90]]
-            targeting={ pos: 'home_page|1', referrer: 'internal' }
-            collapse=false
+          <marko-web-mindful-ads-website-banner
+            namespace="parameter1/default"
+            ad-unit-id="66bfa8780e2f7fcd27993cd8"
           />
         </div>
       </@section>
@@ -86,6 +84,17 @@ import ns from "@parameter1/base-cms-marko-web-p1-events/utils/create-namespace"
         </div>
       </@section>
 
+      <@section>
+        <div class="row">
+          <div class="col">
+            <marko-web-mindful-ads-website-banner
+              namespace="parameter1/default"
+              ad-unit-id="66bfa8780e2f7fcd27993cd8"
+            />
+          </div>
+        </div>
+      </@section>
+
     </marko-web-page-wrapper>
   </@page>
 </marko-web-default-page-layout>