Skip to content

Repository files navigation

Openpixel

Powered by Dockwa

About

Openpixel is a customizable JavaScript library for building tracking pixels. Openpixel uses the latest technologies available with fall back support for older browsers. For example is the browser supports web beacons, openpixel will send a web beacon, if it doesn't support them it will inject a 1x1 gif into the page with tracking information as part of the images get request.

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 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).

Snippet

The openpixel snippet (found at src/snippet.html) is the HTML code that will be put onto any webpage that will be reporting analytics. For Dockwa, our marina websites put this on every page of their website so that it would load the JS to execute beacons back to a tracking server. The snippet can be placed anywhere on the page and it will load the core openpixel JS asynchronously. To be accurate, the first part of the snippet gets the timestamp as soon as it is loaded, applies an ID (just like a Google analytics ID, to be determined by you), and ques up a "pageload" event that will be sent as soon as the core JS has asynchronously loaded.

The snippet handles things like making sure the core JavaScript will always be loaded async and is cache busted ever 24 hours so you can update the core and have customers using the updates withing the next day.

Core

The openpixel core (found at src/openpixel.min.js) is the JavaScript code that that the snippet loads asynchronously onto the clients website. The core is what does all of the heavy lifting. The core handles settings cookies, collecting utms, and of course sending beacons and tracking pixels of data when events are called.

Events

There are 2 automatic events, the pageload event which is sent as the main event when a page is loaded, you could consider it to be a "hit". The other event is pageclose and this is sent when the pages is closed or navigated away from. For example, to calculate how long a user viewed a page, you could calculate the difference between the timestamps on pageload and pageclose and those timestamps will be accurate because they are triggered on the client side when the events actually happened.

Openpixel is flexible with events though, you can make calls to any events with any data you want to be sent with the beacon. Whenever an event is called, it sends a beacon just like the other beacons that have a timestamp and everything else. Here is an example of a custom event being called. Note: In this case we are using the opix function name but this will be custom based on your build of openpixel.

opix('event','reservation_requested')

You can also pass a string or json as the third parameter to send other data with the event.

opix('event','reservation_requested',{someData: 1,otherData: 'cool'})opix('event','reservation_requested',{someData: 1,otherData: 'cool'})

You can also add an attribute to any HTML element that will automatically fire the event on click.

<buttondata-opix-event="special-button-click">Some Special Button</button>

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 installed on your computer.
  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 build.

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. 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

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 build

Tracking Data

Below is a table that has all of the keys, example values, and details on each value of information that is sent with each beacon on tracking pixel. A beacon might look something like this. Note: every key is always sent regardless of if it has a value so the structure will always be the same.

https://tracker.example.com/pixel.gif?id=R29X8&uid=1-ovbam3yz-iolwx617&ev=pageload&ed=&v=1&dl=http://edgartownharbor.com/&rl=&ts=1464811823300&de=UTF-8&sr=1680x1050&vp=874x952&cd=24&dt=Edgartown%20Harbormaster&bn=Chrome%2050&md=false&ua=Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_11_5)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/50.0.2661.102%20Safari/537.36&utm_source=&utm_medium=&utm_term=&utm_content=&utm_campaign=
KeyValueDetails
idSJO12ZWid for the app/website you are tracking
uid1-cwq4oelu-in95g8xyid of the user
evpageloadthe event that is being triggered
ed{'somedata': 123}optional event data that can be passed in, string or json string
v1openpixel js version number
dlhttp://example.com/document location
rlhttp://google.com/referrer location
ts1461175033655timestamp in microseconds
deUTF-8document encoding
sr1680x1050screen resolution
vp1680x295viewport
cd24color depth
dtExample Titledocument title
bnChrome 50browser name
mdfalsemobile device
uafull user agentuser agent
tz240timezone offset (minutes away from utc)
utm_sourceCampaign Source
utm_mediumCampaign Medium
utm_termCampaign Term
utm_contentCampaign Content
utm_campaignCampaign Name

About

Openpixel is a customizable library for building web tracking pixels.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - fjahn/openpixel: Openpixel is a customizable library for building web tracking pixels. · GitHub
Skip to content

