choreograph-create-pixel 0.1.11 → 1.0.0

package/README.md

@@ -7,8 +7,8 @@ This library lets you apply best practises to [Choreograph Create](https://www.l
 - [x] Supports **scrape**, **view**, **basket**, and **purchase** pixels
 - [x] Supports dynamic page changes
 - [x] Continuous URL validation
-- [x] Condition pixels through user interaction
-- [x] Prevents scraping browser-translated data
+- [x] Optionally trigger by user interaction
+- [x] Prevents scraping browser-translated pages
 - [x] Console debugger
 
 ## Quickstart
@@ -121,6 +121,7 @@ Besides **scrape** and **view** pixels, this library also supports **basket** an
   // (Optional) When should the pixel be enabled?
   when: {
     listener: "click",
+
     elements: function () {
       return document.querySelectorAll("button.basket[data-sku]");
     },
@@ -141,13 +142,21 @@ Besides **scrape** and **view** pixels, this library also supports **basket** an
 {
   who: 0,
   what: "purchase",
-  where: /example\.com\/thank-you-for-purchasing/,
+  where: /example\.com\/cart/,
+
+  when: {
+    listener: "click",
+
+    elements: function () {
+      return document.querySelectorAll("button.checkout");
+    },
+  },
 
   which: {
-    // sku accepts an array of strings to enable multiple segment pixels at once
+    // which.sku supports returning an array of strings
     sku: function () {
-      return [].map.call(document.querySelectorAll('.purchased-product[data-sku]'), function (element) {
-        return element.getAttribute("data-sku");
+      return window.dataLayer[0].cart.map(function (product) {
+        return product.sku;
       });
     },
   },
@@ -168,7 +177,7 @@ Enable the console debugger by adding `?pixel_debug` or `#pixel_debug` to the pa
 | `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`           | Object                               | Use this property when you want to enable the pixel only 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.                                                                                                                                                              | `[]`                                            |

package/dist/bundle.cjs.js

@@ -1,4 +1,4 @@
-/*! choreograph-create-pixel v0.1.11 2022/09/20 */
+/*! choreograph-create-pixel v1.0.0 2022/09/21 */
 'use strict';
 
 class ChoreographCreatePixel {

package/dist/bundle.esm.js

@@ -1,4 +1,4 @@
-/*! choreograph-create-pixel v0.1.11 2022/09/20 */
+/*! choreograph-create-pixel v1.0.0 2022/09/21 */
 class ChoreographCreatePixel {
   constructor(userConfig) {
     this.previouslyScrapedJsonString = null;

package/dist/bundle.iife.js

@@ -1,2 +1,2 @@
-/*! choreograph-create-pixel v0.1.11 2022/09/20 */
+/*! choreograph-create-pixel v1.0.0 2022/09/21 */
 var ChoreographCreatePixel=function(){"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function t(t){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?e(Object(o),!0).forEach((function(e){r(t,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):e(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}function n(e){return n="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},n(e)}function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var i=function(){function e(n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.previouslyScrapedJsonString=null,this.logs=[],this.settings={colors:{error:"#f44336",warn:"#ffa726",success:"#66bb6a"},icons:{scrape:"🔍",view:"👀",basket:"🛒",purchase:"🧾"},titleCss:"font:700 80% HelveticaNeue;margin:12px 0 8px",messageCss:"font:500 120% HelveticaNeue;margin-bottom:12px",eventTypes:{view:"product-viewed",basket:"product-basketed",purchase:"product-purchased"}},this.config=t({debug:/(pixel|lemonpi)_debug/i.test(location.href),beforeSend:function(e,t){return t(e)},afterSend:function(){},optionalFields:[]},n),this.validateConfig()&&this.cycle()}var i,s,c;return i=e,s=[{key:"log",value:function(e,t){var n,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;if(this.config.debug&&!this.logs.includes(t)){var r=["%c".concat(this.settings.icons[this.config.what],"  ").concat(this.config.what.toUpperCase()," PIXEL DEBUG%c\n%c").concat(t),this.settings.titleCss,"",this.settings.colors[e]?"".concat(this.settings.messageCss,";color:").concat(this.settings.colors[e]):this.settings.messageCss];o&&r.push(o),(n=console).info.apply(n,r),this.logs.push(t)}}},{key:"validateConfig",value:function(){if("number"!=typeof this.config.who)this.log("error","Please use a number",{who:this.config.who});else if(["scrape","view","basket","purchase"].includes(this.config.what))if(this.config.where instanceof RegExp){if("object"===n(this.config.which)&&this.config.which.sku)return!0;this.log("error","Please provide an SKU",{which:this.config.which})}else this.log("error","Please use a regular expression",{where:this.config.where});else this.log("error","Please use scrape, view, basket, or purchase",{what:this.config.what})}},{key:"cycle",value:function(){var e=this;if(this.config.where.test(location.href))if("scrape"===this.config.what&&document.querySelector('html[class*="translated-"]'))this.log("warn","This page has been translated by the browser, and will be excluded");else if(this.config.when)try{var t=this.config.when.elements();t.forEach||(t=[t]),t.forEach((function(t){t.hasAttribute("choreograph-".concat(e.config.when.listener))||(t.addEventListener(e.config.when.listener,(function(){return e.scrape(t)})),t.setAttribute("choreograph-".concat(e.config.when.listener),""))}))}catch(e){this.log("error",e.message,{when:{elements:this.config.when.elements}})}else this.scrape();else this.log("warn",'Pattern does not match "'.concat(location.href,'"'),{where:this.config.where});setTimeout((function(){return e.cycle()}),750)}},{key:"scrape",value:function(e){var n=this,o={},i=!1;Object.keys(this.config.which).forEach((function(t){if(o[t]=n.config.which[t],"function"==typeof o[t])try{o[t]=o[t](e)}catch(e){n.config.optionalFields.includes(t)?delete o[t]:(n.log("error",e.message,{which:r({},t,n.config.which[t])}),i=!0)}"string"==typeof o[t]&&(o[t]=o[t].replace(/\s+/g," ").trim()),null!=o[t]&&""!==o[t]||(n.config.optionalFields.includes(t)?o[t]=null:(n.log("error","This required field's value is empty",{which:r({},t,o[t])}),i=!0))}));var s=JSON.stringify(o);if(!i&&this.previouslyScrapedJsonString!==s){try{this.config.beforeSend(o,(function(e){"scrape"!==n.config.what&&Array.isArray(e.sku)?e.sku.forEach((function(o){return n.send(t(t({},e),{},{sku:o}))})):n.send(e)}))}catch(e){this.log("error",e.message,{beforeSend:this.config.beforeSend})}this.previouslyScrapedJsonString=s,this.logs.length=0}}},{key:"send",value:function(e){var n=this,o=t({},e);delete o.sku;var r="scrape"===this.config.what?"https://d.lemonpi.io/scrapes".concat(this.config.debug?"?validate=true":""):"https://d.lemonpi.io/a/".concat(this.config.who,"/product/event?e=").concat(encodeURIComponent(JSON.stringify({"event-type":this.settings.eventTypes[this.config.what],sku:e.sku})));"scrape"===this.config.what||this.config.debug?fetch(r,"scrape"===this.config.what?{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({"advertiser-id":this.config.who,sku:e.sku,fields:o})}:null).then((function(t){return t.json().then((function(o){if(t.ok){n.log("warn","Successful, with warnings. Details:",o);try{n.config.afterSend(e)}catch(e){n.log("error",e.message,{afterSend:n.config.afterSend})}}else n.log("error","Failed: ".concat(t.status," (").concat(t.statusText,"). Details:"),o);n.logs.length=0})).catch((function(){if(t.ok){n.log("success","Successful!",e);try{n.config.afterSend(e)}catch(e){n.log("error",e.message,{afterSend:n.config.afterSend})}}else n.log("error","Failed: ".concat(t.status," (").concat(t.statusText,"). Details:"),t);n.logs.length=0}))})).catch((function(e){n.log("error","Failed: ".concat(e.message)),n.logs.length=0})):(new Image).src=r}}],c=[{key:"getUrl",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.allowedQueryParameters,n=void 0===t?[]:t,o=e.allowHash,r=void 0!==o&&o,i="".concat(location.protocol,"//").concat(location.host).concat(location.pathname),s=new URLSearchParams(location.search);return n.reduce((function(e,t){var n=e?"&":"?",o=encodeURI(t),r=s.get(t);return null!=r?(i+="".concat(n).concat(o).concat(""===r?"":"=".concat(encodeURI(r))),!0):e}),!1),r&&(i+=location.hash),i}},{key:"getAllPathSegments",value:function(){return location.pathname.split("/").filter((function(e){return e})).map((function(e){return decodeURI(e)}))}},{key:"getPathSegment",value:function(e){return this.getAllPathSegments()[e]}},{key:"getAllQueryParameters",value:function(){return location.search.replace(/^\?/,"").split("&").filter((function(e){return e})).reduce((function(e,n){return t(t({},e),{},r({},decodeURI(n.split("=")[0]),decodeURI(n.split("=")[1]||"")))}),{})}},{key:"getQueryParameter",value:function(e){return this.getAllQueryParameters()[e]}}],s&&o(i.prototype,s),c&&o(i,c),Object.defineProperty(i,"prototype",{writable:!1}),e}();return i}();

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "choreograph-create-pixel",
-  "version": "0.1.11",
+  "description": "This library lets you apply best practises to Choreograph Create pixel development and implementation.",
+  "version": "1.0.0",
   "author": "Rick Stevens <rick.stevens@choreograph.com> (https://www.lemonpi.io/)",
-  "repository": "github:rick-stevens/choreograph-create-pixel",
+  "repository": "gitlab:GreenhouseGroup/lemonpi/solutions/choreograph-create-pixel",
+  "homepage": "https://lemonpi.io/",
   "license": "ISC",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
@@ -16,7 +18,7 @@
     "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"
+    "prepare": "npm run build"
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",