Follow up to https://twitter.com/JFSIII/status/437054835569881089

Tracking compound (complex?) events.md

Scenario A

Goal

A pageview should be submitted to an analytics tracker whenever changedItem is triggered. Its payload should look like: {item: 'name of item', empty: Boolean}

Architecture

Module A

Emits changedItem events. Their payload is {item: 'foo'}.

Module B

Listens for changedItem events and then emits the data via itemData with {item: 'foo', data: []}.

Obstacle

Whether or not Item Foo has any data isn't known when changedItem is triggered. That information is in the itemData event payload which occurs after itemData.

It seems to me, I need to know a) when all of these events have occurred b) the values of each event.

If I had both those items, I could do something like:

on(['changedItem', 'itemData'], function (changedItem, itemData) {
	trigger('pageview', {
		item: changedItem.item,
		empty: !itemData.data.length
	});
})

While it might appear that I could get the item information from itemData's payload, it isn't so. itemData is triggered many times, not just when changedItem occurs. Simply observing itemData wouldn't accurately track what we wish to track.

Scenario B

Goal

Be notified when a user has gone inactive. One goal of this information is to track how long the user was active in a given section.

Rules

User is inactive if:

• Goes 60 seconds without page interaction
  • Using the mouse (mousemove, click, etc)
  • Interacting with the keyboard (keydown, keyup, etc)
  • Interacting with any form elements (select#change, form#submit, etc)
• Or, as soon as either of these occur
  • blur on window element
  • Page Visibility API says page is hidden

Well, the inactive one's pretty easy. I haven't tested this code, but I reckon it'd work.

this.after('initialize', function () {
this.on('blur window mousemove click keydown keyup', this.clearTimeout);
this.startTimeout();
});
this.clearTimeout = function () {
clearTimeout(this.timeout);
this.startTimeout();
};
this.startTimeout = function () {
this.timeout = setTimeout(function () {
this.trigger('user-inactive');
}.bind(this), 60000);
};

I'm not rightly sure I understand the first scenario though. Seems like you maybe need another event that is triggered only when changedItem is triggered, or to pass some sort of identifier with itemData that says "this was triggered in response to a changedItem event".

@tbrd I ended up with something like this

this.after('initialize', function ComponentInitializer() {
  this.on(document, 'changedItem', this.onItemChanged);
});

this.onItemChanged = function onItemChanged(e, itemData) {
  // remove the current handler. it triggers pageview for the previous item
  this.off(document, 'itemData', this.trackPageview);

  // create a handler which only tracks pageview for current item
  this.trackPageview = function trackPageview(e, data) {
    // use itemData closure to determine if this item is the current one
    if (itemData.item === data.item) {
      this.trigger('pageview', {stuff: 'here'});
    }
  };

  // add the handler which only tracks pageview for current item
  this.on(document, 'itemData', this.trackPageview);
};