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

「【徹底解説】ホームページにタグを設置する2つの方法」のアイキャッチ画像

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

タグとは、Webサービスと連携するための短いプログラムのことです。

タグを入れることで、それまで得られなかったさまざまなデータを取得し、可視化できます。

 

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

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

 

結論から言うと、Googleタグマネージャーなどタグ管理ツールを最初に設定することをおすすめします。

タグ管理ツールを入れると、HTMLコードを触ることなしに、自由にタグを追加、変更、削除できるのです。

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

 

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

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

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

メリット

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

デメリット

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

 

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

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

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

タグ管理ツールを使う

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

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

メリット

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

デメリット

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

 

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

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

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

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

今回の前提条件

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

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

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

  1. STEP

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

    Googleタグマネージャートップ

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

    「無料で利用する」をクリックして、次のページに進みます。

  2. STEP

    アカウント作成ボタンをクリック

    アカウント作成ボタンをクリック

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

  3. STEP

    アカウントの設定をする

    アカウント設定

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

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

    国は「日本」を選んでください。

  4. STEP

    コンテナ設定をする

    コンテナ設定

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

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

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

  5. STEP

    利用規約を確認

    タグマネージャーの利用規約

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

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

    メモ

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

  6. STEP

    タグを確認する

    タグマネージャーのコード

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

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

    メモ

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

  7. STEP

    Webサイトにコードを貼り付ける

     

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

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

     

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

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

     

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

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

    GTMタグの設置方法

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

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

     

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

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

  1. STEP

    タグを新規に作成する

    新規でタグを作成

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

  2. STEP

    タグの名前を付ける

    タグマネージャーでタグを作成

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

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

  3. STEP

    タグ設定を選択する

    Googleサービスのタグ

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

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

    カスタムHTML

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

  4. STEP

    トリガー設定を選択する

    タグマネージャーの設定方法

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

    Googleアナリティクスなどのタグは、ページの読み込みの際に読み込んでほしいので「All Pages」を選びます。

  5. STEP

    プレビューして動作確認

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

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

     

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

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

    プレビューモード

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

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

     

    タグマネージャーのプレビューモード

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

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

     

  6. STEP

    公開する

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

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

    タグの公開

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

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

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

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

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

  1. STEP

    タグの設定ガイドを読む

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

    たいてい<head>タグ内で設定するものが多いはずです。

  2. STEP

    タグを貼りたいページのコードに設置

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

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

    注意事項

    タグを貼り付ける場合は、先にバックアップを取っておきましょう。

    あとでエラーが起きた時すぐに戻せるので安心です。

  3. STEP

    動作確認する

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

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

まとめ

この記事では、Webサイトにタグを導入する方法について紹介しました。

タグを導入する方法としては、大きく2つの方法があります。

  1. 直接Webサイトにタグを貼り付ける
  2. タグ管理ツールを使う

将来的なメンテナンスを考えると、②のタグ管理ツールを使うほうがおすすめです。

Googleタグマネージャーなど無料で便利なツールがあるので、ぜひ活用してみてくださいね。