Analytics
/

Simple Analytics

Using the Simple Analytics plugin


Integration with simple analytics Simple Analytics

The simple analytics plugin automatically tracks page views on route changes for single page applications.

Click to expand

Installation

npm install analytics
npm install @analytics/simple-analytics

How to use

The @analytics/simple-analytics package works in the browser. To use, install the package, include in your project and initialize the plugin with analytics.

Below is an example of how to use the browser plugin.

import Analytics from 'analytics'
import exports from '@analytics/simple-analytics'

const analytics = Analytics({
  app: 'awesome-app',
  plugins: [simpleAnalyticsPlugin()]
})

See additional implementation examples for more details on using in your project.

Browser usage

See below from browser API

Browser API

const analytics = Analytics({
  app: 'awesome-app',
  plugins: [simpleAnalyticsPlugin()]
})

Platforms Supported

The @analytics/simple-analytics package works in the browser

Additional examples

Below are additional implementation examples.

Using in HTML

Below is an example of importing via the unpkg CDN. Please note this will pull in the latest version of the package.

<!DOCTYPE html>
<html>
  <head>
    <title>Using @analytics/simple-analytics in HTML</title>
    <script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
    <script src="https://unpkg.com/@analytics/simple-analytics/dist/@analytics/simple-analytics.min.js"></script>
    <script type="text/javascript">
      /* Initialize analytics */
      var Analytics = _analytics.init({
        app: 'my-app-name',
        plugins: [simpleAnalyticsPlugin()]
      })
    </script>
  </head>
  <body>
    ....
  </body>
</html>
Using in HTML via ES Modules

Using @analytics/simple-analytics in ESM modules.

<!DOCTYPE html>
<html>
  <head>
    <title>Using @analytics/simple-analytics in HTML via ESModules</title>
    <script>
      // Polyfill process.
      // **Note**: Because `import`s are hoisted, we need a separate, prior <script> block.
      window.process = window.process || { env: { NODE_ENV: 'production' } }
    </script>
    <script type="module">
      import analytics from 'https://unpkg.com/analytics/lib/analytics.browser.es.js?module'
      import simpleAnalytics from 'https://unpkg.com/@analytics/simple-analytics/lib/analytics-plugin-simple-analytics.browser.es.js?module'
      /* Initialize analytics */
      const Analytics = analytics({
        app: 'analytics-html-demo',
        debug: true,
        plugins: [
          simpleAnalyticsPlugin()
          // ... add any other third party analytics plugins
        ]
      })
    </script>
  </head>
  <body>
    ....
  </body>
</html>