Repository files navigation

Openpixel

Powered by Dockwa

About

Openpixel is a customizable JavaScript library for building tracking pixels. Openpixel uses the latest technologies available with fall back support for older browsers. For example is the browser supports web beacons, openpixel will send a web beacon, if it doesn't support them it will inject a 1x1 gif into the page with tracking information as part of the images get request.

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 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).

Snippet

The openpixel snippet (found at src/snippet.html) is the HTML code that will be put onto any webpage that will be reporting analytics. For Dockwa, our marina websites put this on every page of their website so that it would load the JS to execute beacons back to a tracking server. The snippet can be placed anywhere on the page and it will load the core openpixel JS asynchronously. To be accurate, the first part of the snippet gets the timestamp as soon as it is loaded, applies an ID (just like a Google analytics ID, to be determined by you), and ques up a "pageload" event that will be sent as soon as the core JS has asynchronously loaded.

The snippet handles things like making sure the core JavaScript will always be loaded async and is cache busted ever 24 hours so you can update the core and have customers using the updates withing the next day.

Core

The openpixel core (found at src/openpixel.min.js) is the JavaScript code that that the snippet loads asynchronously onto the clients website. The core is what does all of the heavy lifting. The core handles settings cookies, collecting utms, and of course sending beacons and tracking pixels of data when events are called.

Events

There are 2 automatic events, the pageload event which is sent as the main event when a page is loaded, you could consider it to be a "hit". The other event is pageclose and this is sent when the pages is closed or navigated away from. For example, to calculate how long a user viewed a page, you could calculate the difference between the timestamps on pageload and pageclose and those timestamps will be accurate because they are triggered on the client side when the events actually happened.

Openpixel is flexible with events though, you can make calls to any events with any data you want to be sent with the beacon. Whenever an event is called, it sends a beacon just like the other beacons that have a timestamp and everything else. Here is an example of a custom event being called. Note: In this case we are using the opix function name but this will be custom based on your build of openpixel.

opix('event','reservation_requested')

You can also pass a string or json as the third parameter to send other data with the event.

opix('event','reservation_requested',{someData: 1,otherData: 'cool'})opix('event','reservation_requested',{someData: 1,otherData: 'cool'})

You can also add an attribute to any HTML element that will automatically fire the event on click.

<buttondata-opix-event="special-button-click">Some Special Button</button>

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 installed on your computer.
  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 build.

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. 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

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 build

Tracking Data

Below is a table that has all of the keys, example values, and details on each value of information that is sent with each beacon on tracking pixel. A beacon might look something like this. Note: every key is always sent regardless of if it has a value so the structure will always be the same.

https://tracker.example.com/pixel.gif?id=R29X8&uid=1-ovbam3yz-iolwx617&ev=pageload&ed=&v=1&dl=http://edgartownharbor.com/&rl=&ts=1464811823300&de=UTF-8&sr=1680x1050&vp=874x952&cd=24&dt=Edgartown%20Harbormaster&bn=Chrome%2050&md=false&ua=Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_11_5)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/50.0.2661.102%20Safari/537.36&utm_source=&utm_medium=&utm_term=&utm_content=&utm_campaign=
KeyValueDetails
idSJO12ZWid for the app/website you are tracking
uid1-cwq4oelu-in95g8xyid of the user
evpageloadthe event that is being triggered
ed{'somedata': 123}optional event data that can be passed in, string or json string
v1openpixel js version number
dlhttp://example.com/document location
rlhttp://google.com/referrer location
ts1461175033655timestamp in microseconds
deUTF-8document encoding
sr1680x1050screen resolution
vp1680x295viewport
cd24color depth
dtExample Titledocument title
bnChrome 50browser name
mdfalsemobile device
uafull user agentuser agent
tz240timezone offset (minutes away from utc)
utm_sourceCampaign Source
utm_mediumCampaign Medium
utm_termCampaign Term
utm_contentCampaign Content
utm_campaignCampaign Name

About

Openpixel is a customizable library for building web tracking pixels.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - fjahn/openpixel: Openpixel is a customizable library for building web tracking pixels. · GitHub
Skip to content

