articles/add-google-analytics-to-a-nuxt-js-app/

[utterances-bot]

Carl Cassar - Add Google Analytics To A Nuxt Js App

Let me show you how to add Google Analytics to your Nuxt JS app, whilst ensuring that you comply with GDPR legislation with a cookie banner.

https://www.carlcassar.com/articles/add-google-analytics-to-a-nuxt-js-app/

[ingvoo]

Hi Cal and thank you for this great post.

I made use of it and happy with the results. I have just one question. Why do you reload the page after you have stored the localstorage key

location.reload();

I research a bit and did not find any example of sites reloading after confirming for cookies. But at the same time often cookies are just stored already before confirming.

So my question. I could tell that vgtag plugin starts tracking already when bootstrap so for that reason there is no need to reload unless you do it for another reason?

very best, Ingvi

[carlcassar]

Hey Ingvi,

Thank you for your kind comment. I believe you are correct and the location.reload(); is unnecessary. I think I added it because the cookies don't show up in the console automatically. You either need to refresh the page or hit the refresh button in the storage tab.

Thanks for the heads up!

Carl

[ingvoo]

Nice, thanks so much for replying. I am really glad not needing to reload the app.

I ended up with wrapping the final component like this

      <transition name="fade">
        <app-cookie-card />
      </transition>

then with little css you get a nice transition

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-out;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

[ingvoo]

Quick heads up.

I deployed the app to netlify and the encountered an issue. The cookie banner works at first but then after reloading the banner appears again and won't go away after accept. The problem arise due to the fact that the localstorage is not ready when the created hook is called to check for it.

So instead of using the created hook I used mounted which solved the issue for me.

[drKreso]

great post, tnx!

[swsalim]

Thanks for the tutorial. Super helpful.

[Dimi2000]

Hi man! I am follow your post for install Analytics in my nuxt 2 site... But it didn't work... I got:

"TypeError: Cannot set properties of undefined (setting '$gtag') at attachApi (vue-gtag.esm.js?a584:397:1)"

I state that I had to force the installation of vue-gtag because he didn't like the version of vue 2.7 and he wanted the 3... But in nuxt I can't put the vue 3.0.0