@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

``bash
npm install --save @marcdiethelm/nuxtjs-countly
`

In nuxt.config.js...

- add this line to the modules array:

`js
'@marcdiethelm/nuxtjs-countly'
`

- and add this configuration data somewhere below:

`js
/*
** 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

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

`js
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.

`js
// ./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:

`js
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.