Analytics Scripts Improvements for RHDC

[bennypowers]

NB: this issue is not strictly related to RHDS, but we're tracking it here anyways

The Plan

1. Take HTML from rhdc homepage, strip out 3rd party scripts
2. write function to crawl composedPath and gather data-analytics- attrs
3. log out the eddl payload
4. send it to @rmessickSDI for verification

Next Steps

1. automate with cypress and @zhawkins

Synchronize your watches..... now!

cc @markcaron @clt2rdu

[bennypowers]

So here's a prototype. @rmessickSDI please paste this into the console on RHDC and start clicking on stuff. Let me know what I'm missing here.

const isAnalyticsEntry = ([x]) => x.startsWith('analytics');
const lowercaseFirst = x => `${x.charAt(0).toLowerCase()}${x.slice(1)}`;
const eddlClickPathReducer = (acc, node) => {
  if (node instanceof Element) {
    for (const [k, v] of Object.entries(node.dataset).filter(isAnalyticsEntry)) {
      const key = lowercaseFirst(k.replace('analytics', ''));
      if (!acc[key])
        acc[key] = v;
      else
        acc[key] = `${acc[key]}|${v}`;
    }
  }
  return acc;
}
document.addEventListener('click', function(event) {
  event.preventDefault();
  const payload = event.composedPath().reduceRight(eddlClickPathReducer, {});
  console.log(payload);
});

[rmessickSDI]

@bennypowers I am liking your approach here. Is there a way to get the source a tag and be able to add some function to check other attributes as well. Example from current code that would add other attributes

/**
  *
  * @param {array} attributes All the values for attributes that start with data-analytics
  * @returns {array} All the values for attributes that start with data-analytics
  */
  var addAttributes = function(element, attributes) {
   // Check for click types
   // Will have seperarte rules in launch based off these
   if(isJavascript(element)) attributes.isJavascript = true;
   if(isDownload(element)) attributes.isDownload = true, attributes.fileName = element.href.split('/').pop();
   //if(!isInternalDomain(element)) attributes.isExternalDomain = true;
   if(isCrossPropertyDomain(element)) attributes.isCrossPropertyDomain = true, attributes.linkTypeName = "cross property link";
   if(isCta(element)) attributes.isCta = true, attributes.linkTypeName = "cta link";
   if(isFooter(element)) attributes.isFooter = true;
   if(isInternalCampaign(element)) attributes.isInternalCampaign = true;
   if(isPromoSection(element)) attributes.isPromoSection = true;
   if(isSearchContainer(element)) attributes.isSearchContainer = true, attributes.linkTypeName = "search result click";
   if(isGemini(element)) attributes.isGemini = true, attributes.geminiEvalId = element.getAttribute('data-rh-gemini-evaluation-id'),   attributes.geminiOfferId =  element.getAttribute('data-rh-gemini-offer-id');
   if(isExitLink(element)) attributes.isExitLink = true, attributes.linkTypeName = "exit link";
   if(isSocial(element)) attributes.isSocial = true, attributes.linkTypeName = "social link";
 
 
   attributes.targetHost = getHostName(element.href);
   attributes.internalCampaign = _sdiToolkit.reactor.queryString.parse(element.href).icid || _sdiToolkit.reactor.queryString.parse(element.href).intcmp || "";
   
 
   return attributes;
 }

[bennypowers]

Yes I believe so, but conversely, we've discussed in the past offloading this to the HTML, which I think is wise: only data attributes get sent along