Menu
Menu Sheet Overlay
Search
Search Sheet

      Building a New Connector

      The Mobify Platform includes built-in connectors for Google Analytics and Google Tag Manager. But if you’re using a different analytics service, you’ll need to build your own connector to communicate with it.

      Also, if you have a tracking specification that is client-specific, you’ll need to build your own connector.

      All new connectors must be extended from the Connector class. This allows the new connector to take advantage of many built-in events.

      The Connector class provides the following capabilities:

      • Loads any scripts required by the analytics vendor and invokes the connector’s ready function when loading finishes
      • Prevents double loading of scripts
      • Provides debugging information (when enabled)
      • Receives analytics events while vendor scripts are loading and stores them in a queue

      Here’s an example of a custom connector that extends from the Connector class:

      import Connector from 'progressive-web-sdk/dist/analytics/connectors/connector'
      
      export default class ClientAnalytics extends Connector {
          constructor() {
              super('Client Analytics')
      
              // any other pre-initialization setup required for this analytics vendor
      
              Connector.loadScript('https://www.example.com/script_to_a_3rd_party_analytics_library.js', this)
      
              // If there are no scripts required for download, make sure to invoke the ready function
              // super.ready()
          }
      
          // Override the ready function if you need to do any further initialization after loading scripts
          // This function will be invoked when the script finishes loading
          ready() {
              // It is mandatory to invoke super.ready() as the last command
              // This will drain the queued events if any
              super.ready()
          }
      
          send(type, payload) {
              // Sends the analytics event to the 3rd party analytics script
      
              // It is optional to invoke super.send() as the last command
              // This will invoke the debug logging if debug flag is on
              super.send(type, payload)
          }
      }

      Once you have added your connector to the Analytics Manager, you should start to see console logs from the browser inspector. For more information, see Debugging an Analytics Connector.

      Feedback

      Was this page helpful?