Last active
May 22, 2025 23:17
-
-
Save isocroft/267f61d4e4f5db8b728c836b7f06f260 to your computer and use it in GitHub Desktop.
Integrate Rudderstack successfully on a website
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <title>Isocroft Portfolio Website</title> | |
| <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/isocroft/browsengine@0.2.3/dist/browsengine.min.js"></script> | |
| <script type="text/javascript"> | |
| ;(function (global) { | |
| /* @HINT: feature detection for hidden document */ | |
| const getPageState = function () { | |
| const hidden = (global.document.hidden || global.document.mozHidden || global.document.msHidden || global.document.webkitHidden); | |
| if (hidden || global.document.visibilityState === 'hidden') { | |
| return 'hidden'; | |
| } | |
| if (global.document.hasFocus() || global.document.activeElement !== null) { | |
| return 'active'; | |
| } | |
| return 'passive'; | |
| }; | |
| function afterPageReady () { | |
| var nav_types = { "0": "NAVIGATED", "1": "RELOADED", "2": "BACK_FORWARD", "255": "RESERVED" }; | |
| var timerId = setTimeout(function taskTillSyncQueueClears () { | |
| clearTimeout(timerId); | |
| rudderanalytics.page(global.document.title, { | |
| path: global.location.pathname, | |
| url: global.location.href, | |
| title: global.document.title, | |
| search: global.location.search, | |
| referrer: global.document.referrer, | |
| navigation_mode: nav_types[String(global.performance.navigation.type || 0)] | |
| }); | |
| }, 0); | |
| } | |
| function beforePageExit (e) { | |
| var canResetRudderstack = (e.target === global.document || (e.target === global && (e.detail.oldURL !== e.detail.newURL)); | |
| var timerId = setTimeout (function taskTillSyncQueueClears () { | |
| clearTimeout(timerId); | |
| if (getPageState() !== 'active') { | |
| if (canResetRudderstack) { | |
| rudderanalytics.reset(); | |
| } | |
| } | |
| }, 0); | |
| /* @HINT: We need the back/forward cache (page cache) to work well */ | |
| global.removeEventListener("beforeunload", beforePageExit, false); | |
| /* @HINT: Make sure no prompt is shown on the web page on unload */ | |
| return; | |
| } | |
| global.addEventListener("pageshow", afterPageReady, false); | |
| global.addEventListener("beforeunload", beforePageExit, false); | |
| global.document.addEventListener('click', function globalClickHandler (e) { | |
| /* @HINT: If an HTML anchor tag is clicked, manually trigger the `beforeunload` event as some browsers don't fire it */ | |
| if (e.target.tagName === "A") { | |
| if (!e.defaultPrevented) { | |
| event = new Event('beforeunload'); | |
| event.detail = { oldURL: global.document.URL, newURL: e.target.href } | |
| return global.dispatchEvent(event); | |
| } | |
| } | |
| return true; | |
| }, false); | |
| }(window)); | |
| </script> | |
| <script src="https://cdn.rudderlabs.com/v1/rudder-analytics.min.js"></script> | |
| <script type="text/javascript"> | |
| ;(function (global) { | |
| rudderanalytics = global.rudderanalytics = []; | |
| var methods = [ | |
| "load", | |
| "page", | |
| "track", | |
| "identify", | |
| "alias", | |
| "group", | |
| "ready", | |
| "reset", | |
| "getAnonymousId", | |
| "setAnonymousId" | |
| ]; | |
| for (var i = 0; i < methods.length; i++) { | |
| var method = methods[i]; | |
| rudderanalytics[method] = function (methodName) { | |
| return function () { | |
| rudderanalytics.push([methodName].concat(Array.prototype.slice.call(arguments, 0))); | |
| }; | |
| }(method); | |
| } | |
| var writeKey = "<RUDDERSTACK_WRITE_KEY>"; | |
| var dataPlaneUrl = "<RUDDERSTACK_DATA_PLANE_URL>"; | |
| global.addEventListener("load", function whenPageIsInteractive () { | |
| // if (typeof rudderanalytics.getAnonymousId() === "undefined") { | |
| rudderanalytics.setAnonymousId(global.Cookies.get("xxx_visitor_id")); | |
| if (typeof rudderanalytics.ready === "function") { | |
| rudderanalytics.ready(() => undefined); | |
| } | |
| // } | |
| rudderanalytics.load(writeKey, dataPlaneUrl); | |
| }, false); | |
| }(window)); | |
| </script> | |
| <script type="text/javascript"> | |
| ;(function (global) { | |
| var options = { | |
| preprocessor: function processingUserAgentAndNavigatorPlatform (key, value) { | |
| var result = value; | |
| if (key === "pixelRatio") { | |
| return global.webpage.device.screen.pixel_density; | |
| } | |
| if (key === "userAgent") { | |
| var engineType = global.webpage.engine; | |
| result += '|' + global.webpage.device.type + '|engine:'; | |
| if(engineType['webkit']){ | |
| result += 'webkit'; | |
| }else if(engineType['blink']){ | |
| result += 'blink'; | |
| }else if(engineType['presto']){ | |
| result += 'presto'; | |
| }else if(engineType['edgehtml']){ | |
| result += 'edgehtml'; | |
| }else if(engineType['trident']){ | |
| result += 'trident'; | |
| }else if(engineType['gecko']){ | |
| result += 'gecko'; | |
| } | |
| result += '|' + global.webpage.device.screen.type; | |
| } | |
| if (key === 'navigatorPlatform') { | |
| result += '|' + global.webpage.device.os; | |
| } | |
| return result; | |
| }, | |
| screen: { | |
| detectScreenOrientation: false | |
| }, | |
| fonts: { | |
| extendedJsFonts: true | |
| }, | |
| excludes: { | |
| plugins: true, | |
| audio: true, | |
| enumerateDevices: true, | |
| fontsFlash: true, | |
| adBlock: true, | |
| timezoneOffset: true, | |
| timezone: true, | |
| deviceMemory: true, | |
| screenResolution: true, | |
| hasLiedResolution: true | |
| } | |
| }; | |
| function generateAndStoreBrowserFingerPrint (components) { | |
| var values = components.map(function componentsIterator (component) { | |
| return component.value | |
| }); | |
| /* Create Duplo Web Page Visitor ID */ | |
| var murmur = Fingerprint2.x64hash128(values.join(''), 31); | |
| /* Create a forever cookie */ | |
| var CookiesJar = Cookies.noConflict(); | |
| if (typeof CookiesJar.get("xxx_visitor_id") === "undefined") { | |
| var config = { | |
| secure: true, | |
| expires: 365 * 10, | |
| path: '/', | |
| sameSite: 'strict' | |
| } | |
| if (window.origin.includes('isocroft.com')) { | |
| config.domain = '.isocroft.com'; | |
| } | |
| CookiesJar.set("xxx_visitor_id", murmur, config); | |
| } | |
| } | |
| /* Setup custom intelligent tracking routine for [ Isocroft Portfolio Site Web Page(s) ] user interactions */ | |
| global.document.addEventListener("DOMContentLoaded", function afterPageLoaded (e) { | |
| if (document.cookie.indexOf("xxx_visitor_id") > -1) { | |
| return; | |
| } | |
| function idleCallback (idleDeadline) { | |
| var shouldYield = Boolean(idleDeadline) ? idleDeadline.timeRemaining() < 1 : false; | |
| var hasRun = false; | |
| while (!shouldYield) { | |
| if (!hasRun) { | |
| Fingerprint2.get(options, generateAndStoreBrowserFingerPrint); | |
| hasRun = true; | |
| } | |
| shouldYield = hasRun; | |
| } | |
| if (!hasRun) { | |
| if (Boolean(idleDeadline)) { | |
| global.requestIdleCallback(idleCallback); | |
| } | |
| } | |
| } | |
| if (global.requestIdleCallback) { | |
| global.requestIdleCallback(idleCallback); | |
| } else { | |
| global.setTimeout(idleCallback, 0); | |
| } | |
| }, false); | |
| }(window)); | |
| </script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script> | |
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@2/dist/fingerprint2.min.js"></script> | |
| </head> | |
| <body> | |
| <h1>Page Ready</h1> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment