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

@customd/cd-analytics-tracker

v0.3.3

Published

A package with basic analytics tracking.

Downloads

37

Readme

Analytics Trackers

pipeline status coverage report

This library aims to provide a set of simple, easy to use factory methods to help reduce the boilerplate of writing Analytics Tracking

Installation

Install with Yarn

yarn add cd-analytics-tracker

Or with NPM

npm install --save cd-analytics-tracker

Please Note: You'll need to be registered to https://npm.customd.com to access this module. To do this, run;

npm config set registry https://npm.customd.com

Basic Usage

Within your Router import

import {GoogleAnalytics, FacebookPixel, FullStory, GoogleTags} from 'cd-analytics-tracker'

...

<BrowserRouter>
	<GoogleAnalyticsTracker  options={}/>
	<FacebookPixelTracker options={}/>
	<FullStoryTracker options={}/>
	<GoogleTags options={} />
...
</BrowserRouter>

GoogleTags

  • trackingId - required - GoogleTags requires the TrackingId to function correctly

to send events import TrackGoogleTag and use it as TrackGoogleTag(('event', <action>, { 'event_category': <category>, 'event_label': <label>, 'value': <value> }))

GoogleAnalytics

GoogleAnalytics accetps the following options <GoogleAnalytics options={{}}>

  • trackingId - (optional) {string} - your analticts tracking id - use this to initialise the tracking library
  • debug - (optional) {boolean} - set to true to use the analytics debuggin library (https://developers.google.com/analytics/devguides/collection/analyticsjs/debugging)

additionally you can import {TrackGoogleAnalytics} from 'cd-analytics-tracker' and use it to track any events:

  • eg: TrackGoogleAnalytics('send', 'event', 'Videos', 'play', 'Fall Campaign')

Ga tracks each router change and logs a page view for each router change.

FacebookPixel

Accepts trackingId and tracks page views per router change

FullStory

Accepts trackingId for the Organisation and can thereafter be accessed via Window.FS Accepts initialise as an object with UserId & params as keys.

<FullStoryTracker options={
	{
		initialise: {userId,params}
	}
}/>

Contributing

If you find a bug, error or feature that you wish to fix/implement and contribute back to the project, you can do so by committing your work to a new branch, and issuing a merge request.

Once you've created your branch, push it to the repository, and then issue a merge request targeting develop or a release branch.

Make sure you leave a note about why this fix is important, how you found the solution, and any implications this solution might have. Use the merge request template provided.

GitLab will automatically send out an email to the maintainer — that person will then be able to review, test and ensure the change is documented.

The person assigned to the merge will:

  • Test the merge request against the develop branch.
  • Document the modifications.
  • Publish a new release if required, or add to the next release.
  • Communicate with the developer who raised the request, and work out if the change needs to be implemented as a hotfix update for earlier major versions.
  • Ensure tests have been written, and pass.
  • Ensure new features or behaviours have been documented.

Publishing

Ensure you're logged in and registered to npm.customd.com before publishing.

  1. Commit and push all changes to a release/xyz branch
  2. Run yarn publish
  3. Merge and squash changes in to master