AdobeのタグマネージャがGoogleと違う点

Post date: Jul 06, 2013 7:6:36 PM

実はSiteCatalystに含まれているタグマネージャー

Googleの参入で一気にメジャー化したタグマネジメント。Adobeも実はTagManagerを提供しています。独立した製品ではなくSiteCatalystの一部になっているので、Admin権限があれば利用できます。2013年4月にバージョン2.0になり、だいぶ進化しました。

Google Tag Managerとの違いはサードパーティタグ管理

機能的にはほぼ同じで、どちらも自社サービスのタグ管理を楽にすることに力が入っています。サードパーティ（他社サービス）のタグ管理に関しては、Adobe TagManagerの方が柔軟です。

この違いを具体的に理解するため、Adobe TagManager でSiteCatalystとGoogle Analyticsを導入してみます。

タグ管理までのステップ

管理コンソールからアクセスします（権限が無いと管理者メニューは表示されません）。

1. まずコンテナを作成

アクセスして最初に表示されるのはコンテナの一覧です。コンテナの中に複数のタグを入れる、という概念は一般的なタグマネジメントと同じです。

最初はコンテナが無い状態になっているはずです。

まず、「Create New Container」ボタンをクリックしてコンテナを作成します。

コンテナや環境（開発、ステージング、本番）ごとにアクセス権限を制御したい場合は、ユーザーグループを作成しておき、この画面のContainer Groups Accessで指定します。指定しない場合は、全Adminが閲覧・編集できるようになります。

2. コンテナの中にタグを追加する

コンテナは1つ以上のタグで構成されます。コンテナの構成や内包されるタグを変更すると、古いコンテナが自動でバックアップされ、新しいRevisionが作成されます。このRevisionを、デプロイとテストを繰り返しながらDev（開発用）、Stage（テスト用）、Live（本番用）の3つの環境にコピーしていきます。CMSにおけるページのバージョン管理と似ていますが、TagManagerの場合は環境ごとにバージョンが独立している点が独特です。

コンテナを作成した直後は、以下のようにRevisionが存在しない空の状態になります。

「Create Revision」ボタンをクリックして、コンテナの新Revisionを作成（＝タグを定義）します。

コンテナの編集画面で「Add product or code」ボタンをクリックし、まずタグの種類を選択します。

AdobeのDigital Marketing CloudからはAdobe Analytics (SiteCatalystや動画計測), Adobe Target (Test&Target), Audience managerを選べます。

Custom Codeを選ぶと、自由なカスタムタグを作成できます。Google Tag ManagerのカスタムタグはHTML形式のみがサポートされていますが、Adobe TagManagerの場合はHTMLの他にJavaScript、Remote Script（外部JSファイルのロード）、IFrameから選べるので、記述するコードの量を最低限に減らせます。

3. テストしながらデプロイ（導入）

タグの追加が終わったら、まずDev環境にDeploy（日本語UIでは導入）します。CDNを使っているので、配信が終わるまで数分待つ必要があります。配信が終わるまでは、Statusに「保留中の導入」と表示されます。何かが原因で止まっているわけではなく、CDNによる配信までの待ち状態、という意味です。

コンテナをページに埋め込むため、「Get Page Code」ボタンをクリックして表示されるTagManager用のタグをDev環境の各HTMLページに挿入します。デプロイ前にタグを入れるとJSファイルがnot foundになるので、本番サイトへのタグ挿入はまだ行わないようにします。

Dev へのデプロイが終わったら、ブックマークレットを使ってDev環境用のタグを配信させてテストします。問題あれば修正、問題なければ「Copy to stage」リンクでStage環境へコピーし、さらにデプロイしてから同じようにテストします。このあたりの手順の詳細はヘルプを参照してください。

SiteCatalystのタグ管理が簡単

SiteCatalystやAdobe Target (Test&Target)のタグは専用の属性が用意されていたりタグが自動生成されるので、管理がだいぶ楽になります。

例えばSiteCatalyst用のタグを追加すると：

Accountには収集先のRSIDを、

Secure Server / Non-secure Serverにはコレクションサーバー名を（RSIDを変更しても連動しないので注意）、

Currency Codeには通貨の種類を指定します。