Repository files navigation

Openpixel

Powered by Dockwa

About

Openpixel is a customizable JavaScript library for building tracking pixels. Openpixel uses the latest technologies available with fall back support for older browsers. For example is the browser supports web beacons, openpixel will send a web beacon, if it doesn't support them it will inject a 1x1 gif into the page with tracking information as part of the images get request.

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 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).

Snippet

The openpixel snippet (found at src/snippet.html) is the HTML code that will be put onto any webpage that will be reporting analytics. For Dockwa, our marina websites put this on every page of their website so that it would load the JS to execute beacons back to a tracking server. The snippet can be placed anywhere on the page and it will load the core openpixel JS asynchronously. To be accurate, the first part of the snippet gets the timestamp as soon as it is loaded, applies an ID (just like a Google analytics ID, to be determined by you), and ques up a "pageload" event that will be sent as soon as the core JS has asynchronously loaded.

The snippet handles things like making sure the core JavaScript will always be loaded async and is cache busted ever 24 hours so you can update the core and have customers using the updates withing the next day.

Core

The openpixel core (found at src/openpixel.min.js) is the JavaScript code that that the snippet loads asynchronously onto the clients website. The core is what does all of the heavy lifting. The core handles settings cookies, collecting utms, and of course sending beacons and tracking pixels of data when events are called.

Events

There are 2 automatic events, the pageload event which is sent as the main event when a page is loaded, you could consider it to be a "hit". The other event is pageclose and this is sent when the pages is closed or navigated away from. For example, to calculate how long a user viewed a page, you could calculate the difference between the timestamps on pageload and pageclose and those timestamps will be accurate because they are triggered on the client side when the events actually happened.

Openpixel is flexible with events though, you can make calls to any events with any data you want to be sent with the beacon. Whenever an event is called, it sends a beacon just like the other beacons that have a timestamp and everything else. Here is an example of a custom event being called. Note: In this case we are using the opix function name but this will be custom based on your build of openpixel.

opix('event','reservation_requested')

You can also pass a string or json as the third parameter to send other data with the event.

opix('event','reservation_requested',{someData: 1,otherData: 'cool'})opix('event','reservation_requested',{someData: 1,otherData: 'cool'})

You can also add an attribute to any HTML element that will automatically fire the event on click.

<buttondata-opix-event="special-button-click">Some Special Button</button>

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 installed on your computer.
  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 build.

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. 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

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 build

Tracking Data

Below is a table that has all of the keys, example values, and details on each value of information that is sent with each beacon on tracking pixel. A beacon might look something like this. Note: every key is always sent regardless of if it has a value so the structure will always be the same.

https://tracker.example.com/pixel.gif?id=R29X8&uid=1-ovbam3yz-iolwx617&ev=pageload&ed=&v=1&dl=http://edgartownharbor.com/&rl=&ts=1464811823300&de=UTF-8&sr=1680x1050&vp=874x952&cd=24&dt=Edgartown%20Harbormaster&bn=Chrome%2050&md=false&ua=Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_11_5)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/50.0.2661.102%20Safari/537.36&utm_source=&utm_medium=&utm_term=&utm_content=&utm_campaign=
KeyValueDetails
idSJO12ZWid for the app/website you are tracking
uid1-cwq4oelu-in95g8xyid of the user
evpageloadthe event that is being triggered
ed{'somedata': 123}optional event data that can be passed in, string or json string
v1openpixel js version number
dlhttp://example.com/document location
rlhttp://google.com/referrer location
ts1461175033655timestamp in microseconds
deUTF-8document encoding
sr1680x1050screen resolution
vp1680x295viewport
cd24color depth
dtExample Titledocument title
bnChrome 50browser name
mdfalsemobile device
uafull user agentuser agent
tz240timezone offset (minutes away from utc)
utm_sourceCampaign Source
utm_mediumCampaign Medium
utm_termCampaign Term
utm_contentCampaign Content
utm_campaignCampaign Name

About

Openpixel is a customizable library for building web tracking pixels.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - fjahn/openpixel: Openpixel is a customizable library for building web tracking pixels. · GitHub
Skip to content

