スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

いまさらですが、Googleタグマネージャーを導入してみたいと思います。

これまではページ解析という意味では、アクセス数ぐらいしかみていませんでした。
しかし、ある程度見ていただける方、利用していただける方が増えてきたのもあり、その方々のためにも、少しでもよいコンテンツにしていけたらと思い、もう一歩踏み込んだアクセス解析をしてみようと考えました。

それこそ一般的なGoogle Analyticsのトラッキングコードを埋め込む運用だけでしたが、Googleタグマネージャーを活用すれば、イベントトラッキングの運用や、その他クッキーなどを利用した細かい解析もできるということで、とりあえずここでは導入だけしてみようと思います。

Googleタグマネージャーアカウントを有効にする

ここでは、既にGoogleアカウントを持っていることを前提とします。
ブラウザでGoogleにログインしている状態で、以下のページにアクセスします。
Google Tag Manager

初期状態だとアカウント作成画面が表示されます。
「アカウント名」は会社名、個人名や団体名、「コンテナの設定」はサイトドメインを入力して作成します。

サイトにタグマネージャーを導入する

先ほど作成したコンテナを選択した状態で、メニューの「管理」⇒「Google タグマネージャをインストール」を選択します。

そこで生成されるコード「コンテナスニペット」をコピーして、対象のサイトの全てのページのbodyタグ直後にペーストします。

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=XXXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','XXXXXXXX');</script>
<!-- End Google Tag Manager -->

実際のコードは「XXXXXXXX」部分がコンテナIDになっています。

導入は以上です。
これ以降、ページソースをカスタマイズする必要はありません。後は、Googleタグマネージャーの管理画面から操作します。

Google Analyticsタグを追加する

先ほどの追加したコンテナは空っぽの状態で何も機能しません。
コンテナにタグを追加することで、さまざまな機能を利用することができます。
ここではまず「Google Analyticsタグ」を追加してみます。

管理画面より「新しいタグを追加」を選択し、「タグの設定」から「ユニバーサル アナリティクス Google アナリティクス」を選択します。
トラッキングIDにはこれまでに使用していたGoogle AnalyticsのトラッキングID(例:UA-XXXXXXX-X)を設定します。ない場合は新規で作成して用意します。
トラッキングタイプには「ページビュー」を選択します。

次に、タグのトリガーを選択して「All Pages」を選択します。
これはタグを埋めたサイト内でのタグを動作させる条件ですが、全ページで有効とするためです。

これらを設定したら「保存」をクリックします。
保存の際にはタグ名を決めなければなりませんが「全体ページビュータグ」などでよいでしょう。

設定に問題がなければ、画面右上の「プレビュー」ボタンをクリックし、プレビュー結果が問題なければ、同じく画面右上の「公開」ボタンをクリックします。

ここで、ソースに既存のGoogleアナリティクスのトラッキングコードが埋め込まれている場合、重複するので削除したほうがよいでしょう。

以上で、Googleタグマネージャーを利用して、Google Analyticsにアクセス解析を有効にしてみました。
今後、いろいろといじってみて、解析でどのような利点があるのか、他にどのようなタグが有効なのかなど紹介できればと思います。

このエントリーをはてなブックマークに追加

Monthly Archives

Search