{ "blyg": "0.4", "id": "149vyjwt8swwyf3xxqzb60bvbs", "kind": "thread", "origin": "https://notionparallax.co.uk/", "page": "https://notionparallax.co.uk/2016/trying-to-capture-a-save-to-pocket-event", "author": { "name": "Ben Doherty", "url": "https://notionparallax.co.uk/" }, "created": "2016-05-20T17:08:27Z", "updated": "2016-05-20T17:08:27Z", "version": 1, "content_md": "# Trying to capture a 'Save to Pocket' event\n\n\nI wanted to be able to track how many people save articles to Pocket from this site. I thought that given how much [I use](http://notionparallax.co.uk/2014/offline-reading) [Pocket](https://getpocket.com/@ben.doherty), other people who read my stuff might do the same.\n\nI contacted Pocket support and they said that their browser extensions don't emit an event when it's clicked[^1]. I was hoping to be able to drive a Google analytics goal when that happened.\n\nPocket suggests that I look at their [Publisher stats][2], which is nice, but it's two sources of information. I wanted to be able to do it all in Google Analytics.\n\nI hacked the following together from the [MDN MutationObserver][1] 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](http://stackoverflow.com/questions/37036606/can-a-save-to-pocket-be-detected) 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.\n\n```js\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n //your other events events...\n //ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);\n\n function registerPocketSave() {\n console.log(\"looking for Pocket saves\");\n // This is for Chrome only :(\n var target = document.querySelector(\"body\");\n\n // create an observer instance\n var observer = new MutationObserver(function (mutations) {\n mutations.forEach(function (mutation) {\n //console.log(mutation);\n let a = document.getElementById(\"pkt_ext_master\");\n if (a) {\n console.log(a, \"found a Pocket save - firing a GA event!\");\n ga(\"send\", \"event\", \"Pocketed\", document.title);\n observer.disconnect(); //once we've saved to Pocket, stop so that we don't get ghost versions\n }\n });\n });\n\n // configuration of the observer:\n var config = { attributes: true, childList: true, characterData: true };\n\n // pass in the target node, as well as the observer options\n observer.observe(target, config);\n }\n registerPocketSave();\n});\n```\n\nIt'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.\n\nIf anyone has any suggestions then I'd love to hear about it!\n\n[1]: https://developer.mozilla.org/en/docs/Web/API/MutationObserver\n[2]: http://getpocket.com/publisher/\n\n[^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.\n", "content_html": "

Trying to capture a 'Save to Pocket' event

\n

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.

\n\n

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.

\n\n

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.

\n\n

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.

\n\n
document.addEventListener(\"DOMContentLoaded\", function () {\n    //your other events events...\n    //ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);\n\n    function registerPocketSave() {\n        console.log(\"looking for Pocket saves\");\n        // This is for Chrome only :(\n        var target = document.querySelector(\"body\");\n\n        // create an observer instance\n        var observer = new MutationObserver(function (mutations) {\n            mutations.forEach(function (mutation) {\n                //console.log(mutation);\n                let a = document.getElementById(\"pkt_ext_master\");\n                if (a) {\n                    console.log(a, \"found a Pocket save - firing a GA event!\");\n                    ga(\"send\", \"event\", \"Pocketed\", document.title);\n                    observer.disconnect(); //once we've saved to Pocket, stop so that we don't get ghost versions\n                }\n            });\n        });\n\n        // configuration of the observer:\n        var config = { attributes: true, childList: true, characterData: true };\n\n        // pass in the target node, as well as the observer options\n        observer.observe(target, config);\n    }\n    registerPocketSave();\n});\n
\n\n

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.

\n\n

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

\n\n
\n
    \n
  1. \n

    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. ↩

    \n
    2. \n
\n
\n", "content_hash": "sha256:e183909fdae651c9db6023f1b41c418bf2b65d6eab15f221d38b502eab14e6ea", "media": [], "changelog": [ { "version": 1, "at": "2016-05-20T17:08:27Z", "note": null } ], "transclusions": [] }