こんにちは、後藤です。先日、Googleタグマネージャを使ってイベントトラッキングを測定できるように設定したんですが、管理画面がだいぶ変わっていて少し戸惑ってしまったので、今回は、その時の設定手順とアナリティクスの目標設定まで、忘備録として記事に書き留めたいと思います。
※思ったより長くなってしまったので、今回はアナリティクスの設定までとなっています。
では早速、Google タグマネージャの簡単な説明から。
はじめに、Google タグマネージャとは
「Google タグマネージャ」とは、Googleアナリティクスようなアクセス解析のタグや、AdWordsなどの広告で使われるタグを1つのタグで一元管理するツールです。
ここで言うタグはHTMLタグのことではなく、「コンバージョンタグ」や「トラッキングコード」のような解析タグのことを指します。
また、あらかじめページにタグマネージャのコードさえ埋め込んでおけば、新しくタグを追加するときもHTMLに追記することなく、管理画面からタグの追加や削除といった操作ができるようになります。
Google タグマネージャを導入してみよう
タグをまとめて管理するためには、まずタグマネージャのコードをサイト内に設置しなくてはなりません。すでに何らかのタグがサイト内に設置されている場合は、一旦そのタグを外したあとタグマネージャで設定し直す必要があるので注意してください。では、実際にGoogleタグマネージャを使って、どうやって導入・設定するのか下記で説明していきます。
タグマネージャーの事前準備
Googleタグマネージャを利用するにあたってアカウントを開設する必要があります。
下記のURLにアクセスしたのち「今すぐ登録」を押してください。
※GoogleタグマネージャはGoogleアカウントが必要なので、
アカウントをお持ちじゃない方は、事前にGoogleアカウントを作成しておいてください。
1.アカウントを作成する
登録の次はアカウントを作成します。
アカウント名 – 企業名(任意)
国 – 日本
Google や他の人と匿名でデータを共有 – (任意)
アカウント名を決める時にこれといった決まりやルールはないですが、アカウントが増えても散らからないように管理しやすい名前にした方がいいと思います。私の場合、企業名に設定することが多いです。
「Google や他の人と匿名でデータを共有」にチェック入れると、ベンチマークサービスを利用できるようになり、匿名でデータを共有する代わりに他サイトのデータと比較できるようになります。
2.コンテナの設定する
アカウントの次は、コンテナの設定です。
コンテナ名 – サイトURL(任意)
コンテナの使用場所 – ウェブ
タグマネージャーのコンテナとは管理する上の単位みたいなものと思ってください。
①で作成したアカウント内で新しくサイトが増えて別で管理したい場合はコンテナを追加して作成することなります。「1サイト = 1コンテナ」と思って大丈夫です。
私の場合は、ドメインで管理していますが、アカウント名と同じくコンテナ名もとくに規則はないので、ご自身で管理しやすい名前を入力してください。
コンテナの使用場所は、今回はサイトになるので「ウェブ」とします。
3.タグマネージャをインストール
利用規約に同意すると画像のようにポップアップでコード(スニペット)が表示されます。
タグマネージャでは、このコードをサイトに設置することで一元管理が出来るようになります。
画像にもあるように、headタグの中とbodyタグ開始直後の2箇所に設置出来たら準備完了です。
4.タグマネージャでタグを作成する
4-1.タグの名前を設定する
「ワークスペース」のタブから「新しいタグを追加」をクリックしてください。
すると右からパネルがスライドされて画像のような画面が表示されると思います。
「タグの設定」と「トリガー」をそれぞれ設定することでタグマネージャの導入は完了です。
まずは、あとで見たときに何のタグかわかるように、「名前のないタグ」と表記されている欄にわかりやすい名前を入力しましょう。
4-2.タグを選択して設定する
名前の入力が出来たら、アナリティクスのタグを設定します。
タグの設定をクリックすると、タグタイプを選択するメニューが表示されるので、
メニューから「Google アナリティクス – ユニバーサル アナリティクス」を選択します。
「トラッキングタイプ」はページビューを選択して、「Google アナリティクス設定」の項目には新しい変数を作成しましょう。プルダウンで表示されている「新しい変数…」を選択すると下の画像ように表示されます。
4-3.変数の設定画面で変数を作成
「新しい変数…」を選択すると変数を設定する画面が表示されます。
トラッキングIDには、対象のGoogleアナリティクスの画面からトラッキングIDをコピーして入力してください。入力が出来たらわかりやすい変数名を入れておきましょう。
※Googleアナリティクスで設定が済んでいない方は、事前に取得しておいてください。
4-4.トリガーを設定する
タグの設定が終わったら次はトリガーの設定です。トリガーでは、設定したタグを実行するタイミングを条件で設定します。 今回はすべてのページが表示されたタイミングで実行して欲しいので「All page」を選択します。
以上でGoogleアナリティクスのタグの設定は終わりです。
作成したタグの動作テストをする
動作テストをするには一度「ワークスペース」に戻り、画面右上の「プレビュー」をクリックしてください。すると、オレンジ色の背景で「プレビュー中のワークスペース」と出るので、表示が確認できたらテスト実行中となります。
では、そのままサイトを表示してみましょう。ブラウザの画面下にタグマネージャのテスト画面が表示されていると思います。「Tags Fired On This Page」と表記されている箇所は、実行されたタグを表します。つまり、今回作成した「Google アナリティクス」のタグがそこに表示されていたら正常に動作していることになります。
作成したタグを公開する
正常に動作していることが確認出来たら、タグマネージャの管理に戻って画面右上の「公開」ボタンをクリックします。公開したタグが何かわかるように、「バージョン名」「バージョンの説明」に入力出来たら公開してください。公開後は、Googleアナリティクスの画面の「Googleアナリティクス > リアルタイム」からアクセスがカウントされているかチェックを行いましょう。
さいごに
当初は、タグマネージャでイベントトラッキングを設定して、アナリティクスの目標設定まで書こうと思っていたんですが、思いのほか長くなってしまったので、今回はGoogleタグマネージャーのGoogleアナリティクスの設定までにとどめておきます。次回は、イベントトラッキングの設定方法をご紹介したいと思います。
後藤紳也
この記事を書いた人元美容師でありながら、デザイン業界への転身を果たすため、独学でWebを猛勉強。谷川の最初の相棒として、AND SPACEの草創期から会社を支え続けてきた。基本的に心穏やかな食いしん坊キャラで、「ゴッちゃん」もしくは「ゴトさん」の呼び名で親しまれる、うちのWe部の番人。無駄のない、丁寧で美しいソースコードに誰もが一目を置く。その安定感とクオリティは、社内外からの信頼の厚さにもつながっており、巷では彼を「後藤大明神」と呼ぶとか呼ばないとか…。ご鎮座されるその席に、ニ礼二拍手一礼。