GTMの入れ替え
GTMの入れ替え

GTMの入れ替え

Tags
Next.js Notion Starter Kit
Next.js
React.js
GTM
Web Dev
Published
Aug 24, 2021

GTMを一応は入れてたけど発火が不安定?

Blogの仕組みをまるっと入れ替えてみた!Blogの仕組みをまるっと入れ替えてみた! で脱線しまくって収集つかなくなってたんだけど、一応は GTM を入れてたのね。
けど、発火してんだかしていないんだか不安定な感じだったから、もう一度調べてみたら next.js の examples に GTM の設置例があったからチャレンジしてみた。

検索がうまくなってきてはいるものの・・・

新規プロジェクトに examples を導入する方法はたくさん見つかるのだけど、既に作ってあるプロジェクトに導入する方法が見つけられなくて手作業、手探りで😆
なんにも考えず GitHub で Deploy ボタンを押したら Vercel に新規プロジェクトができて、 GitHub に Repository が増えちゃったw
間違えたね。これ。
気を取り直して、ローカルに落とした方が見やすいから How to use の指示どおり下記を実行。
yarn create next-app --example with-google-tag-manager with-google-tag-manager-app
実行結果
$ yarn create next-app --example with-google-tag-manager with-google-tag-manager-app
yarn create v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-next-app@11.1.0" with binaries:
      - create-next-app
Creating a new Next.js app in /home/musk/workspace/NextProjects/with-google-tag-manager-app.

Downloading files for example with-google-tag-manager. This might take a moment.

Installing packages. This might take a couple of minutes.

yarn install v1.22.11
info No lockfile found.
[1/4] Resolving packages...
warning next > native-url > querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning next > node-libs-browser > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "next > styled-jsx > @babel/plugin-syntax-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 14.22s.

Initialized a git repository.

Success! Created with-google-tag-manager-app at /home/musk/workspace/NextProjects/with-google-tag-manager-app
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd with-google-tag-manager-app
  yarn dev

Done in 29.02s.
必要そうなところをコピペしていく簡単ではない作業。正しいかは分からない。

pages/_app.tsx に2か所追加

// GTMを追加
import GoogleTagManager from '../components/GoogleTagManager'
return (
    <GoogleTagManager>
      <Component {...pageProps} />
    </GoogleTagManager>
  )

pages/_document.tsx にも2か所追加

          {/* Google Tag Manager - Global base code */}
          <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_ID}');
              `,
            }}
          />

          </Head>
</Head> の直前に追加。
            <script src='noflash.js' />

            <noscript>
              <iframe
                src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
                height="0"
                width="0"
                style={{ display: 'none', visibility: 'hidden' }}
              />
            </noscript>
<script src='noflash.js' /> の直下に追加。
追加で必要そうなファイルをコピー!
musk@Elisa:~/with-google-tag-manager-app$ cp lib/gtm.js ~/nextjs-notion-starter-kit/lib/
musk@Elisa:~/with-google-tag-manager-app$ cp components/GoogleTagManager.js ~/nextjs-notion-starter-kit/components/
musk@Elisa:~/with-google-tag-manager-app$ cp .env.local.example ~/nextjs-notion-starter-kit/.env.local
で、 yarn build すると、怒られるのよ。
$ yarn build
yarn run v1.22.11
$ next build
info  - Loaded env from /nextjs-notion-starter-kit/.env.local
info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
Failed to compile.

./pages/_document.tsx:47:59
Type error: Cannot find name 'GTM_ID'.

  45 |               j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  46 |               'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
> 47 |               })(window,document,'script','dataLayer', '${GTM_ID}');
     |                                                           ^
  48 |               `,
  49 |             }}
  50 |           />
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
VSCode を見ると、 名前 'GTM_ID' が見つかりません。 って怒られてるね。
モジュール "lib/gtm" から 'GTM_ID' をインポートする をクリックしたら怒られなくなった!🤩
notion image
よーし、今度こそ!って yarn build するがね。
$ yarn build
yarn run v1.22.11
$ next build
info  - Loaded env from /home/musk/workspace/NextProjects/nextjs-notion-starter-kit/.env.local

