Introduce data-ga and displayName in Google Analytics tracking

[MrOrz]

This PR sends the data-ga property or displayName of the clicked component to Google Analytics, so that we can track click of component of interest.

See the eventCategory (in non-bold text) on the right side of the screen recording:
. The innerText of the clicked element is sent as eventLabel.

Collected events in Google analytics:

This fixes #237 .

Related Spec

This PR implements "成效追蹤" part of the following spec:

• Dubious messages
• Latest replies
• Hoax for you (subset of Latest replies)

Google Tag Manager setup

User defined variable Clicked Element Path

This shows the the clicked item's component name (<ComponentName>) or data-ga property ([ga propety]) when their descendent is clicked.

function() {
  var currentNode = {{Click Element}};
  if(!currentNode) return '';

  var reactInstanceKey = Object.keys(currentNode).find(function(key){
    return key.startsWith('__reactInternalInstance$');
  });
  
  if(!reactInstanceKey) return '';

  var currentInst = currentNode[reactInstanceKey];
  var path = [];
  
  while(currentInst) {
    if(currentInst.memoizedProps &&
       currentInst.memoizedProps['data-ga'] &&
       // data-ga may be passed down to multiple levels of child components.
       // we don't want to record duplicated 'data-ga'.
       path[0] !== '[' + currentInst.memoizedProps['data-ga'] + ']') {
      path.unshift('[' + currentInst.memoizedProps['data-ga'] + ']');
    } else if(currentInst.elementType &&
       currentInst.elementType.displayName &&
       // Ignore names like "WithStyles(ForwardRef(ButtonGroup))"
       currentInst.elementType.displayName.indexOf('(') === -1) {
      path.unshift('<' + currentInst.elementType.displayName + '>');
    }
    currentInst = currentInst.return;
  }

  return path.join(' ▸ ');
}

Trigger Clicked element with path

Tag Click event to GA