【徹底解説】ホームページにタグを設置する2つの方法

Webサイトを分析したり、広告の効果検証をするときに必要となるのが「タグ」

タグとは、Webサービスと連携するための短いプログラムのことです。
タグを入れることで、それまで得られなかったさまざまなデータを取得し、可視化できます。

とはいえ、「どうやってタグを入れてよいか分からないよ」という方もいるかもしれません。

そこで、Webサイトにタグを導入する方法を2つ紹介していきます。

結論から言うと、Googleタグマネージャーなどタグ管理ツールを最初に設定することをおすすめします。
タグ管理ツールを入れると、HTMLコードを触ることなしに、自由にタグを追加、変更、削除できるのです。

ぜひこの記事を参考に、タグを導入してみてくださいね。

GA4を連携させる方法はこちらの記事で詳しくご紹介しています。
GA4のコンバージョン設定をスクショ付きで解説 | サンクスページ、ボタンクリック、ECサイト購入の計測

ホームページにタグを貼り付ける2つの方法

直接サイトにタグを設置する

一番シンプルな方法は、Webサイトのページを構成しているHTMLコードに直接タグを埋め込む方法です。

メリット

ページが特定さえできれば導入でき、分かりやすい
最初の設定などは特に不要

デメリット

タグが増えてくると、設置が面倒＆管理コストが増える
ちょっとした変更でも、システム担当者、制作会社などの手を借りる必要があるかも
元データを書き換えるため、間違えると最悪サイトが動かなくなる

直接ホームページにタグを貼り付けるのは直感的で分かりやすいです。

一方で直接コードを触るため、間違えて元のコードを変更してしまうと、最悪サイトが動かなくなる危険性があります。

また管理面でも、タグが増えるほど複雑になっていくため、管理コストも上昇していきます。

タグ管理ツールを使う

タグ管理ツールとは、1個コードをWebサイトに入れておくことで、簡単にタグを追加、削除できるツールです。

代表的なものとしては、Googleが無料で提供しているGoogleタグマネージャーなどがあります。

メリット

最初に1回設定さえすれば、コードを開かずにタグの追加、削除、変更ができる
クリック率、ページの読了率などさまざまな計測にも使える

デメリット

導入設定だけはどうしてもHTMLの知識が少し必要

タグ管理ツールはとても便利で、導入しておくことで、クリックを測定したり、ページの読了率を計測したりと、様々な用途で使えます。

迷ったら、タグ管理ツールを使うことをおすすめします。

Googleタグマネージャーを使ってタグを設置する方法

今回はGoogleアナリティクスのタグを設置する方法を例に、タグの設置方法を紹介していきます。

今回の前提条件

HTMLコードの読み方が多少分かる
サーバーにFTP接続でログインできる

もし「上の前提条件が分からない・・・！」なんて方は、会社のシステム担当者や制作会社さんなどにお願いしてください。

Googleタグマネージャーを設置する

STEP
Googleタグマネージャーのアカウントを作成

まずは「Googleタグマネージャー」のページを開いてください。

「無料で利用する」をクリックして、次のページに進みます。
STEP
アカウント作成ボタンをクリック

右上にある「アカウントを作成」ボタンをクリックします。
STEP
アカウントの設定をする

アカウント名には、好きな名前をつけてください。

社名などが分かりやすいでしょう。

国は「日本」を選んでください。
STEP
コンテナ設定をする

コンテナとは、タグを管理する入れ物のことです。

コンテナ名には、サイト名などを入れておくといいでしょう。

今回はWebサイトにタグを導入するので、ターゲットプラットフォームは「ウェブ」で大丈夫です。
STEP
利用規約を確認

Googleタグマネージャーの利用規約が出てきます。

問題なければ、右上にある「はい」を選んでください。

EU圏の顧客を対象にする場合、GDPRと呼ばれる個人情報保護規約に準拠する必要があります。もし該当する場合は、法務部などに確認をしてください。
STEP
タグを確認する

