I wanted to be able to track how many people save articles to Pocket from this site. I thought that given how much I use Pocket, other people who read my stuff might do the same.

I contacted Pocket support and they said that their browser extensions don’t emit an event when it’s clicked1. I was hoping to be able to drive a Google analytics goal when that happened.

Pocket suggests that I look at their Publisher stats, which is nice, but it’s two sources of information. I wanted to be able to do it all in Google Analytics.

I hacked the following together from the MDN MutationObserver docs, but it relies on Pocket not changing the classname of their UI. (And leaving it in the DOM, not as a separate overlay.) I left it on Stack Overflow for a week to see if anyone was going to call me out for being a chump. They didn’t; I guess the internet had better things to do this week.

document.addEventListener('DOMContentLoaded', function() {
  //your other events events...
  //ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

  function registerPocketSave() {
    console.log("looking for Pocket saves");
    // This is for Chrome only :(
    var target = document.querySelector('body');

    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        //console.log(mutation);
        let a = document.getElementById('pkt_ext_master');
        if (a) {
          console.log(a, "found a Pocket save - firing a GA event!");
          ga('send', 'event', 'Pocketed', document.title);
          observer.disconnect(); //once we've saved to Pocket, stop so that we don't get ghost versions
        }
      });
    });

    // configuration of the observer:
    var config = { attributes: true, childList: true, characterData: true };

    // pass in the target node, as well as the observer options
    observer.observe(target, config);
  }
  registerPocketSave();
});

It’s actually running on this page right now, and it sort of works. It’s only for Chrome. The Chrome extension mofifies the DOM and injects a popup, but the Firefox extension uses the new DOM provided by the extension’s own little window.

If anyone has any suggestions then I’d love to hear about it!

  1. Actually I only asked about their Chrome extension, but I’m guessing that’s common to Firefox too. Pocket support were actually really helpful about this.