一番下でオブジェクト名を「s」以外に変更できるのが便利です。管理コンソールからダウンロードできるs_code.jsは「s」固定なので、通常はサポートに変更を依頼する必要があります。

「Add Tag」ボタンをクリックすると、詳細の編集画面が表示され、設定内容が反映されたJSコードがデフォルトで記入されます。

これは雛形なので、内容の見直しや修正、プラグインの追加などが必要です（通常の導入と同じ）。

s_code.jsの後半に記述される基本エンジン部分は、別途自動配信されます。画面上の「SiteCatalyst Version」という項目には、配信されるバージョン（H.26など）が表示されてます。デフォルトはこのタグを作成した時点の最新バージョンになります。古いバージョンは選べません。タグを編集する時に新バージョンが利用可能な場合はアップデートできますが、そのまま同じバージョンを使い続けることもできます。

「Synchronous」にチェックを入れない状態では、基本エンジン部分は非同期でロードされます。非同期ロードはページのパフォーマンスが向上するのがメリットですが、ロード前にページ内のタグ（JS命令）が実行されてしまうことがあるので、ページ側のHTMLを解析用にカスタマイズしている場合は注意が必要です。例えばリンクのonclickでs.tl(xxx)をべた書きしているページで、非同期ロードが終わるよりも前にリンクがクリックされると、「sオブジェクトが見つからない」エラーになります。

「On Load」には、HTMLソースや外部ファイルのロードが終わった時点で実行するJSコードを記入します。非同期でロードする場合に便利です。

「Firing Rules」には、タグを出力する条件を指定します。URL中のホスト名 / パス / クエリ文字列、Cookieを「含む」「含まない」や正規表現で、日付の場合は期間や曜日で条件設定できます。

選択するパラメータ次第で下の入力欄が変わります。以下はDateを選んだ場合↓

この条件指定は、Googleの方が少し柔軟ですね。Google Tag Managerでは時間指定やリファラ／URL全体の条件指定ができます。

カスタムタグの管理がGoogleよりも柔軟

A. HTMLを丸ごと流し込む方法

「Add product or code」ボタンのCustom Code＞HTML を選択し、HTMLを記入します。

これが最も安直な方法です。<script>を含むタグをまるごと一つのフォームに流し込むだけです。Google Tag Managerはこの方式のみをサポートしています。

B. Scriptを丸ごと流し込む方法

「Add product or code」ボタンのCustom Code＞Javascript を選択し、JSコードを記入します。

<script>タグが不要になるので少し見やすくなります。内容が強制的にJavaScript扱いになるので、管理的にも安心です。

C. リモートJSを分離する

JSのロードをタグマネージャーに任せると、もっとスマートになります。

「Add product or code」ボタンで「Remote Script」を選択し、以下のように外部JSを指定します。

「Synchronous」にチェックを入れると同期ロード、入れないと非同期でロードされます。

SSLの場合もドメインが同じ場合は //www.google-analytics.com というプロトコルを省略した表記ができます。GAの場合はSSLと非SSLでドメインが異なるので、SSL用と非SSL用をFiring Ruleで切り替える必要があるのが面倒です。幸い、Universal AnalyticsではSSLと非SSLで同じドメインとパスを使うことにしたようです。

D. タグを整理して構造化する

各種JSファイルのロードを分離していくと、残るコードはわずかです。また、ツールが増えていくと、会員ステータスや注文データ、イベントトラッキングなど、同じデータをあちこちで処理することも増えていくので、管理が煩雑になっていきます。そのため、ツールごとにタグを分けるのではなく、処理の内容で分けたほうがスマートです。

Adobe TagManagerではタグの実行順番やロードの同期・非同期を個別に細かく指定できるので、データの重要度、ロードや処理の時間、プログラム的な依存関係などを考慮して順番を管理できます。

違いのまとめ

機能の違いを比較してみます。

用途で比較すると：

基本的には甲乙つけがたしですね。GoogleはGoogle製品の、AdobeはAdobe製品のタグを楽に管理できる、という点は確実です。その他のサードパーティ製品のタグを管理するのはAdobe TagManagerの方がやや楽ですが、あらゆるタグを一元管理したい場合は、サードパーティの商用のタグ管理ソリューションも検討すると良いでしょう。