当前位置: 首页 > 软件库 > 程序开发 > >

ember-metrics

授权协议 MIT License
开发语言 JavaScript
所属分类 程序开发
软件类型 开源软件
地区 不详
投 递 者 孟和怡
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

ember-metrics

Send data to multiple analytics services without re-implementing new API

Build Status

This addon adds a simple metrics service to your app that makes it simple to send data to multiple analytics services without having to implement a new API each time.

Using this addon, you can easily use bundled adapters for various analytics services, and one API to track events, page views, and more. When you decide to add another analytics service to your stack, all you need to do is add it to your configuration, and that's it!

Writing your own adapters for currently unsupported analytics services is easy too. If you'd like to then share it with the world, submit a pull request and we'll add it to the bundled adapters.

Currently supported services and options

  1. GoogleAnalytics

  2. Mixpanel

  3. GoogleTagManager

    • id: Container ID, e.g. GTM-XXXX

    • dataLayer: An array containing a single POJO of information, e.g.:

    dataLayer = [
      {
        pageCategory: 'signup',
        visitorType: 'high-value',
      },
    ];
    • envParams: A string with custom arguments for configuring GTM environments (Live, Dev, etc), e.g.:
    envParams: "gtm_auth=xxxxx&gtm_preview=env-xx&gtm_cookies_win=x"
    
  4. Segment

  5. Piwik

  6. Intercom

  7. Facebook Pixel

    dataProcessingOptions: {
      method: ['LDU'],
      country: 1,
      state: 1000
    }
  8. Amplitude

  9. Azure App Insights

Community adapters

  1. Adobe Dynamic Tag Management

Installing The Addon

ember install ember-metrics

Compatibility

  • Ember.js v3.20 or above
  • Ember CLI v3.20 or above
  • Node.js v12 or above

Configuration

To setup, you should first configure the service through config/environment:

module.exports = function (environment) {
  var ENV = {
    metricsAdapters: [
      {
        name: 'GoogleAnalytics',
        environments: ['development', 'production'],
        config: {
          id: 'UA-XXXX-Y',
          // Use `analytics_debug.js` in development
          debug: environment === 'development',
          // Use verbose tracing of GA events
          trace: environment === 'development',
          // Ensure development env hits aren't sent to GA
          sendHitTask: environment !== 'development',
          // Specify Google Analytics plugins
          require: ['ecommerce'],
        },
      },
      {
        name: 'Mixpanel',
        environments: ['production'],
        config: {
          token: '0f76c037-4d76-4fce-8a0f-a9a8f89d1453',
        },
      },
      {
        name: 'Segment',
        environments: ['production'],
        config: {
          key: '4fce-8a0f-a9a8f89d1453',
        },
      },
      {
        name: 'Piwik',
        environments: ['production'],
        config: {
          piwikUrl: 'http://piwik.my.com',
          siteId: 42,
        },
      },
      {
        name: 'Intercom',
        environments: ['production'],
        config: {
          appId: 'def1abc2',
        },
      },
      {
        name: 'FacebookPixel',
        environments: ['production'],
        config: {
          id: '1234567890',
          dataProcessingOptions: {
            method: ['LDU'],
            country: 1,
            state: 1000,
          },
        },
      },
      {
        name: 'Amplitude',
        environments: ['production'],
        config: {
          apiKey: '12345672daf5f3515f30f0000f1f0000cdfe433888',
          options: {
            trackingOptions: {
              ip_address: false,
            },
            // ...other amplitude configuration options
            // https://developers.amplitude.com/#sdk-advanced-settings
          },
        },
      },
      {
        name: 'AzureAppInsights',
        environments: ['production'],
        config: {
          instrumentationKey: '123',
          // ...other appInsights configuration options
          // https://github.com/microsoft/ApplicationInsights-JS#configuration
        },
      },
      {
        name: 'LocalAdapter',
        environments: ['all'], // default
        config: {
          foo: 'bar',
        },
      },
    ],
  };
};

