Next.js に Google Tag Manager を設定する - XM Cloud 編

XM Cloud のサイトを外部に公開をしました。他のサービスと連携させるためにも、まずは Google Tag Manager を設定します。

Next.js に Google Tag Manager を設定する

以前にもブログで紹介をしましたが、今回は少し違う形で実装をしていきます。

• Next.js に Google Tag Manager を設定する

まずパスを変更して、以下のコマンドでモジュールをインストールします。

cd src\sxastarter
npm install react-gtm-module
npm install --save-dev @types/react-gtm-module

続いて、以下のように新しいコンポーネントを作成します。

import { useEffect } from 'react';
import TagManager from 'react-gtm-module';

const GoogleTagManager = (): JSX.Element => {
  // useEffect for basic page views tracking via router/gtag.
  useEffect(() => {
    const tagManagerArgs = {
      gtmId: process.env.GTM_ID as string,
      auth: process.env.GTM_AUTH as string,
      preview: process.env.GTM_ENVIRONMENT as string,
    };
    TagManager.initialize(tagManagerArgs);
  }, []);

  return <></>;
};

export default GoogleTagManager;

続いて、スクリプトをインポートしているファイルを編集します。この際、今回は CdpPageView を利用しないのでコメントアウトをして、Google Tag Manager のみにします。

// import CdpPageView from 'components/CdpPageView';
import GoogleTagManager from 'components/GoogleTagManager';

const Scripts = (): JSX.Element => {
  return (
    <>
      <GoogleTagManager />
    </>
  );
};

export default Scripts;

上記の GTM_ID などの値は環境で利用できるようにするため、以下のように next.config.js ファイルに追加で記述をします。

const nextConfig = {
  env: {
    PUBLIC_URL: publicUrl,
    GTM_ID: process.env.GTM_ID,
    GTM_AUTH: process.env.GTM_AUTH,
    GTM_ENVIRONMENT: process.env.GTM_ENVIRONMENT,
  },
}

最後に、GTM_ID の値を .env ファイルに記載します。

GTM_ID=
GTM_AUTH=
GTM_ENVIRONMENT=

これで準備が完了となりました。

Google Tag Manager から値を取得する

利用をする Google Tag Manager を立ち上げて、必要なタグを取得します。今回は非本番環境と本番環境の２つのタグを設定していきます。まず、タグマネージャーの環境を開きます。

クリックをすると、以下のようなダイアログが開きます。

この URL から以下の値を取得できます。

Vercel のプロジェクトに値を設定する

上記で取得した値を、Vercel の環境変数として追加をします。それぞれ上記の表にある値を利用してそのまま設定をしてください。

上記の設定をしたあと、development のブランチを展開して改めて Vercel にて build を実行、完了後にアクセスをするとタグが追加されていることを確認できました。

確認をする

Google Tag Manager の管理画面にあるプレビューのボタンをクリックします。

すると以下の画面のように、タグアシスタントの画面が表示されます。このダイアログに、すでにタグを設定した Web サイトを設定して Connect のボタンをクリックします。

しばらくすると別のウィンドウが立ち上がり、タグがインストールされていると右下の画面にダイアログが表示さます。

まとめ

無事、Google Tag Manager をサイトに実装することができました。あとは Google Analytics の設定や、Moosend の JavaScript など、必要に応じてタグマネージャーを利用してタグを配布することができるようになります。タグマネージャーの設定などは色々なブログなどで紹介されていると思いますので、ぜひ他のブログとかを見ながら参考にしていただければと思います。