rise-logger.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="rise-logger-utils.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">

<!--
`rise-logger` is a web component that is used for logging usage data of a parent Rise Vision web component (eg. [rise-google-sheet](http://rise-vision.github.io/rise-google-sheet)).

Logging the usage data of a parent web component to Big Query is done via the `log()` method. The method takes two parameters, the first being `tableName` which is the table on Big Query that you need to log to. The second parameter is `params` which should be an object containing the property values that correspond to the table fields.

The logger component will inherently populate a `display_id` property and value for logging to the table by retrieving the display id of the player via [Rise Cache](https://github.com/Rise-Vision/rise-cache-v2).

#### Example Usage

The following illustrates how to use `rise-logger` within a parent Rise Vision web component.

    <link rel="import" href="../rise-logger/rise-logger.html">

    <dom-module id="my-component">
      <template>
        <rise-logger id="logger"></rise-logger>
        <content></content>
      </template>
    </dom-module>

    <script>
      (function() {
        "use strict";

        Polymer({
          is: "my-component",

          properties: {},

          ready: function() {
            // log usage
            this.$.logger.log("my-component-table", {
              "event": "ready"
            });
          }
        })();
    </script>

-->
<dom-module id="rise-logger">
  <template>
    <rise-logger-utils id="utils"></rise-logger-utils>
    <iron-ajax id="displayId"
               url="{{_displayIdBaseUrl}}"
               handle-as="json"
               on-response="_onDisplayIdResponse"
               on-error="_onDisplayIdError"
               verbose="true">
    </iron-ajax>
    <iron-ajax id="token"
               method="POST"
               handle-as="json"
               on-response="_onTokenResponse">
    </iron-ajax>
    <iron-ajax id="insert"
               method="POST">
    </iron-ajax>
    <content></content>
  </template>
</dom-module>

<!-- build:version -->
<script>var loggerVersion = "1.0.12";</script>
<!-- endbuild -->

<script>
  ( function() {
    /* global Polymer */
    /* jshint newcap: false */

    "use strict";

    var LOGGER_CLIENT_ID = "1088527147109-6q1o2vtihn34292pjt4ckhmhck0rk0o7.apps.googleusercontent.com",
      LOGGER_CLIENT_SECRET = "nlZyrcPLg6oEwO9f9Wfn29Wh",
      LOGGER_REFRESH_TOKEN = "1/xzt4kwzE1H7W9VnKB8cAaCx6zb4Es4nKEoqaYHdTD15IgOrJDtdun6zK6XiATCKT";

    Polymer( {
      is: "rise-logger",

      hostAttributes: {
        hidden: true
      },

      properties: {

        /**
         * The name of the table in Google Big Query to log to.
         */
        tableName: {
          type: String,
          readOnly: true,
          value: ""
        },

        /**
         * The data which corresponds with the fields in the Big Query table.
         */
        params: {
          type: Object,
          readOnly: true,
          value: function() {
            return {};
          }
        }
      },

      /**
       * Fired when Rise Cache responds providing a display id
       *
       * @event rise-logger-display-id
       */

      _logsWaiting: [],

      _displayId: "",

      _displayIdReceived: false,

      _throttle: false,

      _throttleDelay: 1000,

      _lastEvent: "",

      _refreshDate: 0,

      _token: "",

      _retriedHttp: false,

      _displayIdBaseUrl: "https://localhost:9495/displays",

      _isThrottled: function( event ) {
        return this._throttle && ( this._lastEvent === event );
      },

      _isRiseCacheSchemeEnabled: function() {
        try {
          if ( top.enableRiseCacheScheme ) {
            return true;
          }
        } catch ( err ) {} // eslint-disable-line no-empty

        return false;
      },

      _getInsertHeaders: function( token ) {
        return {
          "Content-Type": "application/json",
          "Authorization": "Bearer " + token
        };
      },

      _getInsertURL: function() {
        var serviceUrl = "https://www.googleapis.com/bigquery/v2/projects/client-side-events/datasets/Widget_Events/tables/TABLE_ID/insertAll";

        return serviceUrl.replace( "TABLE_ID", this.tableName );
      },

      _insert: function( refreshData ) {
        this._refreshDate = refreshData.refreshedAt || this._refreshDate;
        this._token = refreshData.token || this._token;

        this.$.insert.url = this._getInsertURL();
        this.$.insert.headers = this._getInsertHeaders( this._token );
        this.$.insert.body = JSON.stringify( this.$.utils.getInsertData( this.params ) );

        this.$.insert.generateRequest();
      },

      _nextLogWaiting: function() {
        var self = this,
          item;

        if ( this._logsWaiting.length > 0 ) {
          item = this._logsWaiting.shift();

          this.debounce( "queue", function() {
            self.log( item.tableName, item.params );
            self._nextLogWaiting();
          }, this._throttleDelay + 250 );
        }
      },

      _onDisplayIdResponse: function( e, resp ) {
        if ( resp.response && resp.response !== "" ) {
          this._displayId = resp.response.displayId;
        }

        this._displayIdReceived = true;
        this.fire( "rise-logger-display-id", this._displayId );

        this._nextLogWaiting();
      },

      _onDisplayIdError: function() {

        if ( this._retriedHttp ) {

          this._displayIdReceived = true;
          this.fire( "rise-logger-display-id" );

          this._nextLogWaiting();

        } else {
          this._retryDisplayIdHttp();
        }
      },

      _retryDisplayIdHttp: function() {
        var protocol = ( this._isRiseCacheSchemeEnabled() ) ? "rchttp://" : "http://";

        this._displayIdBaseUrl = protocol + "localhost:9494/displays";
        this._retriedHttp = true;
        this.$.displayId.generateRequest();
      },

      _onTokenResponse: function( e, resp ) {
        // in case there are other instances of rise-logger
        e.stopPropagation();

        if ( resp && resp.response ) {
          this._insert( { token: resp.response.access_token, refreshedAt: new Date() } );
        }
      },

      _getTokenParams: function() {
        var params = {};

        params.client_id = LOGGER_CLIENT_ID;

        params.client_secret = LOGGER_CLIENT_SECRET;

        params.refresh_token = LOGGER_REFRESH_TOKEN;

        params.grant_type = "refresh_token";

        return params;
      },

      _refreshToken: function() {
        if ( new Date() - this._refreshDate < 3580000 ) {
          return this._insert( {} );
        }

        this.$.token.url = "https://www.googleapis.com/oauth2/v3/token";
        this.$.token.params = this._getTokenParams();

        this.$.token.generateRequest();
      },

      _startTests: function() {
        // ensure to not execute code below if this integration test flag is not set
        if ( !window.riseLoggerTests ) {
          return;
        }

        this.ready( true );
      },

      /**
       * Polymer has finished its initialization. This is the entry point.
       */
      ready: function( runningTests ) {
        var protocol = ( this._isRiseCacheSchemeEnabled() ) ? "rchttps://" : "https://";

        // Necessary for integration tests so this function doesn't execute code below before stubs can be created
        if ( window.riseLoggerTests && !runningTests ) {
          return;
        }

        this._displayIdBaseUrl = protocol + "localhost:9495/displays";
        // request the display id from Rise Cache
        this.$.displayId.generateRequest();
      },

      /**
       * Logs data to Google Big Query
       *
       */
      log: function( tableName, params ) {
        var self = this,
          insertParams;

        if ( !tableName || !params || ( params.hasOwnProperty( "event" ) && !params.event ) ||
          ( params.hasOwnProperty( "event" ) && this._isThrottled( params.event ) ) ) {
          return;
        }

        if ( !this._displayIdReceived ) {
          // save the log details so they can be used to execute log() again from displayId handlers
          this._logsWaiting.push( {
            tableName: tableName,
            params: JSON.parse( JSON.stringify( params ) )
          } );

          return;
        }

        // don't log if display id is invalid or preview/local
        if ( !this._displayId || this._displayId === "preview" || this._displayId === "display_id" ||
          this._displayId === "displayId" ) {
          return;
        }

        insertParams = this.$.utils.getInsertParams( params, this._displayId );

        if ( !insertParams || insertParams.usage_type === "dev" ) {
          return;
        }

        try {
          if ( top.postToPlayer && top.enableWidgetLogging ) {
            // send log data to player instead of BQ
            return this.$.utils.logEventToPlayer( tableName, insertParams );
          }
        } catch ( err ) {
          console.log( "rise-logger.log", err ); // eslint-disable-line no-console
        }

        this._throttle = true;
        this._lastEvent = params.event;

        this._setTableName( tableName );
        this._setParams( insertParams );

        this.debounce( "throttle", function() {
          self._throttle = false;
        }, this._throttleDelay );

        this._refreshToken();
      }

    } );

  } )();

</script>