epistemicpolymath / analytics-library Goto Github PK

Whenever a client redesigns their website the trackers break, as the selectors used are no longer valid. This happens more frequently than you might think.

I would like to set this script up to pull tracking information from a server I host. The script installed on the client page will have a UUID token that will be unique to that website. This token will be used within a URL.

This enhancement will walk hand-in-hand with issue #11, and the UUID might even be a built-in part of the script stub.

A token will be a UUIDv4 token, and might look something like this: 653cdbc9-5beb-433e-9c7b-332c9d4bb0bd. The URL for the trigger JSON payload might look something like this: https://ourappname.com/api/website/653cdbc9-5beb-433e-9c7b-332c9d4bb0bd

As a bonus, I would like there to be some client-side caching of the tracking information so we don't crash our server if a popular website wants to use our platform. We could maybe store two timestamps in the browser, 1) for the last time up-to-date information was grabbed and 2) for the last time the site was visited.

• If it has been more than 24 hours since up to date tracking information was grabbed, fetch it again.
• If it has been more than 20 minutes since the page was visited, fetch again.

In summary:

• Brainstorm the best way to implement this
• Integrate remotely hosted tracking JSON payloads
• Implement client side caching

We may need to event.preventDefault() the <a> tag, just in case it tries to navigate the user away from the page. Sorta like the form submission.

Many clients use Googles "analytics.js" code, but "gtag.js" is gaining traction among some clients.

It should be pretty trivial to implement, here is some quick documentation.

A helper function could sit as the "pivot" point for all events, which would accept the normal "category," "action," and "label" elements common to both functions. It could check to see if the gtag function has been defined, and if so use that before defaulting back to the "ga" one.

As more clients use this library it will be more and more difficult to make sure they are all using the most up to date version of this library. The easiest solution to this problem would be to simply have their websites ask one of our servers for the latest version.

This I will need a "stub" written for this library that will automatically load and run the library from an external source. We will place this code snippet on all new and existing clients web pages.

Its bad practice to write a function whose only purpose is to call another function.

You could try something like this:

elements.forEach(trackEvents); 

Or, if that trackEvents function is not used anywhere else then you can just copy/paste that function into a lambda.

elements.forEach(function(trackedElement) {
  // the contents of the trackEvents function
});

When running the uglifyjs script I get this error. Should be fixed by simply swapping "let" to "var."

It looks like you are re-using a variable name which could cause some issues.

Here:

Low priority, just something to keep in mind during development.

I would like to set up a basic CDN to use for distribution of this script. Before we get there though, we will need to make sure this is packaged well enough to be portable.

When an event is being sent, two notices are appearing in the console instead of just one.

I would like to make sure we are not sending events twice, and remove the duplicate message if possible.

Not all tracked elements will be present on all pages, but that are still valid. Perhaps a "url" element could be required with the element list that would have a REGEX filter for the URL to apply the filter to. So given the elements list, filter out the ones whose url pattern does not match the current URL, then continue looping like normal.

How does that sound?

New feature, low priority.

Our tracked elements JSON looks like this:

{
  "selector": ".usefulFormInputs",
  "category": "Inputs",
  "action": "change",
  "label": "This input was changed",
  "event": "" //optional
}

If that event element is present then we will want to use that instead of going through the switch statement. It might look something like this:

trackedElement.addEventListener(element.event, function() {
  // ga() stuff
});

We will need a README file that includes some documentation on how to format the input arguments for the element tracking script. The demo has an example, but some good documentation is also handy.