From be95ce377288e936d2bd27b451119abe3ccffea8 Mon Sep 17 00:00:00 2001 From: Stuart Yamartino Date: Wed, 13 Feb 2019 13:43:25 -0500 Subject: [PATCH] Encode uri component (#19) * encodeURIComponent on each value before combining * Update README.md * bump version --- README.md | 22 +++++++++------------- dist/openpixel.js | 8 ++++---- dist/openpixel.min.js | 2 +- gulpfile.js | 2 +- package.json | 4 ++-- src/helpers.js | 2 +- src/pixel.js | 8 ++++---- 7 files changed, 22 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 6eac388..8be1f05 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Openpixel is a customizable JavaScript library for building tracking pixels. Ope At Dockwa we built openpixel to solve our own problems of implementing a tracking service that our marinas could put on their website to track traffic and attribution to the reservations coming through our platform. -Openpixel handles the hard things about building a tracking library the will be go onto a clients website. It handles things like tracking unique users with cookies, tracking utm tags and persisting them to that users session, getting all of the information about the clients browser and device, and many other neat tricks for performant and accurate analytics. +Openpixel handles the hard things about building a tracking library so you don't have to. It handles things like tracking unique users with cookies, tracking utm tags and persisting them to that users session, getting all of the information about the clients browser and device, and many other neat tricks for performant and accurate analytics. Openpixel has two parts, the snippet (`snippet.html`), and the core (`openpixel.min.js`). @@ -35,31 +35,27 @@ You can also pass a string or json as the third parameter to send other data wit opix("event","reservation requested", {someData: 1, otherData: "cool"}) ``` -## Setup +## Setup and Customize Openpixel needs to be customized for your needs before you can start using it. Luckily for you it is really easy to do. 1. Make sure you have [node.js](https://nodejs.org/en/download/) installed on your computer. -2. Install the dependencies for compiling openpixel via the command line with `npm install` -3. Update the variables at the top of the `gulpfile.js` for your custom configurations. Each configuration has comments explaining it. -4. Run gulp via the command `npm run dist`. +2. Install openpixel `npm i openpixel` +3. Install the dependencies for compiling openpixel via the command line with `npm install` +4. Update the variables at the top of the `gulpfile.js` for your custom configurations. Each configuration has comments explaining it. +5. Run gulp via the command `npm run gulp`. -The core files and the snippet are located under the `src/` directory. If you are working on those files you can run `gulp watch` and that will watch for any files changed in the `src/` directory and rerun gulp to recompile these files and drop them in the `dist/` directory. +The core files and the snippet are located under the `src/` directory. If you are working on those files you can run `npm run watch` and that will watch for any files changed in the `src/` directory and rerun gulp to recompile these files and drop them in the `dist/` directory. The `src/snippet.js` file is what is compiled into the `dist/snippet.html` file. All of the other files in the `src` directory are compiled into the `dist/openpixel.js` and the minified `dist/openpixel.min.js` files. ## Continuous integration You may also need to build different versions of openpixel for different environments with custom options. -Next environment variables can be used to configure the build: - +Environment variables can be used to configure the build: ``` OPIX_DESTINATION_FOLDER, OPIX_PIXEL_ENDPOINT, OPIX_JS_ENDPOINT, OPIX_VERSIONOPIX_PIXEL_FUNC_NAME, OPIX_VERSION, OPIX_HEADER_COMMENT ``` -So you can install openpixel as npm module -```npm i -ED openpixel``` - -and use it from your bash or js code - +You can install openpixel as an npm module `npm i -ED openpixel` and use it from your bash or js code. ``` OPIX_DESTINATION_FOLDER=/home/ubuntu/app/dist OPIX_PIXEL_ENDPOINT=http://localhost:8000/pixel.gif OPIX_JS_ENDPOINT=http://localhost:800/pixel_script.js OPIX_PIXEL_FUNC_NAME=track-function OPIX_VERSION=1 OPIX_HEADER_COMMENT="// My custom tracker\n" npx gulp --gulpfile ./node_modules/openpixel/gulpfile.js run ``` diff --git a/dist/openpixel.js b/dist/openpixel.js index 07aebe0..ad7176c 100644 --- a/dist/openpixel.js +++ b/dist/openpixel.js @@ -17,7 +17,7 @@ var Config = { }; var isset = function isset(variable) { - return typeof variable !== "undefined" && variable !== null && variable !== ''; + return typeof variable !== 'undefined' && variable !== null && variable !== ''; }; var now = function now() { @@ -288,9 +288,9 @@ function () { key: "setParam", value: function setParam(key, val) { if (isset(val)) { - this.params.push(key + '=' + val); + this.params.push("".concat(key, "=").concat(encodeURIComponent(val))); } else { - this.params.push(key + '='); + this.params.push("".concat(key, "=")); } } }, { @@ -316,7 +316,7 @@ function () { }, { key: "getSourceUrl", value: function getSourceUrl() { - return pixelEndpoint + '?' + encodeURI(this.params.join('&')); + return "".concat(pixelEndpoint, "?").concat(this.params.join('&')); } }]); diff --git a/dist/openpixel.min.js b/dist/openpixel.min.js index c8da87d..9ae5251 100644 --- a/dist/openpixel.min.js +++ b/dist/openpixel.min.js @@ -1,2 +1,2 @@ // Open Pixel v1.0.2 | Published By Dockwa | Created By Stuart Yamartino | MIT License -!function(i,u,r,t,e,n){"use strict";function o(t,e){for(var n=0;n