Repository files navigation

Openpixel

Powered by Dockwa

About

Openpixel is a customizable JavaScript library for building tracking pixels. Openpixel uses the latest technologies available with fall back support for older browsers. For example is the browser supports web beacons, openpixel will send a web beacon, if it doesn't support them it will inject a 1x1 gif into the page with tracking information as part of the images get request.

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 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).

Snippet

The openpixel snippet (found at src/snippet.html) is the HTML code that will be put onto any webpage that will be reporting analytics. For Dockwa, our marina websites put this on every page of their website so that it would load the JS to execute beacons back to a tracking server. The snippet can be placed anywhere on the page and it will load the core openpixel JS asynchronously. To be accurate, the first part of the snippet gets the timestamp as soon as it is loaded, applies an ID (just like a Google analytics ID, to be determined by you), and ques up a "pageload" event that will be sent as soon as the core JS has asynchronously loaded.

The snippet handles things like making sure the core JavaScript will always be loaded async and is cache busted ever 24 hours so you can update the core and have customers using the updates withing the next day.

Core

The openpixel core (found at src/openpixel.min.js) is the JavaScript code that that the snippet loads asynchronously onto the clients website. The core is what does all of the heavy lifting. The core handles settings cookies, collecting utms, and of course sending beacons and tracking pixels of data when events are called.

Events

There are 2 automatic events, the pageload event which is sent as the main event when a page is loaded, you could consider it to be a "hit". The other event is pageclose and this is sent when the pages is closed or navigated away from. For example, to calculate how long a user viewed a page, you could calculate the difference between the timestamps on pageload and pageclose and those timestamps will be accurate because they are triggered on the client side when the events actually happened.

Openpixel is flexible with events though, you can make calls to any events with any data you want to be sent with the beacon. Whenever an event is called, it sends a beacon just like the other beacons that have a timestamp and everything else. Here is an example of a custom event being called. Note: In this case we are using the opix function name but this will be custom based on your build of openpixel.

opix('event','reservation_requested')

You can also pass a string or json as the third parameter to send other data with the event.

opix('event','reservation_requested',{someData: 1,otherData: 'cool'})opix('event','reservation_requested',{someData: 1,otherData: 'cool'})

You can also add an attribute to any HTML element that will automatically fire the event on click.

<buttondata-opix-event="special-button-click">Some Special Button</button>

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 installed on your computer.
  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 build.

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. 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

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 build

Tracking Data

Below is a table that has all of the keys, example values, and details on each value of information that is sent with each beacon on tracking pixel. A beacon might look something like this. Note: every key is always sent regardless of if it has a value so the structure will always be the same.

https://tracker.example.com/pixel.gif?id=R29X8&uid=1-ovbam3yz-iolwx617&ev=pageload&ed=&v=1&dl=http://edgartownharbor.com/&rl=&ts=1464811823300&de=UTF-8&sr=1680x1050&vp=874x952&cd=24&dt=Edgartown%20Harbormaster&bn=Chrome%2050&md=false&ua=Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_11_5)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/50.0.2661.102%20Safari/537.36&utm_source=&utm_medium=&utm_term=&utm_content=&utm_campaign=
KeyValueDetails
idSJO12ZWid for the app/website you are tracking
uid1-cwq4oelu-in95g8xyid of the user
evpageloadthe event that is being triggered
ed{'somedata': 123}optional event data that can be passed in, string or json string
v1openpixel js version number
dlhttp://example.com/document location
rlhttp://google.com/referrer location
ts1461175033655timestamp in microseconds
deUTF-8document encoding
sr1680x1050screen resolution
vp1680x295viewport
cd24color depth
dtExample Titledocument title
bnChrome 50browser name
mdfalsemobile device
uafull user agentuser agent
tz240timezone offset (minutes away from utc)
utm_sourceCampaign Source
utm_mediumCampaign Medium
utm_termCampaign Term
utm_contentCampaign Content
utm_campaignCampaign Name

About

Openpixel is a customizable library for building web tracking pixels.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' GitHub - fjahn/openpixel: Openpixel is a customizable library for building web tracking pixels. · GitHub
Skip to content

