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

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

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

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

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

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

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

ホームページにタグを貼り付ける2つの方法
1. 直接サイトにタグを設置する
2. タグ管理ツールを使う
Googleタグマネージャーを使ってタグを設置する方法
1. Googleタグマネージャーを設置する
2. Googleタグマネージャーでタグを導入する
直接サイトにタグを設置する方法
まとめ

ホームページにタグを貼り付ける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などを使ってアップロードしましょう。

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