2013年01月29日

【文系向け】Googleタグマネージャー導入マニュアル

 サイトを運営していますと多くのタグを一つのサイト内に埋め込む事が増えてくると思います。そんなタグを一元管理するツールがGoogleタグマネージャーです。現在は日本語化されていますので、言葉が分からなくて困る事はほとんどないでしょう。


タグ管理ツールに苦手意識を持っていませんか?


 この見出し、実はそれまでの自分に言っています。正直、文系ばりばりの私が触るのは当分先だと思っていましたが、とある週末に時間があったので私のサイトのいくつかへの導入を試みてみました。結果から言えば、全ページ共通のタグであるサイトについてはすぐに導入できます。通常はそのパターンが多いと思いますので、おそらく多くの方が今回の記事を読むと導入が出来るのではと思います。私の悩んだ部分も含めてここで紹介したいと思います。なお、難易度の高い設定につきましては今回は紹介しません。


*タグマネージャーの最初の練習はどうでも良いサイトがあればそれで試す事を強くお勧め致します。


 さて、手順の前に私がこれを入れてみて感じたメリットを書いていきます。

1.Googleタグマネージャーを利用すればリニューアル時のタグ導入は半端なく楽です。

2.複数のタグを入れる場合でも全ページ共通なら10分以内に設定が可能。

3.全ページ共通タグなので迷わないで済む。

4.タグを入れ間違えてもすぐに一つ前の問題のない状態に戻せます。

5.条件によってページ単位でタグを入れるページを指定できます。



Googleタグマネージャーの導入〜アカウント・コンテナ作成


 ここからはタグマネージャーのアカウント開設から説明します。通常はGoogleアカウントがあると思いますので、そのアカウントで開設するのが普通だと思います。


1.Googleタグマネージャーにアクセス(ここだけ英語なので一瞬ひるみますが気にしないで下さい。赤枠内からサインアップ)。⇒(2/15時点では日本語になっていました)

Googleタグマネージャー


2.Googleアカウントのパスワードを入れてログイン(画像省きます)

3.アカウントの作成に入りますが、ここで概念を覚えておきましょう。おそらくこのブログを読んでいる方でGoogle Analyticsを知らない方はいないと思いますので、それとの比較で書くと分かりやすいと思います。


・アカウント・・・Google Analyticsとほぼ同じ

・コンテナ・・・Google Analyticsのプロファイルとほぼ同じ


 というわけでいかにもアカウントを作るような流れに入ったら以下の設定となります(迷わないところは書きませんw)

アカウント作成


 アカウント作成時には一つ目のコンテナも設定する事になります。アカウントは通常は一つで問題ありませんが、他の会社のものを作る場合には新規アカウントとして作ると良いでしょう(というか、分けないと後で苦労します)。今回、私は一つのアカウントで自分の実験サイトも混ぜようかと思ったのですが、よく考えますと、クライアントに説明する時に実験サイトを見られたくないためアカウントを二つ作りました。名前を出しているサイトをまとめたものと実験サイトをまとめたもので分けています。


 このアカウント作成で注意する点は特にはありませんが(日本語も使えます)、タイムゾーンを日本に変えるのを忘れない事と(日本以外はもちろんその国を選択)、ドメインを追加で一つ目のコンテナに使うドメインを入れる事です。オプションですが、入力しておく方が絶対に便利です(試し済み)。


 画像では「Google や他の人と匿名でデータを共有する」のチェックは入っていますが、これは任意です。私は入れています。


 そして、「アカウントを作成する」をクリックすると利用規約が「英語」で出てきますので、「同意する」をクリックして下さい(自己責任でw)。


コードの発行


 アカウントの作成が完了すると、いきなりコードが発行されます。これが最初に設定したコンテナ(プロファイル)用のコードになります。今入っているタグ(今回は例としてGoogle Analyticsで説明しますが管理するタグが複数であっても、サイトのソースに入れるのはこのコード一つだけで済みます)と差し替えるものです。


タグ発行



 なお、ぼかしている部分がコンテナのIDとなりますが、このIDはGoogle Analyticsのコードのようなものではなく、同じアカウント内のものでもルールのないものとなります(Google Analyticsの場合はUA-に続く数値がアカウントが同じ場合には同じになりますが、そういう事はありません)。


1.このコードを対象サイトの全ページの最初の<body>の開始タグの直後にコピペします。この時点ではこのコンテナには何も設定していないため計測はまだ出来ません。


2.Google Analyticsのコードをここではサンプルとして使います。赤枠内の「Google アナリティクス」をクリックして下さい。Google Analyticsをはじめとして一部のタグは簡単に設定が出来るようにフォーマットが用意されています。Google Analyticsでは以下のような画面が入力項目として出てきます。まずは画面上部から説明します。