Adapter names are PascalCased. Refer to the list of supported adapters above for more information.

The metricsAdapters option in ENV accepts an array of objects containing settings for each analytics service you want to use in your app in the following format:

/**
 * @param {String} name Adapter name
 * @param {Array} environments Environments that the adapter should be activated in
 * @param {Object} config Configuration options for the service
 */
{
  name: 'Analytics',
  environments: ['all'],
  config: {}
}

Values in the config portion of the object are dependent on the adapter. If you're writing your own adapter, you will be able to retrieve the options passed into it:

// Example adapter
export default BaseAdapter.extend({
  init() {
    const { apiKey, options } = Ember.get(this, 'config');
    this.setupService(apiKey);
    this.setOptions(options);
  },
});

To only activate adapters in specific environments, you can add an array of environment names to the config, as the environments key. Valid environments are:

  • development
  • test
  • production
  • all (default, will be activated in all environments)

Content Security Policy

If you're using ember-cli-content-security-policy, you'll need to modify the content security policy to allow loading of any remote scripts. In config/environment.js, add this to the ENV hash (modify as necessary):

// example for loading Google Analytics
contentSecurityPolicy: {
  'default-src': "'none'",
  'script-src': "'self' www.google-analytics.com",
  'font-src': "'self'",
  'connect-src': "'self' www.google-analytics.com",
  'img-src': "'self'",
  'style-src': "'self'",
  'media-src': "'self'"
}

Usage

In order to use the addon, you must first configure it, then inject it into any Object registered in the container that you wish to track. For example, you can call a trackPage event across all your analytics services whenever you transition into a route, like so:

// app/routes/application.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  metrics: service(),
  router: service(),

  init() {
    this._super(...arguments);

    let router = this.router;
    router.on('routeDidChange', () => {
      const page = router.currentURL;
      const title = router.currentRouteName || 'unknown';

      this.metrics.trackPage({ page, title });
    });
  },
});

See this example with Native Classes

If you wish to only call a single service, just specify it's name as the first argument:

// only invokes the `trackPage` method on the `GoogleAnalyticsAdapter`

metrics.trackPage('GoogleAnalytics', {
  title: 'My Awesome App',
});

Context

Often, you may want to include information like the current user's name with every event or page view that's tracked. Any properties that are set on metrics.context will be merged into options for every Service call.

import { set } from '@ember/object';

set(this, 'metrics.context.userName', 'Jimbo');
this.metrics.trackPage({ page: 'page/1' }); // { userName: 'Jimbo', page: 'page/1' }

Native Class usage

If you are using an app built with the Ember Octane Blueprint or otherwise implementing Native Class syntax in your routes, the following example can be used to report route transitions to ember-metrics:

// app/routes/application.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {
  @service metrics;
  @service router;

  constructor() {
    super(...arguments);

    let router = this.router;
    router.on('routeDidChange', () => {
      const page = router.currentURL;
      const title = router.currentRouteName || 'unknown';

      this.metrics.trackPage({ page, title });
    });
  }
}

API

Service API

There are 4 main methods implemented by the service, with the same argument signature:

  • trackPage([analyticsName], options)

    This is commonly used by analytics services to track page views. Due to the way Single Page Applications implement routing, you will need to call this on the activate hook of each route to track all page views.

  • trackEvent([analyticsName], options)

    This is a general purpose method for tracking a named event in your application.

  • identify([analyticsName], options)

    For analytics services that have identification functionality.

  • alias([analyticsName], options)

    For services that implement it, this method notifies the analytics service that an anonymous user now has a unique identifier.

If an adapter implements specific methods you wish to call, then you can use invoke

  • invoke(method, [analyticsName], options)

    metrics.invoke('trackLink', 'Piwik', {
      url: 'my_favorite_link',
      linkType: 'download',
    });

Lazy Initialization

If your app implements dynamic API keys for various analytics integration, you can defer the initialization of the adapters. Instead of configuring ember-metrics through config/environment, you can call the following from any Object registered in the container:

