Webサイトの構築を完了した後は、サイトの最適化を図るステップに入ります。
そのときに使うツールが、Google Analytics、Google Tag Manager、Google Search Consoleといったものになります。
もちろん、AdobeのSiteCatalystのようなツールは存在しますが、SiteCatalystはエンタープライズ向けのツールであるため割愛します。
Google Tag Manager (GTM) を使うと、ウェブサイトやアプリケーションにタグ(トラッキングコードやスニペット)を簡単に管理できます。以下は、基本的な設定手順です。
記事は2024/5/14時点で作成しております。
設定手順
当サイト(jwconsulting.jp)を例としてご紹介します。
ステップ 1: Google Tag Manager アカウントの作成
1.まずはアクセスを
Google Tag Manager にアクセスし、Google アカウントでログインします。
2.アカウントを作成(新規の場合)
「アカウントを作成」をクリックし、アカウント名(通常は会社名)を入力します。

この時、「Googleや他の人と匿名でデータを共有」項目に関してはチェックしてもなくても大丈夫です。
3.コンテナ名(通常はウェブサイトのURL)を作成
次に、コンテナ名(通常はウェブサイトのURL)を入力し、「Web」を選択します。

4.「作成」をクリックし、利用規約に同意します。

5.「Google タグ マネージャー利用規約」に同意
英語、フランス語、スペイン語、ポルトガル語、ロシア語しかないので、ここは英語にて。
また、一番下の、「GDPR」に関しては、同意してください。

右上の「はい」をクリックで同意となります。
ステップ 2: GTM コンテナコードの設置
1.2つのコードスニペット
コンテナが作成されたら、2つのコードスニペットが表示されます。これらはウェブサイトに追加する必要があります。

2.最初のスニペットは
最初のスニペットを <head> タグ内に貼り付けます。
Googleも結構親切で、「このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。」の様にコメントしています。

シンプルで進めたいため、ここはSWELLのデフォルト機能を使うことにします。
遷移:管理画面→外観→カスタマイズ→高度な設定
で下記の上部(</head>直前)部分に、貼り付けます。

3.次のスニペットは
二つ目のスニペットを <body> タグの直後に貼り付けます。

ここも、一つ目同様に、
遷移:管理画面→外観→カスタマイズ→高度な設定
で下記の下部(<body>直後)部分に、貼り付けます。

4.WordPress側で公開する

5.テストを行う
Google Tag Manager側でテストを行います。
下記の通り、httpsから始まるURLを入力して、クリックします。

下記の通りに、緑のチェックマークがあれば、テスト成功となります。

ステップ 3: タグの設定
ここから先は、GTMダッシュボードでの作業となります。
1.「新しいタグ」をクリック
GTM ダッシュボードに戻り、「新しいタグ」をクリックします。

2.「タグの設定」を行う
タグの設定画面が表示されます。「タグの設定」をクリックし、追加したいタグを選択します。

ここでは、Google Analytics の設定を行います。

3.「Google タグ」を選択
初めて設定するときには、まずこちらを。

4.「タグID」を入力
ここでは、Google Analyticsで表示されている、測定ID = 「G-」から始まるIDを入力します。

5.「トラッキングタイプ」を選択
「トラッキングタイプ」に関しては、一度「All Pages」を選択してください。

6.「保存」
「保存」をクリックします。
ステップ 4: 変更の公開
1.「公開」ボタンをクリック
すべての設定が完了したら、右上の「公開」ボタンをクリックします。

2.変更の名前と説明を入力
初回であるため
- バージョン名: 20240514
- バージョンの説明: 初回設定
と記入。

3.「公開」する
先ほどの画面で、「公開」ボタンをクリックしますと、公開へ進みます。

追加のヒント
- タグの種類: GTM では、Google 広告、Facebook ピクセル、LinkedIn インサイトタグなど、様々なタグを設定できます。
- カスタム HTML タグ: 独自のタグを使用する場合、カスタム HTML タグを設定できます。
- 変数の使用: タグの動作をカスタマイズするために、変数を使用してトリガー条件を設定できます。
以上が、Google Tag Manager の基本的な設定手順です。更に詳細な設定やカスタマイズが必要な場合は、具体的なタグや目的に応じて設定を行ってください。
