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
Post a Comment