@marcdiethelm/nuxtjs-countly NPM

@marcdiethelm/nuxtjs-countly

A Nuxt.js plugin providing Countly's web SDK / analytics / tracker. Github, API, docs

The plugin lazy loads the Countly tracker by adding a script element as last child in html body with async=true. It then checks for script load every 500ms for 30s, until the script is loaded or it times out. After successful script load window.Countly is injected into Vue components and Nuxt context as $countly.

Based on nuxtjs-countly by gweill, a published npm module without public source code. If you are the original author please contact me.

Installation and Config

npm install --save @marcdiethelm/nuxtjs-countly

In nuxt.config.js...

add this line to the modules array:

'@marcdiethelm/nuxtjs-countly'

and add this configuration data somewhere below:

/*
 ** Countly tracker configuration (@marcdiethelm/nuxtjs-countly)
 */
countly: {
	// Required, the URL of your Countly server
	url: process.env.MYAPP_COUNTLY_URL || 'http://mycountly.lan',
	
	// Required, copy from server's management > apps page
	app_key: process.env.MYAPP_COUNTLY_APP_KEY || 'b0ccb5ea1fd4000000000000448ed463d87d334f',
	
	// For self-hosting... use original .js or .min.js (minified)
	// Default: https://cdn.jsdelivr.net/npm/countly-sdk-web@latest/lib/countly.min.js
	trackerSrc: process.env.MYAPP_COUNTLY_TRACKER_SRC || 'http://mycountly.lan/sdk/web/countly.min.js',
	
	// Automatic tracking, if not array this defaults to ['track_sessions', 'track_pageview', 'track_links']
	trackers: null,
	
	// Append a <noscript> tag with tracking pixel <img> to <body>, default: true
	noScript: true,
	
	// Log Countly debug info to console, default: false
	debug: process.env.NODE_ENV !== 'production'
}

Programmatic usage

Countly is available as this.$countly in Vue.js components and also in context provided by Nuxt.js. (No import is needed.) It is typically used as

this.$countly.q.push()

Consult the Countly web SDK API documentation for further info on using the $countly object.

Examples

Note the function this.onCountlyLoad called on tracker script load, which accepts callbacks.

// ./examples/component.vue

asyncData: function(context) {
	let countly = context.app.$countly
},

created: function() {
	// only in browser
	if (this.$countly) {
		this.$countly.q.push([
			'add_event',
			{
				key: 'page-created'
			}
		])
	}
},

mounted: function() {
	this.$countly.q.push([
		'add_event',
		{
			key: 'page-mounted'
		}
	])

	this.onCountlyLoad(() => {
		this.$countly.q.push([
			'add_event',
			{
				key: 'countly-loaded'
			}
		])
	})
}

This plugin provides a $track helper method, which performs some input checking and pushes to the queue:

this.$track('add_event', {
	key: 'email-signup-success',
	segmentation: { email: this.email }
})

this.$track('log_error', { 
	email: this.email,
	detail: err.message
})

Troubleshooting

CORS errors in Firefox despite correct HTTP headers:
Are you running an ad blocker? Blocked connection by an identified tracker script will show as a CORS error in Firefox.