choreograph-create-pixel 0.1.0

package/README.md

@@ -0,0 +1,191 @@
+# Choreograph Create Pixel
+
+This library lets you apply best practises to [Choreograph Create](https://www.lemonpi.io/) pixel development and implementation.
+
+## Features
+
+- [x] Supports **scrape**, **view**, **basket**, and **purchase** pixels
+- [x] Supports dynamic page changes
+- [x] Placement-agnostic through continuous URL validation
+- [x] Optionally enable pixels through user interaction
+- [x] Prevents scraping browser-translated data
+- [x] Error and console spam prevention
+
+## Quickstart
+
+The following theoretical snippet could be embedded on every page of _example.com_, and would automatically determine when to enable, through URL detection.
+
+### Browser
+
+```html
+<script src="https://unpkg.com/choreograph-create-pixel@^1"></script>
+<script>
+  // Scrape pixel
+  new ChoreographCreatePixel({
+    // Who is the client? (Advertiser ID)
+    who: 0,
+
+    // What type of pixel is this?
+    what: "scrape",
+
+    // Where should the pixel be enabled?
+    where: /example\.com\/products\/\d/,
+
+    // Which data should be scraped?
+    which: {
+      // Data layer example
+      sku: function () {
+        return window.dataLayer[0].product.sku;
+      },
+
+      // DOM example
+      name: function () {
+        return document.querySelector("#product-name").innerText;
+      },
+
+      // Helper example
+      url: ChoreographCreatePixel.getUrl,
+    },
+  });
+
+  // View segment pixel
+  new ChoreographCreatePixel({
+    who: 0,
+    what: "view",
+    where: /example\.com\/products\/\d/,
+
+    which: {
+      sku: function () {
+        return window.dataLayer[0].product.sku;
+      },
+    },
+  });
+</script>
+```
+
+### ES module
+
+```js
+import Pixel from "choreograph-create-pixel";
+
+// Scrape pixel
+new Pixel({
+  // Who is the client? (Advertiser ID)
+  who: 0,
+
+  // What type of pixel is this?
+  what: "scrape",
+
+  // Where should the pixel be enabled?
+  where: /example\.com\/products\/\d/,
+
+  // Which data should be scraped?
+  which: {
+    // Data layer example
+    sku: function () {
+      return window.dataLayer[0].product.sku;
+    },
+
+    // DOM example
+    name: function () {
+      return document.querySelector("#product-name").innerText;
+    },
+
+    // Helper example
+    url: Pixel.getUrl,
+  },
+});
+
+// View segment pixel
+new ChoreographCreatePixel({
+  who: 0,
+  what: "view",
+  where: /example\.com\/products\/\d/,
+
+  which: {
+    sku: function () {
+      return window.dataLayer[0].product.sku;
+    },
+  },
+});
+```
+
+> ES modules require manual bundling and transpiling before they can be safely used as browser scripts.
+
+## Other scenarios
+
+Besides **scrape** and **view** pixels, this library also supports **basket** and **purchase** segment pixels.
+
+### Basket segment
+
+```js
+{
+  who: 0,
+  what: "basket",
+  where: /example\.com/,
+
+  // (Optional) When should the pixel be enabled?
+  when: {
+    listener: "click",
+    elements: function () {
+      return document.querySelectorAll("button.basket[data-sku]");
+    },
+  },
+
+  which: {
+    // The "element" parameter only exists while using a "when" condition
+    sku: function (element) {
+      return element.getAttribute("data-sku");
+    },
+  },
+}
+```
+
+### Purchase segment
+
+```js
+{
+  who: 0,
+  what: "purchase",
+  where: /example\.com\/thank-you-for-purchasing/,
+
+  which: {
+    // sku accepts an array of strings to enable multiple segment pixels at once
+    sku: function () {
+      return [].map.call(document.querySelectorAll('.purchased-product[data-sku]'), function (element) {
+        return element.getAttribute("data-sku");
+      });
+    },
+  },
+}
+```
+
+## Configuration
+
+| Property         | Type                                 | Description                                                                                                                                                                                                                           | Default                                         |
+| ---------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
+| `who`            | Number                               | You can retrieve the advertiser ID from the URL in the [Manage platform](https://manage.lemonpi.io/) _(manage.lemonpi.io/r/AGENCY_ID/advertiser/`ADVERTISER_ID`)_.                                                                    | _Required_                                      |
+| `what`           | String                               | Pixel type. One of: `"scrape"`, `"view"`, `"basket"`, or `"purchase"`.                                                                                                                                                                | _Required_                                      |
+| `where`          | RegExp                               | Disables pixels on page URLs that are not matched by this pattern.                                                                                                                                                                    | _Required_                                      |
+| `which`          | Object                               | An object holding the data fields to be scraped.                                                                                                                                                                                      | _Required_                                      |
+| `which.sku`      | String, Array, or Function           | `sku` is the only required data field, as it's the product's unique identifier. In case of segment pixels (`what` equals `"view"`, `"basket"`, or `"purchase"`), an array of strings is allowed to trigger multiple pixel executions. | _Required_                                      |
+| `which.*`        | String, Number, Boolean, or Function | `*` should always match with existing field names in the advertiser's product store.                                                                                                                                                  | `undefined`                                     |
+| `when`           | Object                               | Use this property when you want to enable the pixel after a specific DOM event.                                                                                                                                                       | `undefined`                                     |
+| `when.listener`  | String                               | DOM event type. [List of supported values.](https://www.w3schools.com/jsref/dom_obj_event.asp)                                                                                                                                        | _Required_ when using `when`                    |
+| `when.elements`  | Function                             | This function should return DOM element(s) to apply the listener to.                                                                                                                                                                  | _Required_ when using `when`                    |
+| `optionalFields` | Array                                | An array of field names (strings) that are allowed to have empty values.                                                                                                                                                              | `[]`                                            |
+| `beforeSend`     | Function                             | Lifecycle function that's executed just before the pixel's data is sent.                                                                                                                                                              | `function (data, callback) { callback(data); }` |
+| `afterSend`      | Function                             | Lifecycle function that's executed just after the pixel's data is sent.                                                                                                                                                               | `function (data) {}`                            |
+| `debug`          | Boolean                              | Enables console debugging. Also enabled by adding `?pixel_debug` or `#pixel_debug` to the page URL.                                                                                                                                   | `false`                                         |
+
+## Static methods (helpers)
+
+### `getUrl({ allowedParameters, customParameters, allowHash })`
+
+Returns the bare page URL without query parameters or location hash. This is recommended to prevent scraping unwanted UTM tagging. Use the configuration to tweak its behavior.
+
+| Property            | Type    | Description                                                                           | Default |
+| ------------------- | ------- | ------------------------------------------------------------------------------------- | ------- |
+| `allowedParameters` | Array   | Define query parameter keys (as string values) that are allowed in the resulting URL. | `[]`    |
+| `customParameters`  | Object  | Manually add custom query parameters to the resulting URL. E.g.: `{ foo: "bar"}`      | `{}`    |
+| `allowHash`         | Boolean | Wether or not to include the location hash (`#foo`) of the URL.                       | `false` |

package/dist/bundle.cjs.js

@@ -0,0 +1,302 @@
+/*! choreograph-create-pixel v0.1.0 2022/09/15 */
+'use strict';
+
+const log = (
+  config,
+  message,
+  { level = "info", key = null, data = undefined }
+) => {
+  if (!config.debug || config.logs[key] === message) return;
+
+  const colors = {
+    error: "#f44336",
+    warn: "#ffa726",
+    success: "#66bb6a",
+    info: "#29b6f6",
+  };
+
+  const icons = { error: "⛔️", warn: "⚠️", success: "✅", info: "ℹ️" };
+  const titleCss =
+    "font-family:HelveticaNeue;font-weight:700;margin:1em 0 1.2em 0;font-size:80%;";
+  const messageCss = `font-family:HelveticaNeue;font-size:120%;margin-bottom:.5em;color:${colors[level]}`;
+  const keyCss =
+    "font-family:monospace;font-size:120%;border:1px solid;border-radius:5px;margin-bottom:1em;padding:.2em .6em";
+
+  const args = [
+    `%cCHOREOGRAPH PIXEL DEBUGGER%c\n%c${icons[level]}  ${message}${
+      key ? `%c\n→ %c${key}` : "%c%c"
+    }`,
+    titleCss,
+    "",
+    messageCss,
+    "",
+    keyCss,
+  ];
+
+  if (data) args.push(data);
+  console.info(...args);
+  if (key) config.logs[key] = message;
+};
+
+const send = (config, data) => {
+  const eventTypes = {
+    view: "product-viewed",
+    basket: "product-basketed",
+    purchase: "product-purchased",
+  };
+
+  const fields = { ...data };
+  delete fields.sku;
+
+  const url =
+    config.what === "scrape"
+      ? `https://d.lemonpi.io/scrapes${config.debug ? "?validate=true" : ""}`
+      : `https://d.lemonpi.io/a/${
+          config.who
+        }/product/event?e=${encodeURIComponent(
+          JSON.stringify({
+            "event-type": eventTypes[config.what],
+            sku: data.sku,
+          })
+        )}`;
+
+  if (config.what !== "scrape" && !config.debug) new Image().src = url;
+  else
+    fetch(
+      url,
+      config.what === "scrape"
+        ? {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              "advertiser-id": config.who,
+              sku: data.sku,
+              fields,
+            }),
+          }
+        : null
+    )
+      .then((response) => {
+        if (!config.debug) return;
+
+        response
+          .json()
+          .then((result) => {
+            if (response.ok) {
+              log(
+                config,
+                `"${config.what}" pixel successful, with warnings. Details:`,
+                { level: "warn", data: result }
+              );
+
+              try {
+                config.afterSend(data);
+              } catch (error) {
+                log(config, error.message, {
+                  level: "error",
+                  key: "afterSend",
+                });
+              }
+            } else
+              log(
+                config,
+                `"${config.what}" pixel failed: ${response.status} (${response.statusText}). Details:`,
+                { level: "error", data: result }
+              );
+          })
+          .catch(() => {
+            if (response.ok) {
+              log(config, `"${config.what}" pixel successful!`, {
+                level: "success",
+                data,
+              });
+
+              try {
+                config.afterSend(data);
+              } catch (error) {
+                log(config, error.message, {
+                  level: "error",
+                  key: "afterSend",
+                });
+              }
+            } else
+              log(
+                config,
+                `"${config.what}" pixel failed: ${response.status} (${response.statusText})`,
+                { level: "error" }
+              );
+          });
+      })
+      .catch((error) => {
+        if (config.debug)
+          log(config, `"${config.what}" pixel failed: ${error.message}`, {
+            level: "error",
+          });
+      });
+};
+
+const scrape = (config, element) => {
+  const data = {};
+  let hasErrors = false;
+
+  Object.keys(config.which).forEach((fieldName) => {
+    data[fieldName] = config.which[fieldName];
+
+    if (typeof data[fieldName] === "function") {
+      try {
+        data[fieldName] = data[fieldName](element);
+      } catch (error) {
+        log(config, error.message, {
+          level: "error",
+          key: `which.${fieldName}`,
+        });
+
+        hasErrors = true;
+      }
+    }
+
+    if (typeof data[fieldName] === "string")
+      data[fieldName] = data[fieldName].replace(/\s+/g, " ").trim();
+
+    if (data[fieldName] == null || data[fieldName] === "")
+      if (!config.optionalFields.includes(fieldName)) {
+        log(config, "This required field's value is empty", {
+          level: "error",
+          key: `which.${fieldName}`,
+        });
+
+        hasErrors = true;
+      } else data[fieldName] = null;
+  });
+
+  const jsonString = JSON.stringify(data);
+
+  if (!hasErrors && config.lastJsonString !== jsonString) {
+    log(config, `Scraped data for "${config.what}" pixel:`, { data });
+
+    try {
+      config.beforeSend(data, (newData) => {
+        if (config.what !== "scrape" && Array.isArray(newData.sku))
+          newData.sku.forEach((sku) => send(config, { ...newData, sku }));
+        else send(config, newData);
+      });
+    } catch (error) {
+      log(config, error.message, { level: "error", key: "beforeSend" });
+    }
+
+    config.lastJsonString = jsonString;
+    config.logs = {};
+  }
+};
+
+const cycle = (config) => {
+  if (!config.where.test(location.href)) {
+    log(
+      config,
+      `RegExp ${config.where.toString()} does not match ${location.href}`,
+      { level: "warn", key: "where" }
+    );
+  } else if (document.querySelector('html[class*="translated-"]')) {
+    log(
+      config,
+      "This page has been translated by the browser, and will be excluded",
+      { level: "warn", key: "(browser translation)" }
+    );
+  } else if (config.when) {
+    try {
+      let elements = config.when.elements();
+      if (!elements.forEach) elements = [elements];
+
+      elements.forEach((element) => {
+        if (!element.hasAttribute(`choreograph-${config.when.listener}`)) {
+          element.addEventListener(config.when.listener, () =>
+            scrape(config, element)
+          );
+
+          element.setAttribute(`choreograph-${config.when.listener}`, "");
+        }
+      });
+    } catch (error) {
+      log(config, error.message, { level: "error", key: "when.elements" });
+    }
+  } else {
+    scrape(config);
+  }
+
+  setTimeout(() => cycle(config), 750);
+};
+
+const validateConfig = (config) => {
+  if (typeof config.who !== "number")
+    log(config, "Please use a number", { level: "error", key: "who" });
+  else if (!["scrape", "view", "basket", "purchase"].includes(config.what))
+    log(config, "Please use scrape, view, basket, or purchase", {
+      level: "error",
+      key: "what",
+    });
+  else if (!(config.where instanceof RegExp))
+    log(config, "Please use a regular expression", {
+      level: "error",
+      key: "where",
+    });
+  else if (typeof config.which !== "object" || !config.which.sku)
+    log(config, "Please provide an SKU", { level: "error", key: "which.sku" });
+  else return true;
+};
+
+class ChoreographCreatePixel {
+  constructor(userConfig) {
+    const config = {
+      debug: /(pixel|lemonpi)_debug/i.test(location.href),
+      beforeSend: (data, callback) => callback(data),
+      afterSend: () => {},
+      optionalFields: [],
+      ...userConfig,
+      logs: {},
+    };
+
+    if (validateConfig(config)) cycle(config);
+  }
+
+  static getUrl(config) {
+    let url = `${location.protocol}//${location.host}${location.pathname}`;
+    const parameters = new URLSearchParams(window.location.search);
+
+    if (config) {
+      let paramAdded = false;
+
+      if (config.allowedParameters && config.allowedParameters.length) {
+        config.allowedParameters.forEach((parameter) => {
+          const separator = paramAdded ? "&" : "?";
+          const key = encodeURI(parameter);
+          const value = parameters.get(parameter);
+
+          if (value != null) {
+            url += `${separator}${key}=${encodeURI(value)}`;
+            paramAdded = true;
+          }
+        });
+      }
+
+      if (config.customParameters) {
+        const parameters = Object.keys(config.customParameters);
+
+        parameters.forEach((parameter) => {
+          const separator = paramAdded ? "&" : "?";
+          const key = encodeURI(parameter);
+          const value = encodeURI(config.customParameters[parameter]);
+          url += `${separator}${key}=${value}`;
+          paramAdded = true;
+        });
+      }
+
+      if (config.allowHash) {
+        url += window.location.hash;
+      }
+    }
+
+    return url;
+  }
+}
+
+module.exports = ChoreographCreatePixel;

package/dist/bundle.esm.js

@@ -0,0 +1,300 @@
+/*! choreograph-create-pixel v0.1.0 2022/09/15 */
+const log = (
+  config,
+  message,
+  { level = "info", key = null, data = undefined }
+) => {
+  if (!config.debug || config.logs[key] === message) return;
+
+  const colors = {
+    error: "#f44336",
+    warn: "#ffa726",
+    success: "#66bb6a",
+    info: "#29b6f6",
+  };
+
+  const icons = { error: "⛔️", warn: "⚠️", success: "✅", info: "ℹ️" };
+  const titleCss =
+    "font-family:HelveticaNeue;font-weight:700;margin:1em 0 1.2em 0;font-size:80%;";
+  const messageCss = `font-family:HelveticaNeue;font-size:120%;margin-bottom:.5em;color:${colors[level]}`;
+  const keyCss =
+    "font-family:monospace;font-size:120%;border:1px solid;border-radius:5px;margin-bottom:1em;padding:.2em .6em";
+
+  const args = [
+    `%cCHOREOGRAPH PIXEL DEBUGGER%c\n%c${icons[level]}  ${message}${
+      key ? `%c\n→ %c${key}` : "%c%c"
+    }`,
+    titleCss,
+    "",
+    messageCss,
+    "",
+    keyCss,
+  ];
+
+  if (data) args.push(data);
+  console.info(...args);
+  if (key) config.logs[key] = message;
+};
+
+const send = (config, data) => {
+  const eventTypes = {
+    view: "product-viewed",
+    basket: "product-basketed",
+    purchase: "product-purchased",
+  };
+
+  const fields = { ...data };
+  delete fields.sku;
+
+  const url =
+    config.what === "scrape"
+      ? `https://d.lemonpi.io/scrapes${config.debug ? "?validate=true" : ""}`
+      : `https://d.lemonpi.io/a/${
+          config.who
+        }/product/event?e=${encodeURIComponent(
+          JSON.stringify({
+            "event-type": eventTypes[config.what],
+            sku: data.sku,
+          })
+        )}`;
+
+  if (config.what !== "scrape" && !config.debug) new Image().src = url;
+  else
+    fetch(
+      url,
+      config.what === "scrape"
+        ? {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              "advertiser-id": config.who,
+              sku: data.sku,
+              fields,
+            }),
+          }
+        : null
+    )
+      .then((response) => {
+        if (!config.debug) return;
+
+        response
+          .json()
+          .then((result) => {
+            if (response.ok) {
+              log(
+                config,
+                `"${config.what}" pixel successful, with warnings. Details:`,
+                { level: "warn", data: result }
+              );
+
+              try {
+                config.afterSend(data);
+              } catch (error) {
+                log(config, error.message, {
+                  level: "error",
+                  key: "afterSend",
+                });
+              }
+            } else
+              log(
+                config,
+                `"${config.what}" pixel failed: ${response.status} (${response.statusText}). Details:`,
+                { level: "error", data: result }
+              );
+          })
+          .catch(() => {
+            if (response.ok) {
+              log(config, `"${config.what}" pixel successful!`, {
+                level: "success",
+                data,
+              });
+
+              try {
+                config.afterSend(data);
+              } catch (error) {
+                log(config, error.message, {
+                  level: "error",
+                  key: "afterSend",
+                });
+              }
+            } else
+              log(
+                config,
+                `"${config.what}" pixel failed: ${response.status} (${response.statusText})`,
+                { level: "error" }
+              );
+          });
+      })
+      .catch((error) => {
+        if (config.debug)
+          log(config, `"${config.what}" pixel failed: ${error.message}`, {
+            level: "error",
+          });
+      });
+};
+
+const scrape = (config, element) => {
+  const data = {};
+  let hasErrors = false;
+
+  Object.keys(config.which).forEach((fieldName) => {
+    data[fieldName] = config.which[fieldName];
+
+    if (typeof data[fieldName] === "function") {
+      try {
+        data[fieldName] = data[fieldName](element);
+      } catch (error) {
+        log(config, error.message, {
+          level: "error",
+          key: `which.${fieldName}`,
+        });
+
+        hasErrors = true;
+      }
+    }
+
+    if (typeof data[fieldName] === "string")
+      data[fieldName] = data[fieldName].replace(/\s+/g, " ").trim();
+
+    if (data[fieldName] == null || data[fieldName] === "")
+      if (!config.optionalFields.includes(fieldName)) {
+        log(config, "This required field's value is empty", {
+          level: "error",
+          key: `which.${fieldName}`,
+        });
+
+        hasErrors = true;
+      } else data[fieldName] = null;
+  });
+
+  const jsonString = JSON.stringify(data);
+
+  if (!hasErrors && config.lastJsonString !== jsonString) {
+    log(config, `Scraped data for "${config.what}" pixel:`, { data });
+
+    try {
+      config.beforeSend(data, (newData) => {
+        if (config.what !== "scrape" && Array.isArray(newData.sku))
+          newData.sku.forEach((sku) => send(config, { ...newData, sku }));
+        else send(config, newData);
+      });
+    } catch (error) {
+      log(config, error.message, { level: "error", key: "beforeSend" });
+    }
+
+    config.lastJsonString = jsonString;
+    config.logs = {};
+  }
+};
+
+const cycle = (config) => {
+  if (!config.where.test(location.href)) {
+    log(
+      config,
+      `RegExp ${config.where.toString()} does not match ${location.href}`,
+      { level: "warn", key: "where" }
+    );
+  } else if (document.querySelector('html[class*="translated-"]')) {
+    log(
+      config,
+      "This page has been translated by the browser, and will be excluded",
+      { level: "warn", key: "(browser translation)" }
+    );
+  } else if (config.when) {
+    try {
+      let elements = config.when.elements();
+      if (!elements.forEach) elements = [elements];
+
+      elements.forEach((element) => {
+        if (!element.hasAttribute(`choreograph-${config.when.listener}`)) {
+          element.addEventListener(config.when.listener, () =>
+            scrape(config, element)
+          );
+
+          element.setAttribute(`choreograph-${config.when.listener}`, "");
+        }
+      });
+    } catch (error) {
+      log(config, error.message, { level: "error", key: "when.elements" });
+    }
+  } else {
+    scrape(config);
+  }
+
+  setTimeout(() => cycle(config), 750);
+};
+
+const validateConfig = (config) => {
+  if (typeof config.who !== "number")
+    log(config, "Please use a number", { level: "error", key: "who" });
+  else if (!["scrape", "view", "basket", "purchase"].includes(config.what))
+    log(config, "Please use scrape, view, basket, or purchase", {
+      level: "error",
+      key: "what",
+    });
+  else if (!(config.where instanceof RegExp))
+    log(config, "Please use a regular expression", {
+      level: "error",
+      key: "where",
+    });
+  else if (typeof config.which !== "object" || !config.which.sku)
+    log(config, "Please provide an SKU", { level: "error", key: "which.sku" });
+  else return true;
+};
+
+class ChoreographCreatePixel {
+  constructor(userConfig) {
+    const config = {
+      debug: /(pixel|lemonpi)_debug/i.test(location.href),
+      beforeSend: (data, callback) => callback(data),
+      afterSend: () => {},
+      optionalFields: [],
+      ...userConfig,
+      logs: {},
+    };
+
+    if (validateConfig(config)) cycle(config);
+  }
+
+  static getUrl(config) {
+    let url = `${location.protocol}//${location.host}${location.pathname}`;
+    const parameters = new URLSearchParams(window.location.search);
+
+    if (config) {
+      let paramAdded = false;
+
+      if (config.allowedParameters && config.allowedParameters.length) {
+        config.allowedParameters.forEach((parameter) => {
+          const separator = paramAdded ? "&" : "?";
+          const key = encodeURI(parameter);
+          const value = parameters.get(parameter);
+
+          if (value != null) {
+            url += `${separator}${key}=${encodeURI(value)}`;
+            paramAdded = true;
+          }
+        });
+      }
+
+      if (config.customParameters) {
+        const parameters = Object.keys(config.customParameters);
+
+        parameters.forEach((parameter) => {
+          const separator = paramAdded ? "&" : "?";
+          const key = encodeURI(parameter);
+          const value = encodeURI(config.customParameters[parameter]);
+          url += `${separator}${key}=${value}`;
+          paramAdded = true;
+        });
+      }
+
+      if (config.allowHash) {
+        url += window.location.hash;
+      }
+    }
+
+    return url;
+  }
+}
+
+export { ChoreographCreatePixel as default };