Google Analyticsのタグ設定画面


 上図にあるタグ名は任意ですが私は短く「GA」としました。多くのタグを1サイトに入れる場合に短い方が使い勝手が良いと感じたからです。とはいえ、これは自分の好きなタグ名を付けて下さい。「タグの種類」は最初から選択されています。


 「ウェブプロパティID」は「UA」から始まるものです。これをGoogle Analyticsで調べて(サイトに入れているならそのコード内にあります)入力して下さい。なお、Google Analyticsを使ってない方はここで既に分からないと思います。その場合にはGoogle Analyticsを理解してからこの記事を読んでください。


 「トラッキングタイプ」は通常は「ページビュー」になると思います。この他に「イベント」と「トランザクション」がありますがここでは紹介しません(自分で勉強してください)。


 次に画面下部です。

ルールの追加



 絶対に忘れてはいけないのがこのルールの追加です。このルールがなければこのツールはうまく動きません。というわけで「+タグを配信するルールを追加」をクリックします。

ルールの追加2



 表示される画面で「すべてのページ」にチェックを入れて「保存」をします。この項目は最初から用意されていますのでとても簡単です。つまり、ここまでの設定で「Google Analyticsのコードを全ページに入れる」というルールを作った事になります。


 なお、一部のページだけに設定したいタグがある場合には「すべてのページ」ではなく「新しいルールを作成」をクリックしてルールを自分で作ります。

新しいルール



 例が画面上にありますのでこれに従って作成して下さい。ルール設定が終わったら「保存」です。

詳細設定



 ルールの設定がされているのを確認したら一番下の「保存」を押すとタグの完成です。詳細設定を上図では開いていますが、チェックはなしで良いでしょう。


バージョンの作成と公開


 おそらくここまでは悩まないはずです(Google Analyticsコードを入れるだけなら)。「バージョン」で悩むと思います。


 このツールは常に元に戻す事が出来るようにするためバージョンという設定情報の保存をする機能があります。この後、「バージョンの作成」と「公開」という作業をしなくてはいけません。


 で、問題なのは先ほど作成したものはまだバージョンとして作成されてないという事なのです。私はこれに気付くのに時間がかかりました。

バージョン1



 先ほどの保存の後、左にある「バージョン」メニューをクリックすると上図のように「サマリー」と「1」というのがあると思います。現在、バージョンとしては「1」というものが一つあるだけです。


 しかし、右の赤枠内を見ると「タグがありません」と書いているのが分かると思います。先ほど「GA」というタグを私は作ったはずですがバージョンとしてはまだ作成されてないのです。


 そのため、ここで気付かずに画面の上の方にある「公開」というものを押してもデータが取得できません。GAのタグが設定されたバージョンが作成されてないからです。


 ここで私が最初に書いた事を思い出してください。「いつでも前に戻れる仕組み」なのです。つまり何もタグを設定していないバージョンも当然ながら用意されるという事です。


 では、どうすれば良いかと申しますと、左メニューから「サマリー」を選択します。このサマリーは現時点で作られた全ての情報が入ったバージョンを作る事が出来るものです。つまり、作成したタグ「GA」の入ったバージョンを作るためにサマリーを表示します。

バージョン作成



 「サマリー」を選択した上で右上の「バージョンを作成」をクリックします。

公開


 バージョン作成後に左メニューに「2」というものが出来ます。そこを選択すると上図のように「1個のタグ」とタグが設定されているのが分かります。下の方を見ると、そのタグが「GA」という作った物である事がわかるでしょう。そして、ルールも「すべてのページ」になっていると思います。


 なお、このツールの本筋を考えるならば、1種類のタグを作ったらバージョンを作成し、その後、別のタグを追加したらそこでもバージョンを作成するという方が良いかもしれません。それぞれのバージョンに戻れるという利点があるからです。


 これで事前準備は全て完了です。最後に画面右上の「公開」を押すのを忘れないようにしましょう。


 この公開は自分が使いたいバージョンを選択した上で押さなくてはいけません。過去のバージョンで公開したい場合には、該当のバージョン番号(あるいは自分がつけた任意のバージョン名)をクリックして公開しなおせばすぐに変更されます。


 なお、「コンテナのバージョン」が「2」だと分かりにくいため「コンテナのバージョン名」という所の「編集」を押して分かりやすいものにしておく事をお勧めします。私は「GA」というものにしています。他のタグが入っている場合には、含まれているタグ名を全部含んだ名前を付けています。そうすれば分かりやすいかなと直感的に感じただけで皆さんは自由にどうぞ。


 下図は名称を変えた後のメニューです。これの方が「2」よりは分かりやすいのは間違いないですね。

