概要
- Zeit Now + Next.jsの開発環境ができた([*1][*1])([*2][*2])ので、GTMを導入してみた。
- トリガーを2つ仕込む以外は取り立てて特別なことはしなくてよかった。
準備
- Google Analytics を作成。
- TRACKING_IDをメモ
- Google Tag Managerを作成。
- トリガーは2つ設定
- ページビュー（アクセス時用）
- 履歴を変更（Next.jsのLinkでSSR内のページ遷移をしたとき用）
ソース修正
src/pages/_document.tsx
export default class MyDocument extends Document {
render() {
const GA_TRACKING_ID = 'GTM-TFQ27FV'
const gtmScript = `(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','${GA_TRACKING_ID}');`
const gtmFrame = `<iframe src="https://www.googletagmanager.com/ns.html?id=${GA_TRACKING_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`
return (
<Html lang="en">
<Head>
<script dangerouslySetInnerHTML={{ __html: gtmScript }} />
</Head>
<body>
<noscript dangerouslySetInnerHTML={{ __html: gtmFrame }} />
<Main />
<NextScript />
</body>
</Html>
)
}
}
環境
- Windows 10 Home
- virtualbox 6.1.6
- Vagrant 2.2.7
- ubuntu 18.04 LTS
- docker-ce Docker version 19.03.5, build 633a0ea838
- docker-compose version 1.25.3, build d4d1b42b
- node 13.13
- now-cli: 18.0
- next: 9.3.4
- react: 16.13.1
- react-dom: 16.13.1
- @reduxjs/toolkit: 1.3.4
- react-redux: 7.2.0
- firebase: 7.14.0
- firebase-admin: 8.10.0
- react-firebaseui: 4.1.0
- typescript: 3.8.3
参考
[Docker で zeit nowのデプロイ環境とNext.jsの開発環境を作ったメモ][*1]
[PdfMakeを使ったPDF作成APIをZeit Nowで動かしたメモ][*2]
gtag manager
next.js sample
Next.js のプロジェクトに GTM を組み込む方法
[*1]:https://qiita.com/hibohiboo/items/e6c30e76e26dde0e8611
[*2]:https://qiita.com/hibohiboo/items/9123fc6ecb546c5820e3