nextjs - How to set up Google Analytics through Google Tag Manager for Next-Js? -




formerly using react-ga npm module insert google analytics in next js app. , this:

import reactga 'react-ga'  export const initga = () => {   reactga.initialize('ua-*******-*', {     titlecase: false   }) }  export const logpageview = () => {   if (window.location.href.split('?')[1]) {     reactga.set({page: window.location.pathname + '?' + window.location.href.split('?')[1]})     reactga.pageview(window.location.pathname + '?' + window.location.href.split('?')[1])   } else {     reactga.set({page: window.location.pathname})     reactga.pageview(window.location.pathname)   } } 

and calling logpageview function in header(that inserted every page of app) this:

  componentdidmount () {     if (!window.ga_initialized) {       initga()       window.ga_initialized = true     }     logpageview()   }   componentwillreceiveprops () {     if (!window.ga_initialized) {       initga()       window.ga_initialized = true     }     logpageview()   } 

now want use google tag manager handle analytics page view . how this?

in order use google tag manager should inject tag manager script on every page. since _document.js wrapper every page. should insert tag manager's script in _document.js in head section this:

<head>         <script dangerouslysetinnerhtml={{           __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':           new date().gettime(),event:'gtm.js'});var f=d.getelementsbytagname(s)[0],           j=d.createelement(s),dl=l!='datalayer'?'&l='+l:'';j.async=true;j.src=           'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentnode.insertbefore(j,f);         })(window,document,'script','datalayer','gtm-*****');`,         }}>         </script> ... </head> 

now set use google tag manager in next-js app should proceed handle pageview , other analytics related stuff tag manager dashboard.

to set google analytics pageview single page applications(like nextjs) can follow these steps.





wiki

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -