Instrument with GA about interactive-examples

[stephaniehobson]

Some ideas of what needs to be instrumented:

User interactions:

• copy/paste
• when a user makes their first edit
• CSS: when a new example is selected
• JS: when 'run' is clicked

Performance:

• time to samples being interactive (we might get this for free with GA)

[stephaniehobson]

Yeah, the Navigation Timing API is perfect for that :)

I thought of something else we need to track: error messages. I think it's possible broken examples won't run at all but if they do it would be nice to be able to watch for them.

What we do in kuma might be a good starting point.

[schalkneethling]

After having looked at this some and considering our options, I propose we do the following:

Inisde interactive-examples

We use postMessage as follows

// run button is clicked
mceAnalytics.trackRunClicks();

The above will happen in the events.js file where we will track all events happening on the editor.
https://github.com/mdn/interactive-examples/blob/master/js/editor-libs/events.js

This will then call the code here:
https://github.com/mdn/interactive-examples/blob/master/js/editor-libs/analytics.js#L11

Inside analytics.js on Kuma

// Adding to globally available mdn object
    var analytics = mdn.analytics = {
        /**
         * Handles postMessage events from the interactive editor, passing of
         * the data to `trackEvent` if the origin of the message is what we expect.
         * @param {Object} event - The event Object received from the postMessage
         */
        interactiveExamplesEvent: function(event) {
            if (event.origin !== 'https://mdn.github.io') {
                return false;
            }
            this.trackEvent(event.data);
        },
       ...
};

// add event listener for postMessages from the interactive editor
win.addEventListener('message', analytics.interactiveExamplesEvent, false);

Thoughts? @stephaniehobson @wbamberg

[stephaniehobson]

I like the use of postMessage 👍

The ga object can take a callback. For security reasons I would like kuma to strip the callback out of the data before passing it to trackEvent.

[schalkneethling]

For security reasons I would like kuma to strip the callback out of the data before passing it to trackEvent.

Definitely. We would not want to just trust the because the domain matches all is ok.

[schalkneethling]

Pull request for the Kuma side: mdn/kuma#4305

[atopal]

Hey Schalk, can you confirm that we are tracking all events listed by Stephanie?

[schalkneethling]

As we are posting messages to MDN for GA, I reckon we need to calculate the time it took for the iframe to load. It seems the best way to accomplish this would be to use the Navigation Timing API - https://caniuse.com/#feat=nav-timing Thoughts @stephaniehobson @wbamberg