> Build error occurred
Error: `future.webpack5` in `next.config.js` has moved to the top level `webpack5` flag https://nextjs.org/docs/messages/future-webpack5-moved-to-webpack5
    at Object.loadWebpackHook (/home/musk/workspace/NextProjects/nextjs-notion-starter-kit/node_modules/next/dist/server/config-utils.js:93:15)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Object.loadConfig [as default] (/home/musk/workspace/NextProjects/nextjs-notion-starter-kit/node_modules/next/dist/server/config.js:332:5)
    at async Span.traceAsyncFn (/home/musk/workspace/NextProjects/nextjs-notion-starter-kit/node_modules/next/dist/telemetry/trace/trace.js:60:20)
    at async /home/musk/workspace/NextProjects/nextjs-notion-starter-kit/node_modules/next/dist/build/index.js:83:24
    at async Span.traceAsyncFn (/home/musk/workspace/NextProjects/nextjs-notion-starter-kit/node_modules/next/dist/telemetry/trace/trace.js:60:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
また、怒られるよね。ほうほう。前に見たアレだ。
指示に従い(?) next.config.js を書き換える。
future: {
    webpack5: true
  }
変更前。
future: {
    webpack5: false
  }
変更後。
に書き換えて yarn build するがね。できたw
怒られる覚悟してたのに!
VSCode で components/GoogleTagManager.jslib/gtm.js を開くと、めっちゃ怒られてるけど今は無視しよう...

やっとDeployだぜ!

Push しようとしたらエラーが出たーーー!\(^o^)/
remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.
どうやら、2021年8月13日から Personal access tokens ってのを設定しないといけなくなったらしい。

ここで Personal access tokens を設定

設定方法

個人アクセストークンを使用する
個人アクセストークン(PAT)は、 GitHub API または コマンドライン を使用するときに GitHub への認証でパスワードの代わりに使用できます。 PAT を使用して、SAML SSO を使用する Organization が所有するリソースにアクセスする場合は、PAT を認証する必要があります。 詳しい情報については「 SAMLシングルサインオンでの認証について」及び「 SAMLシングルサインオンで利用する個人アクセストークンの認可 」を参照してください。 セキュリティ上の理由から、 GitHub は過去 1 年間使用されていない個人アクセストークンを自動的に削除します。 まだ検証していない場合は メールアドレスを検証 します。 任意のページの右上で、プロフィール画像をクリックし、続いて Settings(設定)をクリックしてください。 左サイドバーで [ Developer settings] をクリックします。 左のサイドバーで Personal access tokens(個人アクセストークン)をクリックしてください。 [ Generate new token] をクリックします。 トークンにわかりやすい名前を付けます。 このトークンに付与するスコープ、すなわち権限を選択します。 トークンを使用してコマンドラインからリポジトリにアクセスするには、[ repo] を選択します。 [ Generate
個人アクセストークンを使用する
設定して、Password の入力に Personal access tokens を入力したらPushできた!
デプロイ環境についてよく分かんないのであとでこれ読む。
VercelでNext.jsのプロジェクトをデプロイしてみた
サンプルで作ったNextjsのプロジェクトをVercelでデプロイしてみました! 今回はこちらのリポジトリをデプロイしてみました! Next.jsで作ったブログを公開したい 本番環境と開発環境を用意したい 開発環境には認証をかけたい カスタムドメインにする 他にも試したみたいことはたくさんありますが、とりあえず初回なのでこれだけできればよしとします。 GitHubでアカウント登録して デフォルトの設定でポチポチしたら デプロイできました! 2環境にデプロイされたました さらに2環境デプロイされました😅 さらにデプロイされました😅 コミット毎に新しいドメインでデプロイしてくれるようです。 そして、ブランチごとにもドメインを用意してデプロイしてくれるようですね。 Vercelはデフォルトで、どのブランチへのプッシュでも、プルリク作っても、とりあえずデプロイしてくれます デプロイ環境は2種類です Preview デフォルトで全てのプッシュに対してデプロイされる レスポンスヘッダーに x-robots-tag: noindex が付与されているので、検索エンジンにインデックスされない Production Production Branch(mainとかmasterとか)にマージされた時か、vercel --prodコマンドを実行時にデプロイされる こちらのドキュメントにあるとおり、プレビュー環境ではレスポンスヘッダーに x-robots-tag: noindex が付与されているので、検索エンジンにインデックスされることはないとのことです。 vercelのconfigで設定する 設定でビルドステップを無視する条件を登録する なので、NODE_ENVでプレビュー環境とプロダクション環境の処理を分岐させることはできないですね VercelのSettingのEnvironmental Variableで適当な環境変数を設定する next.config.jsonに以下を追記 module.exports = { env: { ENABLE_BASIC_AUTH: process.env.ENABLE_BASIC_AUTH, }, } コード内で process.env.ENABLE_BASIC_AUTH を判定する この手順でプレビュー環境とプロダクション環境で分岐させることができました! 今回はVercelの環境変数の設定で「プレビュー環境」にだけ環境変数を設定したのですが、それが反映されてると思ってたサイトが予想と違うぞ? 環境変数の設定が反映されるurl レスポンスヘッダーに x-robots-tag: noindex が付与されているかどうか x-robots-tag: noindexが付与されていない x-robots-tag: noindexが付与されている え、これじゃあ、環境変数で分岐させて認証かけたとしても、認証かけれないurl出てくるじゃん。。。 If you request a preview URL, the X-Robots-Tag HTTP header will be set as noindex.
VercelでNext.jsのプロジェクトをデプロイしてみた

本番環境で GTM が undefined...

ローカルでは確認できてたよね?
.env.local に GTM の ID さえ書けば勝手に本番環境にも渡してくれるのかとばかり思っていたらそうではないのですね....
vercelでの環境変数の扱いが便利になった
Vercel での環境変数周りでのあれこれ、ずっと苦しみ続けていたので自分なりのプラクティスをメモします。 辛さの原因は Vercel のアップデートのスピードが早く正しい情報にアクセスし辛いことが一因としてあるので、それをなくせたら良いなと思っています。 もしこのドキュメントが古くなっていたら Issues などからお知らせていただけると幸いです。 NextJS を前提とした解説になりますが、 NextJS の環境変数周りについては解説を省きます。 Vercel での環境変数周りがややこしいのは NextJS に起因しているものもあるとは思うのですが、話が長くなるので別の記事にて補足したいと思います。 (ビルド時・サーバー・クライアントで見える・渡せる環境変数や方法が変わる話) Vercel は プレビュー環境と本番環境が存在しています。 そしておそらく開発するときのローカル環境もあるでしょう。 このときローカル環境は開発環境 or ローカル環境の API を、プレビュー環境は開発環境の API を本番環境は本番環境の API を呼びたいはずです。 (API と書いていますが、外部環境のことをまとめてそう読んでいます。Firebase のような SDK も含みます。) 例としていま、dev 環境なら dev.ojisan, prd 環境なら prd.ojisan にアクセスするようにしたいとして、その叩き分けをどう Vercel 環境で実現するかを考えてみましょう。 一つの案として、NODE_ENV に development か production を渡して、アプリ内で
vercelでの環境変数の扱いが便利になった
ちょっと、よく分からないんですが... と最後まで見ると!!!
Vercel の Environment Variables 機能が全て解消してくれました
って!それ、 Notion Blog のときに設定したことあるやつ!
NAMENEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID を入れて、 VALUEGTM ID を入れて Redeploy して確認したら入ってた!わーい!\(^o^)/
ちゃんと確認していないけど、たぶん動いてる。今度、確認する。
次は何をしよっかな..