Skip to content

chanson/clarity_server

Repository files navigation

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 and CLARITY_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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published