こんにちは！今回はGoogleタグマネージャのご紹介をします。Googleアナリティクスのトラッキングコードをソースに直接設置する場合は「意外と簡単だった！Googleアナリティクス導入時の設定手順」をご覧ください。
みなさんすいません！
まずは昔の自分に言っておきます！
アナリティクスの「トラッキングID」はGoogleタグマネージャの管理画面じゃなく、Googleアナリティクスの管理画面で取得するんだぞ！
失礼しました。それではGoogleタグマネージャのご紹介です。
タグマネージャとは？
タグマネージャとはサイトに設置するアクセス解析のタグ、コンバージョンタグなどの複数のタグを一元管理できるツールです。
最近ではいろいろなタグがリリースされており、どんどん追加や変更をしているうちに、どれがなんのタグだったかわからなくなった事はないですか？
1つのサイトにいくつもタグを設置して、更新があった時に時間やコストをかけていませんか？
タグマネージャをいれればソースもスッキリしますし、複数のタグの管理がとても楽になります。
タグマネージャには主に下記のようなものがあります。
- Googleタグマネージャ
- Yahoo!タグマネージャー
- Dynamic Tag Management
- TAGエビス
ズバリ違いは！・・・管理出来るタグの種類が違います！
Googleタグマネージャでしか管理できないタグ、Yahoo!タグマネージャーでしか管理できないタグがあると言う事です。
ですので、タグマネージャを設置する際はどんなタグを設置するのか？という目的からどのタグマネージャを使うか決めて下さい。
Googleは「タグマネージャ」でYahoo!は「タグマネージャー」なんですね・・・
今回はGoogleタグマネージャをご紹介しますので「タグマネージャ」と「ー」なしでいきます！
タグマネージャのメリット・デメリット
タグマネージャ設置のメリット
- 簡単にタグの管理ができる
- 担当者レベルでできることが増える
- ページの表示速度が速くなる
1.簡単にタグの管理ができる
タグマネージャの管理画面で使用したいタグを追加・編集するだけで設定完了！
FTPでファイルをダウンロードして、変更してアップロードなんて作業が必要なくなり、ブラウザでタグマネージャの管理画面にログインし作業を行うだけで完了します。
今まで全ページに設置していたタグもタグマネージャの管理画面で設定するだけで完了してしまいます。
あらかじめサイトにタグを設置しておいて、管理画面で設定した内容がそこに反映されるイメージなので、サイトを直接編集する必要がないのです。
2.担当者レベルでできることが増える
タグ設置などを外部に依頼している方も多いのではないでしょうか?
それが自社のWEB担当者でもできることが増えます。
費用をかけて外部に依頼して、確認して公開という時間も短縮できます。
3.ページの表示速度が速くなる
ソースの量が減るので単純にページの表示速度が早くなる事が期待できます！
ページの表示速度はSEOにも影響するので、簡単に管理できる上にSEO効果も期待できます。
タグマネージャ設置のデメリット
- 設置できないタグもある
- 移行が大変
1.設置できないタグもある
利用するタグマネージャによっても設置できるタグ、設置できないタグもありますが、タグマネージャ自体に対応していないタグもあります。
この場合は今まで同様にHTMLに直接設置するしかありません。
2.移行が大変
すでに多くのタグをサイトに設置している場合はタグマネージャでの管理に切り替えるのは結構大変な作業になります。
設置してあるタグの管理がしっかりされていればいいですが、追加や変更を繰り返していると、現在のタグがなんなのかさえわからない可能性もあります。
ページ数も多いサイトで1ページづつ作業する必要のあるサイトもあるでしょうし、現在のタグを削除して設定しなおすので一苦労です。
ですが、長い目でみた場合には後々管理が簡単になるので、機会をみて移行するのをお勧めします。
Googleタグマネージャの設定
ここから本番です！サイトのアクセス解析を行うために、Googleタグマネージャでアナリティクスタグの設定をしてみましょう！
- GoogleアナリティクスでトラッキングIDを取得する
- Googleタグマネージャでアカウントを作成する
- GoogleアナリティクスタグをGoogleタグマネージャに設定する
まず、Googleタグマネージャではなく、Googleアナリティクスで「トラッキングID」を取得しておきましょう。
ここでトラッキングIDを取得しておかないと私のように後で「トラッキングIDはどこ？」と迷子になってしまいます。
Googleアナリティクスの管理画面でトラッキングIDを取得
Googleアナリティクスの登録方法や、まだGoogleのアカウントを持っていない方は「意外と簡単だった！Googleアナリティクス導入時の設定手順」をご覧ください。
1.管理をクリックします。
2.新しいアカウントを作成をクリック
3.必要情報を入力し「トラッキングIDを取得」をクリック
4.黙って「同意する」をクリック
5.トラッキングID取得完了
トラッキングIDはあとから必要になるので、このページは開いたままにしておくか、トラッキングIDをどこかにメモしておきましょう。
Googleタグマネージャでアカウントを作成する
1.Googleタグマネージャのサイトで登録する
https://www.google.com/intl/ja/tagmanager/
2.アカウント作成
3.アカウント名
「アカウント名」は何でもいいのですが、例に社名とあるので、社名をつけておきます。
「Google や他の人と匿名でデータを共有」にチェックを入れると、自社サイトのデータと他サイト（匿名サイト）のデータと比較できるサービス（ベンチマーク サービス）が受けれるそうです。今回はチェックを入れません。
4.コンテナ作成
コンテナには設置するサイトのURLを記入すると分かりやすいです。
コンテナとはサイトに設置する箱をイメージして下さい。この箱にいろいろなタグを入れて行くイメージです。
1つの箱に複数のタグを入れれるので、通常はコンテナは1つで大丈夫です。
今回はウェブサイトに設置するので「ウェブ」を選択します。
5.規約確認
黙って・・・いや、ちゃんと中身を確認して同意してください。
6.Googleタグマネージャのコード
これでサイトに設置するためのコードが取得できました。
サイトに設置するコードは2つです。両方とも設置が必要です。
一つ目は「このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。」とあるようにサイトの<head>タグの下に設置してください。「なるべく」という表現があるのでできるだけ上の方がいいのかと思います。
特に理由がない場合は<head>のすぐ下に設置しています。
もうひとつは「開始タグ <body> の直後にこのコードを次のように貼り付けてください。」となっているので<body>タグの直後に入れます。
コピーをとってどこかにちゃんと保存しておきましょう。
コピーせずにうっかりけしてしまった！人もご安心！
下の画像の赤枠の青い文字をクリックすると確認できます！
GoogleアナリティクスタグをGoogleタグマネージャに設定する
1.Googleタグマネージャのコードをサイトに設置
先ほど発行したGoogleタグマネージャのコードをサイトに設置しておきます。
2.タグ作成
左メニューの「タグ」をクリックし、画面が切り替わったら「新規」をクリックします。
3.タグを選択
「新規」をクリックすると下記のような画面になるので「タグの設定」のところをクリックします。
設置出来るタグが右側にでてきます。
今回はGoogleアナリティクスタグを設置するので一番上の「ユニバーサル アナリティクス」を選択します。
「ユニバーサル アナリティクス」と「従来のGoogleアナリティクス」がありますが、「従来のGoogleアナリティクス」は古いバージョンなので「ユニバーサル アナリティクス」を選択するようにしましょう。
4.トラッキングIDの入力
ここでGoogleアナリティクスで取得したトラッキングIDを入力します。
トラッキングタイプは「ページビュー」のままで、その下の詳細設定もそのままにしておきます。
初めての時はここでつまづきました。Googleタグマネージャの管理画面でトラッキングIDを探しまくったのですがどこにも見当たらず・・・冷静になって考えて「トラッキングIDはGoogleアナリティクスで発行するんだ！」と気付きました。
トラッキングIDはGoogleタグマネージャではなくGoogleアナリティクスの方で発行してください。
5.トリガーの設定
トラッキングIDを入力したら「トリガー」のところをクリックします。アナリティクスで全てのページの解析を行うので「All Pages」を選択します。
6.タグを保存
トリガーの設定をすると下記の画像の画面になるので、赤枠のところでタグに名前をつけます。ここはわかりやすい名前でよいと思いますので、今回は「アナリティクス」と名付けました。
名前をつけたら右上の「保存」を押して設定を保存します。
7.プレビューとデバック
さきほど保存しましたが、保存しただけではタグはサイトに反映されません。右上に赤く「公開」となっていてあたかも既に公開されている感じを受けますが、じつはまだ動いていません。
公開する前にタグがちゃんと動作しているか確認する事が出来ます。公開する前に必ず動作確認をしましょう。
動作確認は右上の公開を押すとメニューがでてきますので「プレビューとデバック」をクリックします。
「プレビューとデバック」をクリックすると下記のような画面になります。これで動作確認ができる準備ができました。
そのまま同じブラウザの別ウインドウか別のタブでGoogleタグマネージャを設置したサイトを開きます。今回はi-Style（https://www.i-style.vc/）のサイトに設置するので、同じブラウザでhttps://www.i-style.vc/にアクセスします。
すると下記のような表示になります。ブラウザの上の方にGoogleタグマネージャを設置したサイトが表示され、下の方に現在動いているタグが表示されます。先ほど作成した「アナリティクス」というタグが表示されているので正常に動作しています。
8.タグの公開
「プレビューとデバック」で正常にタグが動作している事が確認できたので、Googleタグマネージャの管理画面に戻り、「プレビュー モードを終了」を押して終了します。「終了しますか？」というような確認画面がでますが終了してください。
「プレビュー モードを終了」したら、先ほどの画面右上にある「公開」をおしてメニューを表示し「今すぐ公開」を押します。
下のような画面が出てくるので赤枠の部分に今回設定した内容がわかるように名前と説明を記入します。設定全体の名前なのでバージョン名と日付、設定したタグの説明などをいれてもよいと思います。
あまり深く考えずに記入して大丈夫です。
最後に右上の「公開」を押して設定完了です！公開後はGoogleアナリティクスの「リアルタイム」計測で実際に動作しているか確認してもよいと思います。
まとめ
これからもいろいろなタグがリリースされると思うので、作業の効率化を図る上でも、簡単にタグを管理するのにもGoogleタグマネージャは便利だと思います。まずはアナリティクスのタグ設置から始めるとわかりやすいと思うのでおすすめです。
一番最初に設定した時に、自分はトラッキングIDを入力するところではまりました・・・
Googleタグマネージャの管理画面を探しまくって探しまくって「トラッキングIDがない！」と一人で騒いでいました。
あくまでもトラッキングIDはGoogleアナリティクスで発行し、Googleタグマネージャに設定するということです。
みなさんもGoogleタグマネージャの設置を検討してみて下さい。
コメント