アカウントが無事作成できると、上記のようなコードが表示されます。

このコード2つをWebサイトに貼り付けます。

上の画面を消してしまったら、上のメニューにある「管理」→「コンテナ」→「Googleタグマネージャーをインストール」でも確認できます。
STEP
Webサイトにコードを貼り付ける

Webサイトを自社で管理しているなら、おそらくサーバーのログイン情報なども分かるはずです。

FTPと呼ばれるファイルをやり取りする方法を使って、Webサイトのコードを書き換えていきます。

今回はWordPressで「twenty twenty」のテーマを使ったサイトを例にして、コードを貼り付ける方法を紹介します。

導入ページは、「header.php」と呼ばれるファイルのコードを開きます。

Googleタグマネージャーを使うには、2つのコードを貼り付ける必要があります。

（A）,（B)それぞれのタグを以下の位置に貼り付けます。

（A)のタグは、<head>～</head>タグ内に貼り付けます。

（B)のタグは、<body>タグの直後に貼り付けるようにしましょう。

ここまで問題なくできれば、ファイルをアップロードして導入完了です。

Googleタグマネージャーでタグを導入する

STEP
タグを新規に作成する

まずはホーム画面にある「新しいタグを追加」をクリックします。
STEP
タグの名前を付ける

左上にある「名前のないタグ」は、自由に名前を変更できます。

「Googleアナリティクスタグ」など、後で分かりやすい名前をつけておくことをおすすめします。
STEP
タグ設定を選択する

タグの設定は、どういったタグを作成するかを決めます。

Googleサービス（Googleアナリティクス、Google広告のコンバージョントラッキング・リマーケティング）などは、すでにタグが用意されています。

他のサービスのタグを設定する場合は、「カスタムHTML」を利用し、タグとなるコードをHTMLの欄に貼り付けます。
STEP
トリガー設定を選択する

トリガーは、タグが作動するタイミング（イベント）を設定します。

Googleアナリティクスなどのタグは、ページの読み込みの際に読み込んでほしいので「All Pages」を選びます。
STEP
プレビューして動作確認

タグが設定できたら、右上にある「保存」をクリックします。

ただ保存しただけでは、下書き状態になっており、タグは作動しません。

タグを作動させるには「公開」する必要があります。

ただ間違った設定のまま公開してしまうリスクを回避するため、一度プレビューをしましょう。

ホーム画面で、右上にある「プレビュー」をクリックすると、プレビューモードになります。

この状態でタグを設置したサイトを訪れると、下半分にタグの状況が表示されます。

「Tags Fired」と書かれた欄に、先ほど設定したタグが表示されていれば、タグの設置は問題ありません。

もし出ていないなら、もう一度設定を確認してみてください。
STEP
公開する

プレビューモードでタグが正常に作動していれば、本番環境に公開しましょう。

ホーム画面で、「公開」をクリックします。

送信設定画面が出てきたら、「バージョン名」には追加（変更）した内容をメモしておくといいですね。

問題なければ、もう一度「公開」ボタンをクリックしてください。

数秒待つと、結果が反映されます。

直接サイトにタグを設置する方法

あまりおすすめはしませんが、直接サイトにタグを貼り付ける場合も記載しておきます。

STEP
タグの設定ガイドを読む

設置したいタグの設定ガイドを読んでみてください。

たいてい<head>タグ内で設定するものが多いはずです。
STEP
タグを貼りたいページのコードに設置

タグを貼りたいページのコードを開きます。

もし<head>内に貼る場合は、<head>～</head>のエリア内にタグをコピー・アンド・ペーストします。

タグを貼り付ける場合は、先にバックアップを取っておきましょう。
あとでエラーが起きた時すぐに戻せるので安心です。
STEP
動作確認する

タグが設置できたら、ファイルをFTPなどを使ってアップロードしましょう。

ページの動作に問題がなく、タグが正常に動いていれば問題ないです。