Skip to content

picodl is small tool to automate the analytics code

Notifications You must be signed in to change notification settings

natxoski/picodl

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

PicoDL

picoDL aims to be a useful and minimal package to generate the necessary tools/assets for all analytics purposes. Reduce the time to regenerate analytics from scratch. Use picoDL now.

Quick note This currently works with static pages. If you are working on a SPA you'll need to tweak it yourself or wait for an update (currently working on).

How to use it?

On any component that you need to track add an extra class and some dataset attributes For example if you want to track a link being clicked or hovered you can do with the following:

<a 
    href='#' 
    class='dl' 
    data-dl-events='click, hover'
    data-dl-component='cta'
  >
    Testing
  </a>

On the js file define the handlers for each type of event

const handlers = {
  cta: {
    click: { 
      click: function (event, component) {
        console.log(`${component} clicked. Do something`);
      },
      keypress: function (event, component) {
        console.log(`key pressed for ${component}. Do something`);
      }
    },
    hover: {
      mouseenter: function (event, component) {
        console.log(`${component} hovered Do. something`);
      },
      mouseover: function (event, component) {
        console.log(`${component} hovered. Do something`);
      },
    },
  }
}

With a structured way to implement the handlers, we could reduce the time to refactor/rework analytics stuff.