npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@uptechworks/analytics-service-angular

v2.0.0

Published

The is an Angular wrapper for analytics that makes it easy to configure and use tracking events with various services.

Downloads

42

Readme

analytics-service (aka Analytics Service Angular)

Usage

After you npm install or ng add the package you'll need to initialize the module in your application's module.

import { AnalyticsServiceModule } from 'analytics-service';

@NgModule({
  // ...
  imports: [
    // ...
    AnalyticsServiceModule.forRoot(AnalyticsConfig)
    // ...
  ],
  // ...
})
export class AppModule { }

Pass in the analytics service configuration to the forRoot() function to register your providers. For example, here is a simple configuration for the Amplitude provider...

const AnalyticsConfig: AnalyticsServiceConfiguration = {
  analyticsProviderConfig: [
    {
      providerType: AnalyticsProviderType.amplitude,
      provider: new AmplitudeProvider({
        apiKey: environment.amplitudeApiKey
      }),
    }
  ],
  logLevel: "DEBUG"
}

Once the module is set up you can inject the AnalyticsService wherever you need it to track data and events about your user.

import { AnalyticEvent, AnalyticsService } from 'analytics-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(
    private analyticsService: AnalyticsService,
  ) { }

  buttonClicked(): void {
    const event: AnalyticEvent = {
      name: 'button-clicked',
      properties: {
        'color': 'red',
        'amount': 4,
        'options': ['a', 'c']
      }
    }
    this.analyticsService.track(event)
  }
}

Service Functions

setCurrentUser()

Set the current user using a AnalyticsCurrentUser object. In most cases you will set it to a unique identify that represents the user. You can also set the user with properties. These properties will overwrite existing properties if they already exist on the user (subject to change depending on the analytics provider's implementation)

track()

Track an event for the current user using an AnalyticEvent object. Give it a name and optional properties to be associated to the event in the Analytic provider (subject to change depending on the analytics provider's implementation)

updateCurrentUser()

Adds or updates current user with supplied properties. It accepts an object. Please keep to values that are JSON serializable. (Subject to change depending on the analytics provider's implementation)

increment()

Increments the given user property by the amount specified using a AnalyticIncrement object. Most providers will start at 0 if it doesn't exist. (Subject to change depending on the analytics provider's implementation)

unsetCurrentUser()

Removes the current user from the provider. You can pass in a boolean to tell the provider to make the user anonymous after they have been unset. Some providers will not need to do anything additional. Others may need to regenerate device identifiers, or other information that can be tied back to the user that was previously set.

Providers

Analytic providers are classes that the analytic service can provide information to so that they can process and notify their analytics library as needed.

Included
Amplitude

If you want to save analytic information to Amplitude, use the AmplitudeProvider. While using the serivce, if you want to verify that your events are working, you can use the Chrome plugin to help track what's happening in your app with Amplitude.

Custom

You can create your own provider and provide it in the configuration if you'd like to integrate with an unsupported analytics software product. Make sure that your custom provider extends AnalyticsProvider implements the required functions(even if they do nothing), and add it to the configuration.

export class CustomProvider extends AnalyticsProvider {

  constructor() {
    super()
    // Any logic needed for the library you're integrating with.
  }

  public trackEvent(event: AnalyticEvent): void {
    // Do track logic
  }

  public setCurrentUser(currentUser: AnalyticsCurrentUser): void {
    // do setCurrentUser logic
  }

  public updateCurrentUser(properties: object): void {
    // do updateCurrentUser logic
  }

  public increment(incrementor: AnalyticIncrement): void {
    // do increment logic
  }

  public unsetCurrentUser(makeAnonymous: boolean): void {
    // do unsetCurrentUser logic
  }
}

Then pass an instance into the configuration.

const AnalyticsConfig: AnalyticsServiceConfiguration = {
  analyticsProviderConfig: [
    {}, // some provider
    {
      providerType: AnalyticsProviderType.custom,
      provider: new CustomProvider(),
    }
    {}, // another provider
  ],
}