prerequisites:
- node (v <= 16)
- postgresql
To use:
- run
npm install
- create a local postgresql database. Run the following command to create the necesssary table:
CREATE TABLE clarity_events ( id serial PRIMARY KEY, timestamp BIGINT, raw_event TEXT, decoded_event TEXT, user_id VARCHAR(255));
- Set ENV var
USER
to your postgres user andCLARITY_SERVER_DB_NAME
to the name postgres database you are using - run
npm run build
to build the app - run
npm run start
to start the local server on port 3456 - Navigate to localhost:3456 to view a replay of all stored events in the database
To send events:
- Add the following script to the
HEAD
of the page you want to record events on:<script>[INSERT PRODPERFECT KEEN SNIPPET HERE]</script> <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="http://localhost:3456/tracking_code"; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "XXXXXXXXXX"); </script> <script> document.addEventListener('DOMContentLoaded', function() { var setClckCookie = function() { try { var prodperfectSessionCookie = JSON.parse(getCookie('prodperfect_session')) if(!prodperfectSessionCookie) { setTimeout(() => { setClckCookie() }, 100); } else { var userId = prodperfectSessionCookie['session_uuid'] var clckCookie = getCookie('_clck') var clckDetails = clckCookie.split('|') clckDetails[0] = userId var newClckCookie = clckDetails.join('|') // identify doesn't seem to actually do anything meaningful window.clarity("identify", userId) // this is a hack so we can manipulate the userId sent with the clarity events to make up for the "identify" call weirdness document.cookie = "_clck=" + newClckCookie + ";path=/" } } catch(e){ console.log('error identifying with prodperfect session cookie') console.log(e) } } setClckCookie() }) </script>
- replace
XXXXXXXXXX
with a MS project ID if you intend to change the configuration to send events to MS server instead
- replace