Repository files navigation

Openpixel

Powered by Dockwa

About

Openpixel is a customizable JavaScript library for building tracking pixels. Openpixel uses the latest technologies available with fall back support for older browsers. For example is the browser supports web beacons, openpixel will send a web beacon, if it doesn't support them it will inject a 1x1 gif into the page with tracking information as part of the images get request.

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 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).

Snippet

The openpixel snippet (found at src/snippet.html) is the HTML code that will be put onto any webpage that will be reporting analytics. For Dockwa, our marina websites put this on every page of their website so that it would load the JS to execute beacons back to a tracking server. The snippet can be placed anywhere on the page and it will load the core openpixel JS asynchronously. To be accurate, the first part of the snippet gets the timestamp as soon as it is loaded, applies an ID (just like a Google analytics ID, to be determined by you), and ques up a "pageload" event that will be sent as soon as the core JS has asynchronously loaded.

The snippet handles things like making sure the core JavaScript will always be loaded async and is cache busted ever 24 hours so you can update the core and have customers using the updates withing the next day.

Core

The openpixel core (found at src/openpixel.min.js) is the JavaScript code that that the snippet loads asynchronously onto the clients website. The core is what does all of the heavy lifting. The core handles settings cookies, collecting utms, and of course sending beacons and tracking pixels of data when events are called.

Events

There are 2 automatic events, the pageload event which is sent as the main event when a page is loaded, you could consider it to be a "hit". The other event is pageclose and this is sent when the pages is closed or navigated away from. For example, to calculate how long a user viewed a page, you could calculate the difference between the timestamps on pageload and pageclose and those timestamps will be accurate because they are triggered on the client side when the events actually happened.

Openpixel is flexible with events though, you can make calls to any events with any data you want to be sent with the beacon. Whenever an event is called, it sends a beacon just like the other beacons that have a timestamp and everything else. Here is an example of a custom event being called. Note: In this case we are using the opix function name but this will be custom based on your build of openpixel.

opix('event','reservation_requested')

You can also pass a string or json as the third parameter to send other data with the event.

opix('event','reservation_requested',{someData: 1,otherData: 'cool'})opix('event','reservation_requested',{someData: 1,otherData: 'cool'})

You can also add an attribute to any HTML element that will automatically fire the event on click.

<buttondata-opix-event="special-button-click">Some Special Button</button>

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 installed on your computer.
  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 build.

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. 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

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 build

Tracking Data

Below is a table that has all of the keys, example values, and details on each value of information that is sent with each beacon on tracking pixel. A beacon might look something like this. Note: every key is always sent regardless of if it has a value so the structure will always be the same.

https://tracker.example.com/pixel.gif?id=R29X8&uid=1-ovbam3yz-iolwx617&ev=pageload&ed=&v=1&dl=http://edgartownharbor.com/&rl=&ts=1464811823300&de=UTF-8&sr=1680x1050&vp=874x952&cd=24&dt=Edgartown%20Harbormaster&bn=Chrome%2050&md=false&ua=Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_11_5)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/50.0.2661.102%20Safari/537.36&utm_source=&utm_medium=&utm_term=&utm_content=&utm_campaign=
KeyValueDetails
idSJO12ZWid for the app/website you are tracking
uid1-cwq4oelu-in95g8xyid of the user
evpageloadthe event that is being triggered
ed{'somedata': 123}optional event data that can be passed in, string or json string
v1openpixel js version number
dlhttp://example.com/document location
rlhttp://google.com/referrer location
ts1461175033655timestamp in microseconds
deUTF-8document encoding
sr1680x1050screen resolution
vp1680x295viewport
cd24color depth
dtExample Titledocument title
bnChrome 50browser name
mdfalsemobile device
uafull user agentuser agent
tz240timezone offset (minutes away from utc)
utm_sourceCampaign Source
utm_mediumCampaign Medium
utm_termCampaign Term
utm_contentCampaign Content
utm_campaignCampaign Name

About

Openpixel is a customizable library for building web tracking pixels.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - fjahn/openpixel: Openpixel is a customizable library for building web tracking pixels. · GitHub
Skip to content