バージョン名変更



 公開した後は、最初に作られた<body>開始タグの直後に入れなさいといわれたコンテナのコードが動作します。タグがきちんと読み込まれているかの確認方法はバージョンから「GA(元々は2というバージョン)」を選択した時に上部に出てくる「プレビュー」から「プレビューとデバッグ」を選択すると良いでしょう(ここで最初に設定したドメインが役立ちます。設定していれば下図のようにドメイン名が出てきますのでクリックするだけで確認できます)。

プレビューとデバッグ



プレビュー確認


 ここでURLをクリックすると・・・

プレビュー画面



 上図のように新規ウインドウで対象サイトが立ち上がり、そのページの下に設定したタグが動いているかどうかの確認が出来ます。


 ステータスが「配信:タグマネージャー読み込み」になっていればOKです。なお、複数のタグを一つのサイトに設定している場合にはここにその分だけ並びます(たまにうまく動作しない時があり、その際には下に何も出てきません。バグではないかなと・・・)。


 確認ができたらプレビューモードを終了して下さい(ブラウザを閉じれば終了させる方法は分かるはずです)。


タグの追加


 今回はGoogle Analyticsのタグだけを作りましたが、これ以外にもタグがサイトのソース内に入っている事はあると思います。


 上図のように「ドラフト コンテナ」メニューを選択すると上部に「新しいタグ」「新しいルール」というものが出てきますので(マクロなども出てきます)、「新しいタグ」を選択して追加したいものを設定します。

タグ追加



 「タグの種類」を希望のものにあわせて前述の方法で作成をして下さい。ここに用意されてないものであれば「カスタムHTMLタグ」というものを使う機会が多いと思います。というか、このカスタムHTMLは最強と言って良いほどです。おそらくタグが多い方はほとんどこれに頼る事になると思います。

カスタムHTML



 ある程度理解している方ならこれを見れば「ああ〜」と分かってくれるでしょう(長くなってきたので疲れてきたのは内緒ですw)。


 新しいタグを作ったらバージョンを作成して新しい状態で公開しなおしてください。


 なお、Google Analyticsだけで言えば、きちんと機能しているかは「リアルタイム解析」画面で数値が動きますので、すぐに確認できると思います。


 たぶん、読んでいるよりも作ってみる方が理解は圧倒的にはやいと思います(何回か失敗してアカウントを作り直すと尚更理解できます)。そして実際に使ってみるとその便利さが分かります。


 最後に、コンテナのコードをソースに入れたら、今回の例ではGoogle Analyticsのコードは不要ですのでソースから削除するのを忘れないようにして下さい。他のタグもこれで管理したらそれらも削除です。


 一つのコンテナタグで複数の設定したタグをまとめて代用できるというのはとても便利だと言えます。


 最初はうまく行くか怖いかもしれませんが頑張ってください(完全自己責任で!)。この記事だけで分からないこともあると思いますので、他のブログの記事も是非お読み下さい。


 おっと、ここで大事なページへのリンクを。迷ったらこれを読んでください!


 ・Googleタグマネージャーヘルプページ


 ・Google タグマネージャがサポートしていないタグはありますか。(ヘルプ内)


長々と文系の方向けに書いてきましたが、私も導入して間がないので間違えていたらすみません(先に謝っておきます)。とりあえず使っているうちにどうやれば良いかは理解すると思います。



<2012.2.4追記>

 偶然気付いた点を追記しておきます。Google Analyticsのコードをサイトに入れているとウェブマスターツールでのサイト確認に利用できますが、今回のGoogleタグマネージャー内にGoogle Analyticsのタグを入れてしまうと、Google Analyticsでの確認が出来なくなるようです。


 そのため、別の確認手法を使うか、あるいはとりあえずソースに通常のGoogle Analyticsコードを入れてWMTで確認してからタグマネージャーに取り込む事になります。


 今後変わるかは分かりませんが、現時点ではこのような状況となる事を追記させて頂きました。


<2012.6.17追記>

 タグマネージャー利用サイトもウェブマスターツールでサイトの確認が出来るようになったようです。


 参考:Google タグマネージャを使用してウェブマスター ツールでサイトを確認する


 いや〜、良かったです!



揺さBrain!マニアック



◆コンサルタントのご相談、その他のご依頼はSEMアドバイザーまでご相談下さい。売上げアップのアイデアだしまで幅広くサポートします。

「学生募集の宝箱」では、教育関係特化のブログ記事を執筆中!

◆公式facebookページのSEMアドバイザーの揺さBrain!マニアックでは、役立つ情報を発信中!
posted by SEMアドバイザー at 09:00 | アクセス解析






最近の記事