package/dist/bundle.iife.js

@@ -0,0 +1,2 @@
+/*! choreograph-create-pixel v0.1.0 2022/09/15 */
+var ChoreographCreatePixel=function(){"use strict";function e(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function t(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?e(Object(n),!0).forEach((function(e){o(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):e(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var a=function(e,t,r){var n,o=r.level,a=void 0===o?"info":o,c=r.key,i=void 0===c?null:c,s=r.data,l=void 0===s?void 0:s;if(e.debug&&e.logs[i]!==t){var u="font-family:HelveticaNeue;font-size:120%;margin-bottom:.5em;color:".concat({error:"#f44336",warn:"#ffa726",success:"#66bb6a",info:"#29b6f6"}[a]),f=["%cCHOREOGRAPH PIXEL DEBUGGER%c\n%c".concat({error:"⛔️",warn:"⚠️",success:"✅",info:"ℹ️"}[a],"  ").concat(t).concat(i?"%c\n→ %c".concat(i):"%c%c"),"font-family:HelveticaNeue;font-weight:700;margin:1em 0 1.2em 0;font-size:80%;","",u,"","font-family:monospace;font-size:120%;border:1px solid;border-radius:5px;margin-bottom:1em;padding:.2em .6em"];l&&f.push(l),(n=console).info.apply(n,f),i&&(e.logs[i]=t)}},c=function(e,r){var n=t({},r);delete n.sku;var o="scrape"===e.what?"https://d.lemonpi.io/scrapes".concat(e.debug?"?validate=true":""):"https://d.lemonpi.io/a/".concat(e.who,"/product/event?e=").concat(encodeURIComponent(JSON.stringify({"event-type":{view:"product-viewed",basket:"product-basketed",purchase:"product-purchased"}[e.what],sku:r.sku})));"scrape"===e.what||e.debug?fetch(o,"scrape"===e.what?{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({"advertiser-id":e.who,sku:r.sku,fields:n})}:null).then((function(t){e.debug&&t.json().then((function(n){if(t.ok){a(e,'"'.concat(e.what,'" pixel successful, with warnings. Details:'),{level:"warn",data:n});try{e.afterSend(r)}catch(t){a(e,t.message,{level:"error",key:"afterSend"})}}else a(e,'"'.concat(e.what,'" pixel failed: ').concat(t.status," (").concat(t.statusText,"). Details:"),{level:"error",data:n})})).catch((function(){if(t.ok){a(e,'"'.concat(e.what,'" pixel successful!'),{level:"success",data:r});try{e.afterSend(r)}catch(t){a(e,t.message,{level:"error",key:"afterSend"})}}else a(e,'"'.concat(e.what,'" pixel failed: ').concat(t.status," (").concat(t.statusText,")"),{level:"error"})}))})).catch((function(t){e.debug&&a(e,'"'.concat(e.what,'" pixel failed: ').concat(t.message),{level:"error"})})):(new Image).src=o},i=function(e,r){var n={},o=!1;Object.keys(e.which).forEach((function(t){if(n[t]=e.which[t],"function"==typeof n[t])try{n[t]=n[t](r)}catch(r){a(e,r.message,{level:"error",key:"which.".concat(t)}),o=!0}"string"==typeof n[t]&&(n[t]=n[t].replace(/\s+/g," ").trim()),null!=n[t]&&""!==n[t]||(e.optionalFields.includes(t)?n[t]=null:(a(e,"This required field's value is empty",{level:"error",key:"which.".concat(t)}),o=!0))}));var i=JSON.stringify(n);if(!o&&e.lastJsonString!==i){a(e,'Scraped data for "'.concat(e.what,'" pixel:'),{data:n});try{e.beforeSend(n,(function(r){"scrape"!==e.what&&Array.isArray(r.sku)?r.sku.forEach((function(n){return c(e,t(t({},r),{},{sku:n}))})):c(e,r)}))}catch(t){a(e,t.message,{level:"error",key:"beforeSend"})}e.lastJsonString=i,e.logs={}}},s=function e(t){if(t.where.test(location.href))if(document.querySelector('html[class*="translated-"]'))a(t,"This page has been translated by the browser, and will be excluded",{level:"warn",key:"(browser translation)"});else if(t.when)try{var r=t.when.elements();r.forEach||(r=[r]),r.forEach((function(e){e.hasAttribute("choreograph-".concat(t.when.listener))||(e.addEventListener(t.when.listener,(function(){return i(t,e)})),e.setAttribute("choreograph-".concat(t.when.listener),""))}))}catch(e){a(t,e.message,{level:"error",key:"when.elements"})}else i(t);else a(t,"RegExp ".concat(t.where.toString()," does not match ").concat(location.href),{level:"warn",key:"where"});setTimeout((function(){return e(t)}),750)};return function(){function e(n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e);var o=t(t({debug:/(pixel|lemonpi)_debug/i.test(location.href),beforeSend:function(e,t){return t(e)},afterSend:function(){},optionalFields:[]},n),{},{logs:{}});(function(e){if("number"!=typeof e.who)a(e,"Please use a number",{level:"error",key:"who"});else if(["scrape","view","basket","purchase"].includes(e.what))if(e.where instanceof RegExp){if("object"===r(e.which)&&e.which.sku)return!0;a(e,"Please provide an SKU",{level:"error",key:"which.sku"})}else a(e,"Please use a regular expression",{level:"error",key:"where"});else a(e,"Please use scrape, view, basket, or purchase",{level:"error",key:"what"})})(o)&&s(o)}var o,c,i;return o=e,i=[{key:"getUrl",value:function(e){var t="".concat(location.protocol,"//").concat(location.host).concat(location.pathname),r=new URLSearchParams(window.location.search);if(e){var n=!1;e.allowedParameters&&e.allowedParameters.length&&e.allowedParameters.forEach((function(e){var o=n?"&":"?",a=encodeURI(e),c=r.get(e);null!=c&&(t+="".concat(o).concat(a,"=").concat(encodeURI(c)),n=!0)})),e.customParameters&&Object.keys(e.customParameters).forEach((function(r){var o=n?"&":"?",a=encodeURI(r),c=encodeURI(e.customParameters[r]);t+="".concat(o).concat(a,"=").concat(c),n=!0})),e.allowHash&&(t+=window.location.hash)}return t}}],(c=null)&&n(o.prototype,c),i&&n(o,i),Object.defineProperty(o,"prototype",{writable:!1}),e}()}();

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "choreograph-create-pixel",
+  "version": "0.1.0",
+  "author": "Rick Stevens <rick.stevens@choreograph.com> (https://www.lemonpi.io/)",
+  "repository": "github:rick-stevens/choreograph-create-pixel",
+  "license": "ISC",
+  "main": "dist/bundle.cjs.js",
+  "module": "dist/bundle.esm.js",
+  "browser": "dist/bundle.iife.js",
+  "unpkg": "dist/bundle.iife.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "lint": "eslint --ignore-path .gitignore .",
+    "format": "prettier --ignore-path .gitignore --check . '!**/*.{js,jsx,vue}'",
+    "build": "rollup -c",
+    "dev": "rollup -cw",
+    "prepare": "npm run lint && npm run format && npm run build"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-eslint": "^8.0.2",
+    "eslint": "^8.23.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "moment": "^2.29.4",
+    "prettier": "^2.7.1",
+    "rollup": "^2.79.0",
+    "rollup-plugin-terser": "^7.0.2"
+  }
+}