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

GoogleTagManager
こんにちは、ECプロデュース部の岡本です。

サイトを運用しているとき、こんなトラブルが起こったことはありませんか?

「新しくページを追加したけども、Analyticsで測定されていない!」

「サイトをリニューアルさせたけども、RSSを読み込まなくなった!」

「解析タグをカスタマイズしたいけども、書き換えるページが多すぎる!」

多くの場合、外部のAPIを自分で管理できなくなるほど実装させてしまっていることが原因です。

アクセス解析ツールにリマーケティング、FacebookにPocketウィジェット・・

便利なAPIは増えましたが、専用のコードをいくつもページに書いていると後で「どれがどこにあるかがわからなくなる」というようなこともありがちなのではないかともいます。

そんな「API・タグの管理」を専用の管理画面で行えて、サイトにはたった1つのコードだけですむ便利なサービスがGoogleからリリースされました。

Googleタグマネージャでタグを一括管理

Googleタグマネージャはその名の通り、「タグの管理」に特化したツールです。

大まかな仕組みとしては「管理画面からタグを設定することで、『指定したサイトにタグを自動で配信する』」というものです。

日本語化もされており、またGoogleが配信しているアナリティクスやAdWords/AdWordsリマーケティングなどでは「テンプレート」とよばれるタグを全く使わずに導入ができる仕組みになっています。

そしてhtmlタグを編集するのはたったの1度だけ、「サイトにタグマネージャタグを設置する」だけです。

タグマネージャを使えばコーディング知識がほとんど無い人でも、簡単にアナリティクスやAdWordsをサイトに導入できるようになります。

では実際に「Googleタグマネージャ」を利用して、アクセス解析ツールを導入してましょう。

簡単過ぎる導入方法:「GoogleAnalyticsの場合」

今回タグマネージャーに追加するのは、アクセス解析ツールの定番「Googleアナリティクス」です。

タグマネージャの公式サイトは「タグマネージャ」や「tagmanager」などで検索するとすぐに出てきます。

google検索結果

アカウントの作成

サイトのトップから「今すぐ登録」をクリックします。

タグマネージャTOP

「タグマネージャアカウント」を作成するために「アカウント名」を入力します。
真ん中にあるチェックボックスはタグマネージャ機能とは直接関係ありませんので、オン・オフどちらでも大丈夫です。

アカウントの作成

「コンテナ」を作る

タグを収納する「コンテナ」を作成します。
ここでタグの配信先が「モバイルアプリ」か「ウェブページ」かを確認されますので、「ウェブページ」を選択します。

ドメイン入力

「ウェブページ」を選択すると、ドメインを入力する欄が表示されてます。
ここに配信予定のサイトのドメインを入力します。

セキュリティ保護(SSL)ページのドメインが異なる場合用に「http://」「https://」が選択できるようになっています。
ASPなどを使用していないサイトであれば、デフォルトの「//」で問題ありません。

ドメイン入力エリア詳細

「タグマネージャタグ」の追加

以上の手順を終えると、「タグマネージャタグ」が発行されます。
このタグをウェブサイトに貼り付けることで、タグマネージャが使用できるようになります。

タグマネージャタグ

ウェブサイトを開いて、タグを追加します。
「タグマネージャタグ」の挿入場所は「bodyタグの直下」です。

タグ貼り付け位置

「コンテナ」にタグを追加する

ウェブサイトへの「タグマネージャタグ」の追加の後は「コンテナ」へのタグの追加です。
ここでは「Google アナリティクス」を選択します。

追加タグ選択

タグの設定画面が表示されてますので、Googleアナリティクスから「トラッキングID」をコピーして「ウェブプロパティID」に貼り付けます。

アナリティクスからのコピペ

ページ下部に「トラッキングタイプ」や「詳細設定」などの設定項目があります。
必要な項目にチェックを入れることで簡単にカスタマイズが実施できます。

配信ルール詳細設定

配信先設定

「配信のルール」のエリアにある「タグを配信するルールを追加」ボタンをクリックします。
ここでタグを表示させるページの条件を設定できます。

配信ルール作成

表示させたくないページなどが特に無ければ、「すべてのページ」を選択して「保存」しましょう。

これでアナリティクスタグの設定は完了です。
「配信のルール」にて使用する「正規表現」以外はほとんどチェックボックスのオン・オフで対応できますので、非常に簡単に設定することができます。

全ての設定が完了した後に、「保存」ボタンをクリックしてタグの作成が完了します。

作業完了!

配信準備・バージョン管理

タグマネージャには「バージョン管理機能」がついています。
事前にプレビューで確認することや、過去のバージョンに復元することなどもできますので、カスタマイズの失敗リスクを最小限に留めることが可能になります。

今回はアナリティクスタグの配信のみですので、このまま「バージョンを作成」をクリックします。

バージョン管理 width=

この後「バージョンを作成」ボタンと同じ位置に「公開」ボタンが表示されますので、「公開」をクリックすることで作成したタグがウェブサイトに配信されるようになります。

まとめ

いかがでしたでしょうか。

「htmlタグやJavaScriptを見るのも嫌だ」という人でも簡単にアナリティクスタグを導入できるのが「タグマネージャ」の便利な点です。

また「カスタムhtml」機能を利用することで、FacebookのSDKなどもタグマネージャで管理することが可能になります。

ただし「ページの内容に影響を与える・影響を受けるタグには利用できない」という点にはご注意下さい。