Repository files navigation

Openpixel

Powered by Dockwa

About

Openpixel is a customizable JavaScript library for building tracking pixels. Openpixel uses the latest technologies available with fall back support for older browsers. For example is the browser supports web beacons, openpixel will send a web beacon, if it doesn't support them it will inject a 1x1 gif into the page with tracking information as part of the images get request.

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 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).

Snippet

The openpixel snippet (found at src/snippet.html) is the HTML code that will be put onto any webpage that will be reporting analytics. For Dockwa, our marina websites put this on every page of their website so that it would load the JS to execute beacons back to a tracking server. The snippet can be placed anywhere on the page and it will load the core openpixel JS asynchronously. To be accurate, the first part of the snippet gets the timestamp as soon as it is loaded, applies an ID (just like a Google analytics ID, to be determined by you), and ques up a "pageload" event that will be sent as soon as the core JS has asynchronously loaded.

The snippet handles things like making sure the core JavaScript will always be loaded async and is cache busted ever 24 hours so you can update the core and have customers using the updates withing the next day.

Core

The openpixel core (found at src/openpixel.min.js) is the JavaScript code that that the snippet loads asynchronously onto the clients website. The core is what does all of the heavy lifting. The core handles settings cookies, collecting utms, and of course sending beacons and tracking pixels of data when events are called.

Events

There are 2 automatic events, the pageload event which is sent as the main event when a page is loaded, you could consider it to be a "hit". The other event is pageclose and this is sent when the pages is closed or navigated away from. For example, to calculate how long a user viewed a page, you could calculate the difference between the timestamps on pageload and pageclose and those timestamps will be accurate because they are triggered on the client side when the events actually happened.

Openpixel is flexible with events though, you can make calls to any events with any data you want to be sent with the beacon. Whenever an event is called, it sends a beacon just like the other beacons that have a timestamp and everything else. Here is an example of a custom event being called. Note: In this case we are using the opix function name but this will be custom based on your build of openpixel.

opix('event','reservation_requested')

You can also pass a string or json as the third parameter to send other data with the event.

opix('event','reservation_requested',{someData: 1,otherData: 'cool'})opix('event','reservation_requested',{someData: 1,otherData: 'cool'})

You can also add an attribute to any HTML element that will automatically fire the event on click.

<buttondata-opix-event="special-button-click">Some Special Button</button>

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 installed on your computer.
  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 build.

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. 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

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 build

Tracking Data

Below is a table that has all of the keys, example values, and details on each value of information that is sent with each beacon on tracking pixel. A beacon might look something like this. Note: every key is always sent regardless of if it has a value so the structure will always be the same.

https://tracker.example.com/pixel.gif?id=R29X8&uid=1-ovbam3yz-iolwx617&ev=pageload&ed=&v=1&dl=http://edgartownharbor.com/&rl=&ts=1464811823300&de=UTF-8&sr=1680x1050&vp=874x952&cd=24&dt=Edgartown%20Harbormaster&bn=Chrome%2050&md=false&ua=Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_11_5)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/50.0.2661.102%20Safari/537.36&utm_source=&utm_medium=&utm_term=&utm_content=&utm_campaign=
KeyValueDetails
idSJO12ZWid for the app/website you are tracking
uid1-cwq4oelu-in95g8xyid of the user
evpageloadthe event that is being triggered
ed{'somedata': 123}optional event data that can be passed in, string or json string
v1openpixel js version number
dlhttp://example.com/document location
rlhttp://google.com/referrer location
ts1461175033655timestamp in microseconds
deUTF-8document encoding
sr1680x1050screen resolution
vp1680x295viewport
cd24color depth
dtExample Titledocument title
bnChrome 50browser name
mdfalsemobile device
uafull user agentuser agent
tz240timezone offset (minutes away from utc)
utm_sourceCampaign Source
utm_mediumCampaign Medium
utm_termCampaign Term
utm_contentCampaign Content
utm_campaignCampaign Name

About

Openpixel is a customizable library for building web tracking pixels.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - fjahn/openpixel: Openpixel is a customizable library for building web tracking pixels. · GitHub
Skip to content

