Giter Site home page Giter Site logo

peopledoc / ember-metrics-pendo Goto Github PK

View Code? Open in Web Editor NEW
2.0 40.0 2.0 2.49 MB

Ember-metrics-pendo allows to configure the Pendo service in your ember project using ember-metrics.

License: MIT License

JavaScript 85.29% HTML 14.35% Handlebars 0.36%
ember-metrics ember metrics pendo ember-addon peopledoc-opensource ghec-mig-migrated approved-public

ember-metrics-pendo's Introduction

ember-metrics-pendo

CI Ember Observer Score License: MIT

Deprecation Warning ⚠️

This add-on has been merged into ember-metrics.

Please use ember-metrics v1.4.0+ instead and remove ember-metrics-pendo from your dependencies.

About this addon

Ember-metrics-pendo allows to configure the Pendo service in your ember project using ember-metrics.

What is Pendo?

Pendo is a product cloud that brings product analytics, user feedback and guided user engagement as part of one integrated platform.

What is ember-metrics?

ember-metrics is an Ember addon that provides bundled adapters for analytics services (like Google Analytics), and one API to track events, page views, and more. Pendo is not included by default in ember-metrics.

Compatibility

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

Installation

ember install ember-metrics-pendo

Configuration

To setup ember-metrics-pendo, first configure the service in config/environment:

module.exports = function(environment) {
  var ENV = {
    metricsAdapters: [
      {
        name: "Pendo",
        environments: ["production"],
        config: {
          apiKey: "0f76c037-4d76-4fce-8a0f-a9a8f89d1453"
        }
      }
    ]
  };
};

The apiKey is the key associated with the Pendo account. Owning such a key is required to configure ember-metrics-pendo.

Usage

Be aware the use of Pendo makes sense only once your visitor is identified in your application, as the purpose of the product is to provide analytics and user feedback.

API

Service API

The add-on ember-metrics includes a metrics Service, which provides the methods:

  • identify(analyticsName?: string | string[], analyticsOptions?: {})

    For analytics services that have identification functionality.

  • trackEvent(analyticsName?: string | string[], analyticsOptions?: {})

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

For both methods: (see ember-metrics#api)

  • Parameter analyticsName is optional and allows you to specifically target analytics Services.

  • Parameter analyticsOptions is optional and allows you to pass a configuration to the adapter of the targeted analytics Services.

Activate Pendo

To activate Pendo, you should call the identify function provided by the metrics service. To do so, your app should contains the following code:

// Call this whenever information about your visitors becomes available
// Use Strings, Numbers, or Bools for value types
this.metrics.identify("Pendo", {
  visitor: {
    id: "VISITOR-UNIQUE-ID" // Required if user is logged in
    // email:        // Optional
    // role:         // Optional

    // You can add any additional visitor level key-values here,
    // as long as it's not one of the above reserved names.
  },

  account: {
    id: "ACCOUNT-UNIQUE-ID" // Highly recommended
    // name:         // Optional
    // planLevel:    // Optional
    // planPrice:    // Optional
    // creationDate: // Optional

    // You can add any additional account level key-values here,
    // as long as it's not one of the above reserved names.
  }
});

Visitor Unique ID: Replace the VISITOR-UNIQUE-ID with the unique visitor or user id from your application. We also recommend adding additional information about your visitor such as their Role (admin, user), email address, and other information you may want to slice your data by, or target user groups by.

Account Unique ID: While not required, we highly recommend passing through the account ID or customer ID associated with each visitor. This lets you roll up data by account. In addition, we recommend passing in any additional information about the account, such as the account name (if not obvious from the ID), and other information that may be helpful to slice by, or target to - such as industry, plan price, or any other information. If you do NOT have the notion of an account, just comment out the ID line in account.

The above snippet can be called wherever you want in your application. Here is an example to activate Pendo in a Route:

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

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

  _initPendo(visitorId, accountId) {
    this.metrics.identify("Pendo", {
      visitor: {
        id: visitorId
      },
      account: {
        id: accountId
      }
    });
  },

  model() {
    return this.store.find("user", "me");
  },

  afterModel({ visitorId, accountId }) {
    this._super();
    this._initPendo(visitorId, accountId);
  }
});

In this example, visitorId and accountId are data coming from some user payload.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

ember-metrics-pendo's People

Contributors

christinabranson avatar dependabot[bot] avatar ember-tomster avatar greatwizard avatar kevin-loumont avatar mrchocolatine avatar ndekeister-us avatar njoyard avatar robbiethewagner avatar romgere avatar rstudner avatar xcambar avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ember-metrics-pendo's Issues

clean-css 4.x dependencie

We will need to delete the resolution deps of clean-css when ember-cli will upgrade his deps to ember-cli-preprocess-registry v4.x.x because it doens't use it anymore

//package.json "resolutions": { "clean-css": "^4.1.11" }

it could also bring new issue with node.js 12
see: ember-cli/ember-cli-preprocess-registry#71

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.