ããã«ã¡ã¯ïŒ
çŸåšãèªåã®Webãµã€ããnext.jsãããžã§ã¯ãã«å€æããŠããŸãããGoogleAnalyticsã¹ã¯ãªããã¿ã°ãããŒãžã«è¿œå ããæ¹æ³ãããããŸããã äœããæèŠã¯ïŒ
也æ¯ã
ããã³
ãã§ãã¯ã¢ãŠã<Head>
@robinvdvleutenå®è£ ã®éžæã«å¿ããŠãGoogleTagManagerã³ã³ããŒãã³ããäœæããããããŸãã¯ãã®çŽåŸã«å«ããããšããå§ãããŸãã
人ã
ãèšã£ââãããã«ãããªãã¯Head
ã¿ã°ãŸãã¯https://github.com/react-ga/react-gaã®ãããªåå¿ãããããœãªã¥ãŒã·ã§ã³ã䜿ãããšãã§ã
next.jsã§react-gaãåäœã
@gtramontinaããã¯åäœããã¯ãã§ãã ãã以å€ã®å Žåãç§ã¯react-ga
å¯çš¿è
ã®äžäººãªã®ã§ããããæäŒãããšãã§ããŸã
react-ga
å¿
èŠãããŸããã <Head>
ã³ã³ããŒãã³ãã§Googleã¿ã°ãããŒãžã£ãŒã䜿çšããŠãåæãæ¿å
¥ããŸãã nextjs / reactã§æ©èœãããããã«å¿
èŠãªGoogleã¿ã°ãããŒãžã£ãŒã³ãŒãã«ããã€ãã®å°ããªå€æŽããããŸãã
<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-XXXXXX');`}} />
</Head>
<noscript dangerouslySetInnerHTML={{__html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden;"></iframe>`}} />
ã¯ã©ã€ã¢ã³ãåŽã®ããŒãžãã¥ãŒã远跡ããããã®ããè¯ããœãªã¥ãŒã·ã§ã³ã§ããèªå远跡ããå§ãããŸãã 詳现ã«ã€ããŠã¯ã httpsïŒ//github.com/MoOx/phenomic/issues/384ãåç §ããŠ
@impronunciableããã€ãã®ã°ãŒã°ã«ã®åŸãç§ã¯ãŸã æ··ä¹±ããŠããã®ã§ãäŸããããšããã§ãããðãããåéã§ããŸããïŒ
window
ãªããžã§ã¯ãã«ã¢ã¯ã»ã¹ããã³ãŒãã䜿çšããŠã¹ã¯ãªããã¿ã°ãäœæããããã«æ瀺ããããããµãŒããŒåŽã§ã¯æ©èœããŸãããrender
ïŒ componentWillMount
ïŒ getInitialProps
ïŒ ããã¯ãreact-routerã䜿çšããŠããã¹ãŠã®ããŒãžã«å¯ŸããŠ1åã ãã³ãŒããããŒãããããšãæ³å®ããŠãããããããŸãæ確ã§ã¯ãããŸãããããŒãžè¿œè·¡ã¯ãããŒãžããµãŒããŒã§ã¬ã³ããªã³ã°ããããšããšãå¥ã®ããŒãžã«ç§»åãããšãã®äž¡æ¹ã§æ©èœããã¯ãã§ãã å šäœããããããããŒãžã¬ã€ã¢ãŠãHOCãªã©ãåããå žåçãªNextã¢ããªã«ã©ã®ããã«çµ±åãããããèŠãã®ã¯çŽ æŽãããããšã§ãã
Next.js + Google Analytics Autotrackãããåªãã/ã·ã³ãã«ãª/ç ©ããããªã/æå 端ã®çµã¿åããããããšæããã©ãããç¥ã£ãŠãããšããã§ããã...
ç§ã¯ããã調æ»ããããšãã§ããŸã
ç«ã2017幎1æ17æ¥ã7:59ã»ãã¹ãã£ã³ã»ãã¥ãã¢ãªã³[email protected]
æžããŸããïŒ
@impronunciablehttps ïŒ//github.com/impronunciableããã¯çŽ æŽãããã§ããã
ããã€ãã®ã°ãŒã°ã«ã®åŸãç§ã¯ãŸã æ··ä¹±ããŠãããããªäŸããããŸãðããã¯ã§ããŸãã
åéãããŸããïŒ
- @MoOx https://github.com/MoOxã¯ãreact-gaãããã§ã¯ãªãããšãæ瀺ããŠããããã§ã
å¿ èŠã«å¿ããŠãGoogleAutoTrackã䜿çšããå¿ èŠããããŸã
代ããã«https://github.com/googleanalytics/autotrack- ããããAutotrackã¯ãã³ãŒãã䜿çšããŠã¹ã¯ãªããã¿ã°ãäœæããããã«æ瀺ããŸãã
ãŠã£ã³ããŠãªããžã§ã¯ãã«ã¢ã¯ã»ã¹ããããããµãŒããŒåŽã§ã¯æ©èœããŸãã- ãšã«ãããreact-gaãªã©ã®reactã³ã³ããŒãã³ãã䜿çšããå Žåã¯ãã©ãã§è¡ãå¿ èŠããããŸãã
å ¥ããŸããïŒ ã¬ã³ããªã³ã°ã§ã¯ïŒ componentWillMountïŒ getInitialPropsïŒ ããã§ã¯ãããŸãã
ããªããreact-routerã䜿çšããŠããŒãããããšãæ³å®ããŠããã®ã§ãéåžžã«æ確ã§ã
ãã¹ãŠã®ããŒãžã«å¯ŸããŠ1åã³ãŒãã£ã³ã°ããŸããããŒãžè¿œè·¡ã¯ãããŒãžããµãŒããŒã§ã¬ã³ããªã³ã°ãããå Žåãš
次ã«ãå¥ã®ããŒãžã«ç§»åãããšãã ã©ã®ããã«èŠãã®ã¯çŽ æŽãããããšã§ã
å šäœããããããããŒãžãåããå žåçãªNextã¢ããªã«çµ±åããå¿ èŠããããŸã
ã¬ã€ã¢ãŠãHOCãªã©ããªããããè¯ã/ããåçŽãª/ããå°ãªããã®ããããšæããã©ãããç¥ãããšãçŽ æŽãããã§ããã
Next.js + Googleãããé¢åã§æå 端ã®çµã¿åãã
ã¢ããªãã£ã¯ã¹ã®èªå远跡...â
ããªããèšåãããã®ã§ããªãã¯ãããåãåã£ãŠããŸãã
ãã®ã¡ãŒã«ã«çŽæ¥è¿ä¿¡ããGitHubã§è¡šç€ºããŠãã ãã
https://github.com/zeit/next.js/issues/160#issuecomment-273108099 ããŸãã¯ãã¥ãŒã
ã¹ã¬ãã
https://github.com/notifications/unsubscribe-auth/AAKHp9-2bfLXj2hMGlNlkqUSRqEL7R2Cks5rTJ8kgaJpZM4KkXxa
ã
èªå远跡ã§ååã§ãããã¯ã©ã€ã¢ã³ãåŽã«ã®ã¿æ³šå ¥ãããããšã¯ééããããŸããããµãŒããŒåŽã«ã€ããŠèããå¿ èŠã¯ãããŸããã
äŸã«ã€ããŠã¯ã httpsïŒ//github.com/MoOx/react-toulouse/commit/c42045d1001ab813c5d7eae5ab2f4f8c08c0025eãåç §ããŠ
ããããµãŒããŒã®ã¬ã³ããªã³ã°ã远跡ããããããŸãããå Žæãªã©ããããã«ãããªãããã§ãã
ããããã¯ã©ã€ã¢ã³ãã«ãã£ãŠåŠçããããããããããŸãããããŒãžã¯ã¯ã©ã€ã¢ã³ãããã®èŠæ±ã§ãããã¯ã©ã€ã¢ã³ããã©ãŠã¶ã§ã¬ã³ããªã³ã°ãããããšã«æ³šæããŠãã ãã:)
OKç§ã¯ã³ãŒãããµãŒããŒåŽã§å®è¡ãããã¹ãã§ã¯ãªãããšã«æ°ã¥ããŠããŸããã§ããã ã ããç§ã¯@MoOxãæšå¥šããããã«ãŸãããããã¯ããŸãããã¯ãã ãšæããŸãïŒ https ïŒ
ããŒãžãã¥ãŒãæ£ããã«ãŠã³ãããããã©ããã¯ãŸã 確èªãããŠããŸããããããã¯ç§ã«ãšã£ãŠæ°ããããšã§ãð¬ð
ããªã¢ã«ã¿ã€ã ããã¥ãŒã䜿çšããŠãGAãç°¡åã«ãããã°ã§ããŸãã
@MoOxã¯ãããããæ°ã«ãªããŸããå¥ã®ã¿ãã§https://relate.now.shã«äžŠè¡ããŠ
ç§ã¯ãŸã ãããååŸããŠããŸãã...ç§ãæžããã³ãŒãã§ããŒã¿ãååŸããŠããŸããã
ç§ãèŠããã¹ãŠã®äŸã¯<script href="https://www.google-analytics.com/analytics.js" async />
ãå¿
èŠãšããŠããããã§ããããããå
ã®ãã®ã¯ã¯ã©ã€ã¢ã³ãã§å®è¡ãããŠããªãããã§ãïŒ ïŒç§ã®console.logã¯ãã©ãŠã¶ã³ã³ãœãŒã«ã«åºåãããŸãã...ïŒ
äŸã¯ãŸã éåžžã«é«ãè©äŸ¡ãããŸãð
ãããreact-gaã«åãæ¿ããããšã§æ©èœããŸããð
https://github.com/relatenow/relate/commit/a9d2bce46e5314075af7c12bbaa0266865ff25da
ã©ã®ããã«ããŠãããæ©èœãããŸãããïŒ componentDidMountã§ããŒãžãã¥ãŒé¢æ°ãåŒã³åºãããšããŠããŸãã
æ¬çªã¢ããªã®GAãã§ãã¯ã倱æããŸãã
@luandroã¯è©³çŽ°ãèŠããŠããŸãããã圹ç«ã€å Žåã¯äžèšã§ãªã³ã¯ããã³ãããã確èªã§ããŸã
ãã£ãŠã¿ãŸããã ç§ãåŒã³åºããããªããšåãããã«ãã£ãconfigureAnalyticsäžã«ããããŠããŒãžãã¥ãŒã«componentWillMount
ããŸã äžã®è² ã®ååŸGAãã§ãã¯ãã
ããªãã®ã³ãŒãã§ã¯ãå®éã«ã©ããã§ããŒãžããã¯ã«æ¥ç¶ããŠããããã«ã¯èŠããŸãããïŒ
@luandro ga(âsetâ, âpageâ, window.location.pathname); ga(âsendâ, âpageviewâ);
ãè¿œå ããã ãã§ãããŒãžãã¥ãŒã€ãã³ãã®URLãå€æŽã§ããŸãã
ãããè¡ãã«ã¯ãã£ãšãnext.jsãã®æ¹æ³ããããããããŸããããããŒãžäžã§ã¹ã¯ãªãããå®è¡ããŠããWRTã¯ã次ã®ãããªScript
ã³ã³ããŒãã³ããäœæããå Žåã«èŠã€ãããŸããã
// modules/Script.js
export default ({children}) => (
<script dangerouslySetInnerHTML={{__html: `(${children.toString()})();` }}></script>
);
ããããç§ã¯ç§ã®ããã«åãããããããããšãã§ããŸããïŒ
import Document, { Head, Main, NextScript } from 'next/document'
import Script from '../modules/Script';
export default class MyDocument extends Document {
render () {
return (
<html>
<body>
<Main />
<Script>
{
() => {
console.log('foo');
}
}
</Script>
<NextScript />
</body>
</html>
)
}
}
泚æç¹ã¯ããã¹ãŠãé¢æ°ã§å²ãå¿ èŠããããšããããšã§ãã
ãã¹ãŠã®ããŒãžã§gaïŒ 'send'ã 'pageview'ïŒãæ瀺çã«åŒã³åºããªããŠããåã ã®ããŒãžãã¥ãŒã远跡ããããšã¯å¯èœã§ããïŒ ã©ãããŠããããªããã°ãªããªãã®ãªããgaãããŒããããŠããããšã確èªããŠã©ãããåŒã³åºãã®ã§ããããã
ããŒãžãã¥ãŒããã°ã«èšé²ããããã«ãäœããã®æ¹æ³ã§ã«ãŒãå€æŽã€ãã³ãã«é¢é£ä»ããããšã¯å¯èœã§ããïŒ
@karthikiyengaräžèšã®ä»ã®äººãææ¡ããããã«react-ga
ã䜿çšãããã¹ãŠã®ããŒãžã®componentDidMount
ã§ããŒãžãã¥ãŒãèšé²ããŠããŸãã
import ReactGA from 'react-ga'
export const initGA = () => {
console.log('GA init')
ReactGA.initialize('UA-xxxxxxxx-x')
}
export const logPageView = () => {
ReactGA.set({ page: window.location.pathname })
ReactGA.pageview(window.location.pathname)
}
componentDidMount () {
initGA()
logPageView()
}
@vinaypuppalãã¹ãŠã®ããŒãžã³ã³ããŒãã³ãã«å¯ŸããŠinitGAã䜿çšããã®ãäžè¬çãªæ¹æ³ã§ããïŒ
@rongierlachç§ã䜿çšããŠããLayout
åŒã³åºãã³ã³ããŒãã³ãinitialize
ããã³pageview
ã®ã¡ãœããReactGA
å
componentDidMount()
ã
export default class extends Component {
componentDidMount() {
ReactGA.initialize('UA-1234567-1')
ReactGA.pageview(document.location.pathname)
}
render() {
return (
<div>
{this.props.children}
</div>
)
}
ããã¯ãããŒãžããµãŒããŒã¬ã³ããªã³ã°ãããŠãããã®ããã«ããããŸã§ã§æãã¯ãªãŒã³ãªæ¹æ³ã§ããåæåããå¿ èŠããããŸãã ã¯ã©ã€ã¢ã³ããã¬ã³ããªã³ã°ããå Žåãåæåããã€ãã¹ã§ããããã¯ããããšç¢ºä¿¡ããŠããŸãã
@notrabã¯ãæµ ãã¬ã³ããªã³ã°ãèŠéããŠããå¯èœæ§ããããŸããïŒ ã¢ããªã移è¡ããã ãã§ãã¬ã€ã¢ãŠãã³ã³ããŒãã³ããåããŠã³ããããªãå ŽåããããŸãã ããã¯ç§ãããããæãŸããªããã°ãªããªããã®ã§ãã
componentDidMount() {
ReactGA.initialize('xx-xxxxxxx-x')
let trackMe = true
if (trackMe) {
ReactGA.pageview(document.location.pathname)
trackMe = false
}
Router.onRouteChangeStart = () => {
NProgress.start()
this.store.dispatch(transitionPage(true))
trackMe = true
}
Router.onRouteChangeComplete = () => {
NProgress.done()
this.store.dispatch(transitionPage(false))
if (trackMe) { ReactGA.pageview(document.location.pathname) }
}
Router.onRouteChangeError = () => {
NProgress.done()
this.store.dispatch(transitionPage(false))
}
this.store.dispatch(calculateResponsiveState(window))
}
ãããæ©èœãããããšããŠããŸãããããã§ãGoogleAnalyticsããã®å¿çããããŸããã ããã¯react-ga.js
ç§ã®ã³ãŒãã§ãïŒ
import ReactGA from 'react-ga'
const dev = process.env.NODE_ENV !== 'production'
export const initGA = () => {
ReactGA.initialize("UA-XXXXXXXXX-X", {
debug: dev,
})
}
export const trackPageView = (
pageName = window.location.pathname + window.location.search
) => {
ReactGA.set({page: pageName})
ReactGA.pageview(pageName)
}
export const trackCustomEvent = (category, action) =>
ReactGA.event({category, action})
export default undefined
ãããŠç§ã®ã€ã³ããã¯ã¹ããŒãžïŒ
import {initGA, trackPageView} from '../modules/react-ga.js'
[...]
Index.componentDidMount = function() {
initGA()
trackPageView()
}
ãã¡ãããUAã³ãŒãã¯å®éã®ã³ãŒãã«çœ®ãæããããŠããŸãã
@filostratoã©ã®ããã«ä¿®æ£ããŸãããïŒ ç§ãããã«ãã ãã£ãŠããŸãã :)
@exogenesysãããutils/analytics.js
å
¥ããããšã«ãªããŸããïŒ
import ReactGA from 'react-ga'
const dev = process.env.NODE_ENV !== 'production'
export const initGA = () => {
ReactGA.initialize("UA-xxxxxxxxx-x", {
debug: dev,
})
}
export const logPageView = (
pageName = window.location.pathname + window.location.search
) => {
ReactGA.set({page: pageName})
ReactGA.pageview(pageName)
}
export const trackCustomEvent = (category, action) =>
ReactGA.event({category, action})
export default undefined
Layout.js
ãReact.Component
ãæ¡åŒµããããã«å€æŽããŸããïŒ
export default class Layout extends React.Component {
componentDidMount () {
if (!window.GA_INITIALIZED) {
initGA()
window.GA_INITIALIZED = true
}
logPageView()
}
render () {
return (
<Main>
<Header />
{this.props.children}
</Main>
)
}
}
getInitialProps
ã䜿çšããã³ã³ããŒãã³ãã§æ©èœãããæ¹æ³ã¯èŠã€ãããŸããã§ãããã Layout.js
ã§ã¯ããŸãæ©èœããŸããã§ããã ãã詳现ãªçµ±èšãå¿
èŠãªå Žåã¯ã©ãããã°ãããããããŸãããããã®æ©ãæž¡ããŸãã
@filostratoããã¯ãããããŸããã ã©ããããããšãã :)
ããã¿ããª
ç§ã¯èªåã®ãµã€ãã§ã®GAã®å®è£ ã«ã€ããŠãæ±ã£ããšããã§ããããããç§ãæãã€ãããã®ã§ãã
æåã«ã @ notrabã®ãœãªã¥ãŒã·ã§ã³ã䜿çšãããããããããã«èŠããŸããã
export default class extends Component {
componentDidMount() {
ReactGA.initialize('UA-XXXXXXX-X')
ReactGA.pageview(document.location.pathname)
}
render() {
âŠ
}
}
ããããç§ã¯æ°ã¥ããŸããïŒ
componentDidMount
ãå®è¡ãããããã initialize
é¢æ°ãæ°ååŒã³åºãããŸããcomponentDidMount
ã¯ãç°ãªãã¿ã€ãã®ããŒãžãåãæ¿ãããšãã«_only_å®è¡ãããããã pageview
é¢æ°ãåŒã³åºãããã®ã¯ãã®ãšãã ãã§ãã=>ãŠã§ããµã€ãã«video
ããŒãžã¿ã€ãããããç°ãªããããªããŒãžãåãæ¿ããŠããéãæåã®ãããªããŒãžã®ã¿ã远跡ããããšããGAã©ã€ããã¥ãŒããã2ã€ã®åé¡ã«å¯ŸåŠããããã«ãããé«æ¬¡ã®ã³ã³ããŒãã³ããäœæããŸããã æåã®ãã®ã«ã¯ã @ filostratoã®ãœãªã¥ãŒã·ã§ã³ã䜿çšã
import React, { Component } from 'react';
import ReactGA from 'react-ga';
import Router from 'next/router';
const debug = process.env.NODE_ENV !== 'production';
export default (WrappedComponent) => (
class GaWrapper extends Component {
constructor (props) {
super(props);
this.trackPageview = this.trackPageview.bind(this);
}
componentDidMount() {
this.initGa();
this.trackPageview();
Router.router.events.on('routeChangeComplete', this.trackPageview);
}
componentWillUnmount() {
Router.router.events.off('routeChangeComplete', this.trackPageview);
}
trackPageview (path = document.location.pathname) {
if (path !== this.lastTrackedPath) {
ReactGA.pageview(path);
this.lastTrackedPath = path;
}
}
initGa () {
if (!window.GA_INITIALIZED) {
ReactGA.initialize('UA-XXXXXX-XX', { debug });
window.GA_INITIALIZED = true;
}
}
render() {
return (
<WrappedComponent {...this.props} />
);
}
}
);
ãããŠãããªãã®<Layout>
/ <PageWrapper>
/ <PageScaffold>
ã³ã³ããŒãã³ããŸãã¯ããªãããããåŒã¶ãã®ãªãäœã§ãïŒ
import GaWrapper from './ga-wrapper';
const PageScaffold = () => (âŠ);
export default GaWrapper(PageScaffold);
å€åããã¯èª°ã«ã§ã圹ç«ã¡ãŸãã
Router.router.events.âŠ
ã®åŒã³åºãã¯ãææžåãããAPIã®äžéšã§ã¯ãªãããã奜ãã§ã¯ãããŸããã ãã ããæ£ããæ¹æ³ã§ããRouter.onRouteChangeComplete
ãåŒã³åºãããšãããšã onRouteChangeComplete
ãundefined
ãããReferenceErrorãçºçããŸããã ãã¶ãããã¥ã¡ã³ãã¯å€ããªã£ãŠããŸããïŒ
ããã¯next.jsã®Webãµã€ãã§ããŸããããŸããã ãããŠãreact-gaã®éåžžã®å®è£ ã§ééããããŠã£ã³ããŠãå®çŸ©ãããŠããŸããããšãããšã©ãŒãåé¿ããŸããã
@osartunãœãªã¥ãŒã·ã§ã³ã¯ç§ã®ããã«åããã ããããšãããããŸããïŒ ð
@osartunã®ã³ãŒãã®ãããã§ã Googleã®æ°ããgtag
ïŒ_ universal analytics_ã¹ã¯ãªããã眮ãæããïŒã䜿çšããŠpageview
ã€ãã³ããçºçãããããã®æ¬¡ã®ãœãªã¥ãŒã·ã§ã³ãæãã€ãããšãã§ããŸããã
pages/_document.js
import Document, { Head } from 'next/document';
const GA_TRACKING_ID = '..';
export default class MyDocument extends Document {
render() {
return (
<html lang="en-AU">
<Head>
<script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', '${GA_TRACKING_ID}');
`,
}}
/>
</Head>
...
</html>
);
}
}
scaffold.js
/ layout.js
/ wraper.js
/ãããžã§ã¯ãã®ååã¯äœã§ãïŒ
import url from 'url';
import Router from 'next/router';
const GA_TRACKING_ID = '...';
const withPageViews = WrappedComponent =>
class GaWrapper extends React.Component {
componentDidMount() {
// We want to do this code _once_ after the component has successfully
// mounted in the browser only, so we use a special semiphore here.
if (window.__NEXT_ROUTER_PAGEVIEW_REGISTERED__) {
return;
}
window.__NEXT_ROUTER_PAGEVIEW_REGISTERED__ = true;
let lastTrackedUrl = '';
// NOTE: No corresponding `off` as we want this event listener to exist
// for the entire lifecycle of the page
// NOTE: This does _not_ fire on first page load. This is what we want
// since GA already tracks a page view when the tag is first loaded.
Router.router.events.on('routeChangeComplete', (newUrl = document.location) => {
if (newUrl === lastTrackedUrl || !window.gtag) {
return;
}
// Don't double track the same URL
lastTrackedUrl = newUrl;
// Believe it or not, this triggers a new pageview event!
// https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications
window.gtag('config', GA_TRACKING_ID, {
page_path: url.parse(newUrl).path,
});
});
}
render() {
return <WrappedComponent {...this.props} />;
}
};
const PageScaffold = () => (âŠ);
export default withPageViews(PageScaffold);
ããŒãã£ãŒã«é
ããŠæ¥ã人ã«ãšã£ãŠã @ kylewiedmanã®ãœãªã¥ãŒã·ã§ã³ãæ©èœããªãçç±ã¯ãã«ãŒã¿ãŒã€ãã³ããcomponentDidMount
å
ã§å®çŸ©ãããŠããããã§ãã ã³ã³ããŒãã³ãã®å€éšã§ããããå®çŸ©ãããšãåé¡ã解決ããããã§ãã
https://gist.github.com/trezy/e26cb7feb2349f585d2daf449411d0a4
@trezy gtag
ã䜿çšããå Žåã import ReactGA from 'react-ga'
ããå¿
èŠã¯ãªãããã§ãã
<script dangerouslySetInnerHtml={...} />
äŸã䜿çšããŠããã®1è¡ãã€ã³ãžã§ã¯ã·ã§ã³ã«è¿œå ããŸããã
window.gaTrackingId = '${gaTrackingId}';
ãã®åŸããã®è»œéã®ããªãã¯ãæ©èœãå§ããŸããã
Router.onRouteChangeComplete = () => {
if (window.gtag) {
window.gtag('config', window.gaTrackingId, {
page_location: window.location.href,
page_path: window.location.pathname,
page_title: window.document.title,
});
}
};
ããªã倧ããªanalytics.js
ã¯ãã§ãããããªããªããŸãããããã¹ãŠã®ããŒãžã¯åŒãç¶ã远跡ãããŸãã
ããã¯æããã§ã¯ãªãã®ã§ããªããžããªã«äŸããããšããã§ãããã
ãŸãã¯æ¬¡ãž-google-analyticsãªããžããªðµïž
@prichodkoãã®äŸããŸãšããŠãããŠããããšãïŒ
ããã§å©çšå¯èœãªå ¬åŒã®äŸïŒ https ïŒ
componentDidMountïŒïŒã®ã¡ã€ã³ã¬ã€ã¢ãŠããã¡ã€ã«ã«è¿œå ãããéåžžã«åªããlibãèŠã€ãããæ£ããæ©èœããŠããããã§ãã ããã¯ååã«ææžåãããŠãããéšãã¯ãããŸãã
@andylacko確ãã«ãHTTPSãªã©ã®ããã€ãã®åé¡ãä¿®æ£ããããã«ãã©ãŒã¯ããŸããïŒ https ïŒ
åŸã§èª°ãã«åœ¹ç«ã€ãããããªãå Žåã«åããŠãããã«ç§ã®ãœãªã¥ãŒã·ã§ã³ãè¿œå ããã ãã§ãã
ç§ã¯react-gaã䜿çšããŸããããåãããžãã¯ãä»ã®gaããŒã«ã§ãæ©èœããã¯ãã§ãã
_app.js
ã®getInitialPropsã¯ããŠãŒã¶ãŒãæ°ããã«ãŒããã¯ãªãã¯ãããã³ã«ã¯ã©ã€ã¢ã³ãåŽã§ããªã¬ãŒãããŸãã ïŒåããŠãµãŒããŒåŽã§å®è¡ãããŸãïŒã
componentDidMount
ã®_app.js
ã¯ãã¯ã©ã€ã¢ã³ãåŽã§ã®ã¿å®è¡ãããŸãã
ãã®ããã _app.js
ã«ã次ã®æ°è¡ã®ã³ãŒããè¿œå ããŸãã
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
// client-side only, run on page changes, do not run on server (SSR)
if (typeof(window) === "object") {
ReactGA.pageview(ctx.asPath);
}
return { pageProps, router }
}
componentDidMount() {
// client-side only, run once on mount
ReactGA.initialize('UA-XXXXXXX-3');
ReactGA.pageview(window.location.pathname + window.location.search);
}
ããŒãžããµãŒããŒã§ã¬ã³ããªã³ã°ããããšãGAã³ãŒããtypeof(window) === "object"
ã§ã©ããããããã getInitialProps
ã§ã¯äœãèµ·ãããŸããã
ã¯ã©ã€ã¢ã³ãåŽã§ã¯ããã¹ãŠããµãŒããŒã¬ã³ããªã³ã°ãããããã getInitialProps
ã¯åããŠå®è¡ãããŸããã GAã¯ãã¯ã©ã€ã¢ã³ãåŽã®componentDidMount
å
ã«ã»ããã¢ãããããŸãã
ãã®åŸã®ã«ãŒãå€æŽïŒåãã«ãŒãã§ãã£ãŠãïŒã¯ãã¯ã©ã€ã¢ã³ãåŽã§getInitialProps
ãããªã¬ãŒããgaã€ãã³ããããªã¬ãŒãããŸãã
åŸã§èª°ãã«åœ¹ç«ã€ãããããªãå Žåã«åããŠãããã«ç§ã®ãœãªã¥ãŒã·ã§ã³ãè¿œå ããã ãã§ãã
ç§ã¯react-gaã䜿çšããŸããããåãããžãã¯ãä»ã®gaããŒã«ã§ãæ©èœããã¯ãã§ãã
_app.js
ã®getInitialPropsã¯ããŠãŒã¶ãŒãæ°ããã«ãŒããã¯ãªãã¯ãããã³ã«ã¯ã©ã€ã¢ã³ãåŽã§ããªã¬ãŒãããŸãã ïŒåããŠãµãŒããŒåŽã§å®è¡ãããŸãïŒã
componentDidMount
ã®_app.js
ã¯ãã¯ã©ã€ã¢ã³ãåŽã§ã®ã¿å®è¡ãããŸãããã®ããã
_app.js
ã«ã次ã®æ°è¡ã®ã³ãŒããè¿œå ããŸããstatic async getInitialProps({ Component, router, ctx }) { let pageProps = {} if (Component.getInitialProps) { pageProps = await Component.getInitialProps(ctx); } // client-side only, run on page changes, do not run on server (SSR) if (typeof(window) === "object") { ReactGA.pageview(ctx.asPath); } return { pageProps, router } } componentDidMount() { // client-side only, run once on mount ReactGA.initialize('UA-XXXXXXX-3'); ReactGA.pageview(window.location.pathname + window.location.search); }
ããŒãžããµãŒããŒã§ã¬ã³ããªã³ã°ããããšãGAã³ãŒãã
typeof(window) === "object"
ã§ã©ãããããããgetInitialProps
ã§ã¯äœãèµ·ãããŸãããã¯ã©ã€ã¢ã³ãåŽã§ã¯ããã¹ãŠããµãŒããŒã¬ã³ããªã³ã°ãããããã
getInitialProps
ã¯åããŠå®è¡ãããŸããã GAã¯ãã¯ã©ã€ã¢ã³ãåŽã®componentDidMount
å ã«ã»ããã¢ãããããŸãããã®åŸã®ã«ãŒãå€æŽïŒåãã«ãŒãã§ãã£ãŠãïŒã¯ãã¯ã©ã€ã¢ã³ãåŽã§
getInitialProps
ãããªã¬ãŒããgaã€ãã³ããããªã¬ãŒãããŸãã
ãããŠã£ã«ã Webpackã«ReactGAãå«ãããšïŒã¯ã©ã€ã¢ã³ããµã€ãã§å®è¡ãããããïŒããã«ããµã€ãºã«å€§ããªåœ±é¿ããããŸããïŒ
@ChrisEdsonhttps ïŒ//github.com/react-ga/react-gaã©ã€ãã©ãªå šäœã161kbå§çž®ãããŠããŸãã
ããŒãã æ£çŽã«èšããšãããã¯çµ¶å¯Ÿã«å·šå€§ã§ãïŒ
åå19æ01åã«2019幎2æïŒæšïŒã28æ¥ããŠã£ãªã¢ã ã»ãªãŒã®[email protected]ã¯æžããŸããïŒ
@ChrisEdson https://github.com/ChrisEdson
https://github.com/react-ga/react-gaã©ã€ãã©ãªå šäœã161kbå§çž®ãããŠããŸããâ
ããªããèšåãããã®ã§ããªãã¯ãããåãåã£ãŠããŸãã
ãã®ã¡ãŒã«ã«çŽæ¥è¿ä¿¡ããGitHubã§è¡šç€ºããŠãã ãã
https://github.com/zeit/next.js/issues/160#issuecomment-468395136 ããŸãã¯ãã¥ãŒã
ã¹ã¬ãã
https://github.com/notifications/unsubscribe-auth/AC5okwth_o_BLLPeqIcSBmhKineAhYfgks5vSCeUgaJpZM4KkXxa
ã
ããã¯ãã©ã€ãã©ãªå
šäœã®GitHubã«ãªã¹ããããŠããçªå·ã§ãã
ã¢ããªã«ããã±ãŒãžåãããåŸãå®éã®ãµã€ãºã確èªããã«ã¯ã©ãããã°ããã§ããïŒ
ç§ã®iPhoneããéä¿¡ããã
2019幎3æ1æ¥ã«ã¯ã15ïŒ43ã§ãã¯ãªã¹ã»ãšããœã³ã®[email protected]ã¯æžããŸããïŒ
ããŒãã æ£çŽã«èšããšãããã¯çµ¶å¯Ÿã«å·šå€§ã§ãïŒ
åå19æ01åã«2019幎2æïŒæšïŒã28æ¥ããŠã£ãªã¢ã ã»ãªãŒã®[email protected]ã¯æžããŸããïŒ
@ChrisEdson https://github.com/ChrisEdson
https://github.com/react-ga/react-gaã©ã€ãã©ãªå šäœã161kbå§çž®ãããŠããŸããâ
ããªããèšåãããã®ã§ããªãã¯ãããåãåã£ãŠããŸãã
ãã®ã¡ãŒã«ã«çŽæ¥è¿ä¿¡ããGitHubã§è¡šç€ºããŠãã ãã
https://github.com/zeit/next.js/issues/160#issuecomment-468395136 ããŸãã¯ãã¥ãŒã
ã¹ã¬ãã
https://github.com/notifications/unsubscribe-auth/AC5okwth_o_BLLPeqIcSBmhKineAhYfgks5vSCeUgaJpZM4KkXxa
ãâ
ããªããã³ã¡ã³ãããã®ã§ããªãã¯ãããåãåã£ãŠããŸãã
ãã®ã¡ãŒã«ã«çŽæ¥è¿ä¿¡ããããGitHubã§è¡šç€ºããããã¹ã¬ããããã¥ãŒãããŠãã ããã
ãããã£ãŠãçž®å°ãããã¹ã¯ãªããã¯15kbã§ãã ããã¯ããªãå°ããã§ãã
Webpackããã³ãã«åæããå®éã«ã©ãã ãè¿œå ãããããå ±åããŸãã
ãã³ãã«ã®åèšãµã€ãºãçŽ500kbã®å ŽåãReactGAã¯çŽ27kbãè¿œå ããŸãã ç©äºã®å£®å€§ãªèšç»ã§ã¯ãšãŠãå°ããã§ãã
åŸã§èª°ãã«åœ¹ç«ã€ãããããªãå Žåã«åããŠãããã«ç§ã®ãœãªã¥ãŒã·ã§ã³ãè¿œå ããã ãã§ãã
ç§ã¯react-gaã䜿çšããŸããããåãããžãã¯ãä»ã®gaããŒã«ã§ãæ©èœããã¯ãã§ãã
_app.js
ã®getInitialPropsã¯ããŠãŒã¶ãŒãæ°ããã«ãŒããã¯ãªãã¯ãããã³ã«ã¯ã©ã€ã¢ã³ãåŽã§ããªã¬ãŒãããŸãã ïŒåããŠãµãŒããŒåŽã§å®è¡ãããŸãïŒã
componentDidMount
ã®_app.js
ã¯ãã¯ã©ã€ã¢ã³ãåŽã§ã®ã¿å®è¡ãããŸãããã®ããã
_app.js
ã«ã次ã®æ°è¡ã®ã³ãŒããè¿œå ããŸããstatic async getInitialProps({ Component, router, ctx }) { let pageProps = {} if (Component.getInitialProps) { pageProps = await Component.getInitialProps(ctx); } // client-side only, run on page changes, do not run on server (SSR) if (typeof(window) === "object") { ReactGA.pageview(ctx.asPath); } return { pageProps, router } } componentDidMount() { // client-side only, run once on mount ReactGA.initialize('UA-XXXXXXX-3'); ReactGA.pageview(window.location.pathname + window.location.search); }
ããŒãžããµãŒããŒã§ã¬ã³ããªã³ã°ããããšãGAã³ãŒãã
typeof(window) === "object"
ã§ã©ãããããããgetInitialProps
ã§ã¯äœãèµ·ãããŸãããã¯ã©ã€ã¢ã³ãåŽã§ã¯ããã¹ãŠããµãŒããŒã¬ã³ããªã³ã°ãããããã
getInitialProps
ã¯åããŠå®è¡ãããŸããã GAã¯ãã¯ã©ã€ã¢ã³ãåŽã®componentDidMount
å ã«ã»ããã¢ãããããŸãããã®åŸã®ã«ãŒãå€æŽïŒåãã«ãŒãã§ãã£ãŠãïŒã¯ãã¯ã©ã€ã¢ã³ãåŽã§
getInitialProps
ãããªã¬ãŒããgaã€ãã³ããããªã¬ãŒãããŸãã
NextJS 9ã䜿çšããŠããå Žåã«çºçããåé¡ã¯ãèªåäºåã¬ã³ããªã³ã°ãç¡å¹ã«ããããšã§ãã 眮ãããè¯ãå Žæãããã°çåã«æãReactGA.pageview(ctx.asPath);
ããåé€ã getInitialProps
æã
ã¯åé€ããããšãã§ããŸãæ段ã¯getInitialProps
ïŒããã§æŠèª¬ãšããŠããªããã¢ãŠãã«èªåã®äºåã¬ã³ããªã³ã°ã匷å¶ããŠããªãHTTPS ïŒ//err.sh/next.js/opt-out-automatic-prerenderingã
æŽæ°ïŒwith-google-analyticsã®äŸïŒhttps://github.com/zeit/next.js/tree/canary/examples/with-google-analyticsïŒãèŠã€ããŠã Router.events.on('routeChangeComplete', url => ReactGA.pageview(url))
ã«ã€ããŠå°ãåããŸãããããããã¹ãããŠãURLãæ£ããããæ£ããæ¹æ³ã®ããã«èŠããããšã確èªããå¿
èŠããããŸãã getInitialProps
ã¡ãœãããåé€ãããããã¯ã©ã¹å®£èšã®äžã«è¿œå ããŸããã
@GodOfGrandeurããã¯https://medium.com/@austintoddj/using -google-analytics-with-next-js-423ea2d16a98 _app.jsã«ã³ãŒããè¿œå ãããšãå¿ èŠã«å¿ããŠã©ãã§ãããªã¬ãŒãããããã§ããŸãããµãŒããŒã§ããªã¬ãŒãããªãããšãæ°ã«å ¥ã£ãŠããŸãïŒåé¡ã¯ãããŸãããããªã¬ãŒãããªãã§ãããïŒã
ãµãŒãããŒãã£ã¯å¿ èŠãããŸãããgtagã䜿çšããŠããå Žåã¯ãç§ãäœæãã次ã®ã³ãŒãã䜿çšããŠãã ããã-
<script
async
src="https://www.googletagmanager.com/gtag/js?id=%your code here%" >
</script>
<script dangerouslySetInnerHTML={
{ __html: `
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments)}
gtag("js", new Date());
gtag("config", "<%your code here%>");
`}
}>
</script>
å¥ã®ãªãã·ã§ã³ã¯ã useEffect()
ã䜿çšããããšã§ãã Layout.js
ãã¡ã€ã«å
ã§ãããå®è¡ããŸããã
useEffect(() => {
if (process.env.NODE_ENV === 'production') {
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', '{GOOGLE ANALYTICS CODE}', {
page_location: window.location.href,
page_path: window.location.pathname,
page_title: window.document.title,
})
}
})
ãããŠ<Head>
ïŒ
<Head>
<script async src="https://www.googletagmanager.com/gtag/js?id={GOOGLE ANALYTICS CODE}"></script>
</Head>
@reinink空ã®é
åã2çªç®ã®å°éå
·ãšããŠuseEffect
ã«æž¡ããŠãæåã®ã¬ã³ããªã³ã°åŸã«é¢æ°ã1åã ãå®è¡ããããã«ãããå Žåãããããšãè¿°ã¹ãŠãããŸãã
useEffect(() => {...}, [])
@reininkã®ãœãªã¥ãŒã·ã§ã³ãæ¡åŒµããŠãã¬ã€ã¢ãŠãã³ã³ããŒãã³ã/ãã³ãã¬ãŒããã©ããããããã«äœ¿çšããå®çšçãªHOCã
import React, { useEffect } from 'react'
import Head from 'next/head'
const GoogleAnalyticsHOC = ({ children }) => {
useEffect(() => {
if (process.env.NODE_ENV === 'production') {
window.dataLayer = window.dataLayer || []
// eslint-disable-next-line
function gtag() {
window.dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', process.env.GOOGLE_ANALYTICS_ID, {
page_location: window.location.href,
page_path: window.location.pathname,
page_title: window.document.title
})
}
}, [])
return (
<>
<Head>
<script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS_ID}`} />
</Head>
{children}
</>
)
}
export default GoogleAnalyticsHOC
åºç¯å²ã«ãã¹ããããŠããŸããããããŒã«ã«ã§å®è¡ãããŠãããªã¢ã«ã¿ã€ã ã®èšªåè ãšããŠæ©èœããåæ ŒããŸãã :)
ç§ã¯ãã®ã¬ã€ããèŠã€ããŸãã-ããã¯æšå¥šãããã¢ãããŒãã§ããïŒreact-gaã䜿çšããŸãïŒïŒ
æšå¥šãããæ¹æ³ã¯ããã®å ¬åŒã®äŸã䜿çšããããšã§ãã
https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics
ãã§ã«ããã«æçš¿ãããŠããŸãã githubã®åé¡ãã¹ã¿ãã¯ãªãŒããŒãããŒã®ããã«ããããšæãããšããããŸãã質åã®çŽåŸã«åçãåãå ¥ããŠåŒ·èª¿è¡šç€ºããŸãïŒã¡ãã»ãŒãžãçµµæåãå€ãããå Žåã1ã€ã®ãªãã·ã§ã³ã¯ããã®æçš¿ãžã®ã³ã¡ã³ããå¶éããããšã§ããããããã°ã人ã ã¯æ°ããåé¡ãäœæããŸãã代ããã«ãäœæäžã«åæ§ã®åé¡ããã§ã«äœæãããŠããããšããããïŒãåæ§ã®åé¡ãæ©èœã®ãããã§ïŒãçãããããŸãïŒãã ããçµµæåã䜿çšããçãã¯é·ãæŽå²ã®éäžã§å€±ãããããã githubã§çããèŠã€ããã®ã¯ããŸã䟿å©ã§ã¯ãããŸããïŒã
ãã§ã«ããã«æçš¿ãããŠããŸãã æã ãgithubã®åé¡ãã¹ã¿ãã¯ãªãŒããŒãããŒã®ããã«ããããšæããŸãã質åã®çŽåŸã«ãããã€ãã®åçãåãå ¥ããŠåŒ·èª¿è¡šç€ºããŸãïŒã¡ãã»ãŒãžãå€ãããŠçµµæåãååã§ãªãå Žå...ã
Githubã¯ããã®ãªããžããªã®[ãã£ã¹ã«ãã·ã§ã³]ã¿ãã§ããããããã¿ã€ãã³ã°ããŠããŸãã
@janbaykaraãããŒãæ¬åœã«ïŒ ç§ãã¡ã¯çåãããã«èããŠããŸã:)åé¡ãäœããã®åœ¢ã§ãã£ã¹ã«ãã·ã§ã³ã«å€æããæ¹æ³ãèŠã€ããŠãããããšãé¡ã£ãŠããŸããããã§ãªããã°ãåãããšã«ãªãã§ãããïŒæ©èœãåé¡ã«ããŒãžãããæ¢åã®ãã¹ãŠã®ãã£ã¹ã«ãã·ã§ã³ãåé¡ã«ãªãå ŽåïŒã ããããå¿çã«æè¬ããŸãïŒ
@ 3loniousäžè¬çã«SPAã§ããŸãæ©èœããªãã®ã§ãç§ã¯å人çã«
Next.jsã«ã€ããŠã¯ã httpsïŒ//github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-gcms-lcz-sty/src/components/pageLayouts/Head.tsx ïŒ next/Head
ã䜿çšïŒã確èªããŠãã ããã next/Head
ïŒããããç§ã®ã¢ããªã«ã¹ã¯ãªããã¿ã°ãå«ããæ¹æ³ã§ãã
NRN https://unlyed.github.io/next-right-nowãã芧ã«ãªãããšãèºèºããªãã§
ç§ã¯ãããååŸãããã©ããããããªããç§ã¯ãã®ãã¡ã€ã«ã«ã¹ã¯ãªããã¿ã°ã衚瀺ãããŸãããïŒ
ãããæ©èœãããœãªã¥ãŒã·ã§ã³ã§ãã ç§ã¯ãããåºç¯å²ã«ãã¹ãããŠããŸããã®ã§ãããªãèªèº«ã§ãããããŠãã ããã
pages/_document.js
ã§ãããã<Head>
ã«è¿œå ããŸãã ããã¥ã¡ã³ããã¡ã€ã«ãäžæžãããæ¹æ³ã«ã€ããŠã¯ãããã¥ã¡ã³ããåç
§ããŠãã ããã
<script async src='https://www.googletagmanager.com/gtag/js?id=YOUR_GA_TRACKING_ID'></script>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)}
gtag('js', new Date());
gtag('config', 'YOUR_GA_TRACKING_ID');
`
}}>
</script>
å°ãªããšãç§ã®GAã¢ã«ãŠã³ãã«ãã©ãã£ãã¯ãå ±åããŸãã
@ 3loniousã¹ã¯ãªããã¿ã°ãšã¹ã¿ã€ã«ã¿ã°ã¯åãããã«æ©èœããŸãã
äžèšã®è§£æ±ºçã¯ãçµéšãããæ©èœããŸãã ïŒããã¯ç§ãGAãæ©èœãããããã«äœ¿çšããæ¹æ³ã§ãïŒ
ã¿ããªããããšãã ç§ã¯ããªãã«æ»ã£ãŠã¿ãã€ããã§ã
ããããŸãããç§ã¯ãããæ©èœãããšæããŸã
ã¢ã³ãã³ã«æè¬ããŸãã ããããŸãããç§ã¯ããªãã®ããã«æ°ãããã®ãæã£ãŠããŸããã
ã«ã¹ã¿ããŒãµãŒãã¹ã«äœ¿çšãããã£ããã¢ããªããããŸããããã®ã¹ã¯ãªããã¿ã°ãæ©èœããŸãããïŒ äœãæ¡ã¯ïŒ
ãã®2çªç®ã®ã¿ã°ãæ¬æã«è¿œå ããããã«æ瀺ããŠããŸããïŒ ããªãã¯ããã§äœãããŸããïŒ
TBTã¯ã©ãã§ããïŒ ããªããã°ãŒã°ã«ã¢ããªãã£ã¯ã¹ãè¿œå ãããªãã°ãããã¯ããªãã®ã¹ããŒãã¹ã³ã¢ãé ãããŸã
TBTã¯ã©ãã§ããïŒ ããªããã°ãŒã°ã«ã¢ããªãã£ã¯ã¹ãè¿œå ãããªãã°ãããã¯ããªãã®ã¹ããŒãã¹ã³ã¢ãé ãããŸã
ããã¯ãã³ã³ãã³ãã®åã«ã¹ã¯ãªãããé 眮ããããšãæšå¥šããŠããããã§ãã ã³ã³ãã³ãã®äžã«çœ®ããŠãã¹ã³ã¢ã¯äžãããŸããã
å人çã«ã¯ãã¹ã¯ãªãããæåã«é 眮ããããšã®æ¬åœã®ã¡ãªããã¯ããããŸããã ããŒãžã®èªã¿èŸŒã¿ãäœããã®çç±ã§å£ããŠããŠãHTMLããªãããã®çç±ã§å®å šã«èªã¿èŸŒãŸãããäžæ¢ãããå ŽåãããããšããŠã«ãŠã³ããããªãå¯èœæ§ããããŸãã
nextjsã䜿çšããŠããŸãã ç§ã¯reactgoogle place auto completeAPIã䜿çšããããšããŠããŸãã ãããŠãAPIã®ãããã®ã¹ã¯ãªããã¿ã°ãæ¿å ¥ãããã§ããïŒ ãããã®ã¹ã¯ãªããã¿ã°ã¯ã©ãã«æ¿å ¥ããã°ããã§ããïŒ
_app.js
`` `js
ãreact-gaãããReactGAãã€ã³ããŒãããŸãã
componentDidMount() {
ReactGA.initialize("XX-XXXXXXXXX-X", { debug: false });
ReactGA.set({ page: this.props.router.pathname });
ReactGA.pageview(this.props.router.pathname);
this.unlisten = this.props.router.events.on("routeChangeComplete", (router) => {
ReactGA.set({ page: router });
ReactGA.pageview(router);
});
}
ãããæå¿«ã ã ããããå®éããã¯æ²ããã§ãã ReactãNextããšã³ã·ã¹ãã å šäœãæ»ã¬ã®ãåŸ ã€ããšã¯ã§ããŸããã
æãåèã«ãªãã³ã¡ã³ã
react-ga
å¿ èŠãããŸããã<Head>
ã³ã³ããŒãã³ãã§Googleã¿ã°ãããŒãžã£ãŒã䜿çšããŠãåæãæ¿å ¥ããŸãã nextjs / reactã§æ©èœãããããã«å¿ èŠãªGoogleã¿ã°ãããŒãžã£ãŒã³ãŒãã«ããã€ãã®å°ããªå€æŽããããŸãã