Repository files navigation

Openpixel

Powered by Dockwa

About

Openpixel is a customizable JavaScript library for building tracking pixels. Openpixel uses the latest technologies available with fall back support for older browsers. For example is the browser supports web beacons, openpixel will send a web beacon, if it doesn't support them it will inject a 1x1 gif into the page with tracking information as part of the images get request.

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 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).

Snippet

The openpixel snippet (found at src/snippet.html) is the HTML code that will be put onto any webpage that will be reporting analytics. For Dockwa, our marina websites put this on every page of their website so that it would load the JS to execute beacons back to a tracking server. The snippet can be placed anywhere on the page and it will load the core openpixel JS asynchronously. To be accurate, the first part of the snippet gets the timestamp as soon as it is loaded, applies an ID (just like a Google analytics ID, to be determined by you), and ques up a "pageload" event that will be sent as soon as the core JS has asynchronously loaded.

The snippet handles things like making sure the core JavaScript will always be loaded async and is cache busted ever 24 hours so you can update the core and have customers using the updates withing the next day.

Core

The openpixel core (found at src/openpixel.min.js) is the JavaScript code that that the snippet loads asynchronously onto the clients website. The core is what does all of the heavy lifting. The core handles settings cookies, collecting utms, and of course sending beacons and tracking pixels of data when events are called.

Events

There are 2 automatic events, the pageload event which is sent as the main event when a page is loaded, you could consider it to be a "hit". The other event is pageclose and this is sent when the pages is closed or navigated away from. For example, to calculate how long a user viewed a page, you could calculate the difference between the timestamps on pageload and pageclose and those timestamps will be accurate because they are triggered on the client side when the events actually happened.

Openpixel is flexible with events though, you can make calls to any events with any data you want to be sent with the beacon. Whenever an event is called, it sends a beacon just like the other beacons that have a timestamp and everything else. Here is an example of a custom event being called. Note: In this case we are using the opix function name but this will be custom based on your build of openpixel.

opix('event','reservation_requested')

You can also pass a string or json as the third parameter to send other data with the event.

opix('event','reservation_requested',{someData: 1,otherData: 'cool'})opix('event','reservation_requested',{someData: 1,otherData: 'cool'})

You can also add an attribute to any HTML element that will automatically fire the event on click.

<buttondata-opix-event="special-button-click">Some Special Button</button>

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 installed on your computer.
  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 build.

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. 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

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 build

Tracking Data

Below is a table that has all of the keys, example values, and details on each value of information that is sent with each beacon on tracking pixel. A beacon might look something like this. Note: every key is always sent regardless of if it has a value so the structure will always be the same.

https://tracker.example.com/pixel.gif?id=R29X8&uid=1-ovbam3yz-iolwx617&ev=pageload&ed=&v=1&dl=http://edgartownharbor.com/&rl=&ts=1464811823300&de=UTF-8&sr=1680x1050&vp=874x952&cd=24&dt=Edgartown%20Harbormaster&bn=Chrome%2050&md=false&ua=Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_11_5)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/50.0.2661.102%20Safari/537.36&utm_source=&utm_medium=&utm_term=&utm_content=&utm_campaign=
KeyValueDetails
idSJO12ZWid for the app/website you are tracking
uid1-cwq4oelu-in95g8xyid of the user
evpageloadthe event that is being triggered
ed{'somedata': 123}optional event data that can be passed in, string or json string
v1openpixel js version number
dlhttp://example.com/document location
rlhttp://google.com/referrer location
ts1461175033655timestamp in microseconds
deUTF-8document encoding
sr1680x1050screen resolution
vp1680x295viewport
cd24color depth
dtExample Titledocument title
bnChrome 50browser name
mdfalsemobile device
uafull user agentuser agent
tz240timezone offset (minutes away from utc)
utm_sourceCampaign Source
utm_mediumCampaign Medium
utm_termCampaign Term
utm_contentCampaign Content
utm_campaignCampaign Name

About

