enableAutoOutboundTracking option

[CalebKester]

I'm trying to see if we can get the enableAutoOutboundTracking functionality working.

https://github.com/plausible/plausible-tracker/blob/master/README.md#outbound-link-click-tracking

I tried passing it in my nuxt.config as plausible.enableAutoOutboundTracking: true but it doesn't seem to be an option (it's done a bit differently in the plausible-tracker code.

Is there another way to do this or am I messing something else up? I added the custom event in my dashboard as well but no luck.

Thanks for the plugin!

[moritzsternemann]

Hey! You are right, outbound link tracking is configured a little differently in plausible compared to other options.

I think the preferred way to use this feature in Nuxt is to add a plugin as follows:

// plugins/plausible-outbound.js

export default function ({ $plausible }) {
  $plausible.enableAutoOutboundTracking()
}

Let me know if this solves your issue.

Also, for Nuxt apps, I think it might be useful to expose these plausible features through the Nuxt config as well. I'll investigate this further and update the package.

[CalebKester]

Sorry for the slow response but I found that app.$plausible doesn't seem to be defined. I added plausible as a module in nuxt according to the docs.

I'll spin up a demo repo soon and post a link to it

[moritzsternemann]

@CalebKester just looked into it again briefly and it seems like the behavior changed after Nuxt 2.12. Up until 2.12 you could access the injected instance in a plugin using context.app.$plausible and after using context.$plausible, maybe this helps.

[CalebKester]

@moritzsternemann thanks for all the help. I created this repo that is on nuxt 2.15.8.

https://github.com/CalebKester/plausible

export default function (context) {
    console.log('enabling outbound', context.$plausible);
    context.$plausible.enableAutoOutboundTracking();
}

I'm logging context.$plausible and it's undefined. However if I remove the plugin I'm tracking localhost plausible events and seeing it make network requests.

[moritzsternemann]

Thanks for the example repo! The issue here is that the plausible-tracker is only injected on the client side (because we want to track clients, not SSR, of course). As a result, the context.$plausible object is not available during the server-side render and Nuxt throws the error.

To resolve this, you can either rename the plugin to something like plugins/plausible-outbound.client.js and update the filename in nuxt.config.js or use the plugin object syntax in nuxt.config.js:

export default {
  plugins: [
    { src: '~/plugins/plausible-outbound.js', mode: 'client' }
  ]
}

More information about this is available here: https://nuxtjs.org/docs/directory-structure/plugins#client-or-server-side-only.

Let me know if this solves your issue. I'm planning to add plausible-tracker features like this one to the vue-plausible Nuxt config so we can do this a little easier in the future. Will let you know here when this released.

[CalebKester]

Thank you, that makes complete sense to run it only on client. I'm sorry for taking your time I should have tried that as I'm using a client script on a custom referral plugin as well.

Thanks!

[moritzsternemann]

Just wanted to let you know that I added configuration options for enableAutoPageviews() and enableAutoOutboundTracking() in v1.3.1 🙂

[CalebKester]

Awesome thank you! I migrated from the plugin to 1.3.1 on my test site without any issues! I'll replace my prod code in the next release as this was very smooth. Thanks again for your help, teams really liking seeing the outbound links for the past 7 days.

[TafadzwaD]

@moritzsternemann For some reason If I set enableAutoOutboundTracking:true I will be redirected to my main page on navigation..