import { Route } from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  metrics: service(),

  afterModel(model) {
    const metrics = this.metrics;
    const id = model.googleAnalyticsKey;

    metrics.activateAdapters([
      {
        name: 'GoogleAnalytics',
        environments: ['all'],
        config: {
          id,
        },
      },
    ]);
  },
});

Because activateAdapters is idempotent, you can call it as many times as you'd like. However, it will not reinstantiate existing adapters.

Since ember-metrics now automatically removes all unused adapters, it's also important to force the inclusion of the adapter via config/environment. NOTE: If the adapter is already defined in the metricsAdapters array of config/environment then this step is not necessary.

// config/environment
module.exports = function(environment) {
  var ENV = {
    'ember-metrics': {
      includeAdapters: ['google-analytics']
    }
  };

  return ENV;

Writing Your Own Adapters

First, generate a new Metrics Adapter:

$ ember generate metrics-adapter foo-bar

This creates app/metrics-adapters/foo-bar.js and a unit test at tests/unit/metrics-adapters/foo-bar-test.js, which you should now customize.

Required Methods

The standard contracts are optionally defined, but init and willDestroy must be implemented by your adapter.

init

This method is called when an adapter is activated by the service. It is responsible for adding the required script tag used by the integration, and for initializing it.

willDestroy

When the adapter is destroyed, it should remove its script tag and property. This is usually defined on the window.

Usage

Once you have implemented your adapter, you can add it to your app's config, like so:

module.exports = function (environment) {
  var ENV = {
    metricsAdapters: [
      {
        name: 'MyAdapter',
        environments: ['all'],
        config: {
          secret: '29fJs90qnfEa',
          options: {
            foo: 'bar',
          },
        },
      },
    ],
  };
};

Testing

For unit tests using old QUnit testing API (prior toRFC 232),you will need to specify the adapters in use under needs, like so:

moduleFor('route:foo', 'Unit | Route | foo', {
  needs: [
    'service:metrics',
    'ember-metrics@metrics-adapter:google-analytics', // bundled adapter
    'ember-metrics@metrics-adapter:mixpanel', // bundled adapter
    'metrics-adapter:local-dummy-adapter', // local adapter
  ],
});

Contributors

We're grateful to these wonderful contributors who've contributed to ember-metrics:

Installation

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

 相关资料
  • Ember检查器是一个浏览器插件,用于调试Ember应用程序。 灰烬检查员包括以下主题 - S.No. 灰烬检查员方式和描述 1 安装Inspector 您可以安装Ember检查器来调试您的应用程序。 2 Object Inspector Ember检查器允许与Ember对象进行交互。 3 The View Tree 视图树提供应用程序的当前状态。 4 检查路由,数据选项卡和库信息 您可以看到检查

  • 英文原文: http://emberjs.com/guides/getting-ember/index/ Ember构建 Ember的发布管理团队针对Ember和Ember Data维护了不同的发布方法。 频道 最新的Ember和Ember Data的 Release,Beta 和 Canary 构建可以在这里找到。每一个频道都提供了一个开发版、最小化版和生产版。更多关于不同频道的信息可以查看博客

  • ember-emojione ember-emojione is your emoji solution for Ember, based on the EmojiOne project. EmojiOne version 2 is used, which is free to use for everyone (CC BY-SA 4.0), you're only required to giv

  • Ember 3D Ember 3D is an Ember addon for using Three.js - an easy to use, lightweight, javascript 3D library. It is designed to: Prescribe a solid file structure to Three.js code using ES6 modules. Ena

  • Ember Table An addon to support large data set and a number of features around table. Ember Table canhandle over 100,000 rows without any rendering or performance issues. Ember Table 3.x supports: Emb

  • vscode-ember This is the VSCode extension to use the Ember Language Server. Features All features currently only work in Ember-CLI apps that use classic structure and are a rough first draft with a lo