Openpixel is a customizable library for building web tracking pixels.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); GitHub - fjahn/openpixel: Openpixel is a customizable library for building web tracking pixels. · GitHub
Skip to content

Repository files navigation

Openpixel

Powered by Dockwa

About

Openpixel is a customizable JavaScript library for building tracking pixels. Openpixel uses the latest technologies available with fall back support for older browsers. For example is the browser supports web beacons, openpixel will send a web beacon, if it doesn't support them it will inject a 1x1 gif into the page with tracking information as part of the images get request.

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 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).

Snippet

The openpixel snippet (found at src/snippet.html) is the HTML code that will be put onto any webpage that will be reporting analytics. For Dockwa, our marina websites put this on every page of their website so that it would load the JS to execute beacons back to a tracking server. The snippet can be placed anywhere on the page and it will load the core openpixel JS asynchronously. To be accurate, the first part of the snippet gets the timestamp as soon as it is loaded, applies an ID (just like a Google analytics ID, to be determined by you), and ques up a "pageload" event that will be sent as soon as the core JS has asynchronously loaded.

The snippet handles things like making sure the core JavaScript will always be loaded async and is cache busted ever 24 hours so you can update the core and have customers using the updates withing the next day.

Core

The openpixel core (found at src/openpixel.min.js) is the JavaScript code that that the snippet loads asynchronously onto the clients website. The core is what does all of the heavy lifting. The core handles settings cookies, collecting utms, and of course sending beacons and tracking pixels of data when events are called.

Events

There are 2 automatic events, the pageload event which is sent as the main event when a page is loaded, you could consider it to be a "hit". The other event is pageclose and this is sent when the pages is closed or navigated away from. For example, to calculate how long a user viewed a page, you could calculate the difference between the timestamps on pageload and pageclose and those timestamps will be accurate because they are triggered on the client side when the events actually happened.

Openpixel is flexible with events though, you can make calls to any events with any data you want to be sent with the beacon. Whenever an event is called, it sends a beacon just like the other beacons that have a timestamp and everything else. Here is an example of a custom event being called. Note: In this case we are using the opix function name but this will be custom based on your build of openpixel.

opix('event','reservation_requested')

You can also pass a string or json as the third parameter to send other data with the event.

opix('event','reservation_requested',{someData: 1,otherData: 'cool'})opix('event','reservation_requested',{someData: 1,otherData: 'cool'})

You can also add an attribute to any HTML element that will automatically fire the event on click.

<buttondata-opix-event="special-button-click">Some Special Button</button>

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 installed on your computer.
  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 build.

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. 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

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 build

Tracking Data

Below is a table that has all of the keys, example values, and details on each value of information that is sent with each beacon on tracking pixel. A beacon might look something like this. Note: every key is always sent regardless of if it has a value so the structure will always be the same.

https://tracker.example.com/pixel.gif?id=R29X8&uid=1-ovbam3yz-iolwx617&ev=pageload&ed=&v=1&dl=http://edgartownharbor.com/&rl=&ts=1464811823300&de=UTF-8&sr=1680x1050&vp=874x952&cd=24&dt=Edgartown%20Harbormaster&bn=Chrome%2050&md=false&ua=Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_11_5)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/50.0.2661.102%20Safari/537.36&utm_source=&utm_medium=&utm_term=&utm_content=&utm_campaign=
KeyValueDetails
idSJO12ZWid for the app/website you are tracking
uid1-cwq4oelu-in95g8xyid of the user
evpageloadthe event that is being triggered
ed{'somedata': 123}optional event data that can be passed in, string or json string
v1openpixel js version number
dlhttp://example.com/document location
rlhttp://google.com/referrer location
ts1461175033655timestamp in microseconds
deUTF-8document encoding
sr1680x1050screen resolution
vp1680x295viewport
cd24color depth
dtExample Titledocument title
bnChrome 50browser name
mdfalsemobile device
uafull user agentuser agent
tz240timezone offset (minutes away from utc)
utm_sourceCampaign Source
utm_mediumCampaign Medium
utm_termCampaign Term
utm_contentCampaign Content
utm_campaignCampaign Name

About

Openpixel is a customizable library for building web tracking pixels.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages