GETTING STARTED WEB

クイックスタートガイド

本ガイドは、ウェブサイト用の Tealium タグ管理ソリューションのインストールに関するものです。このインストールには、二つのコンポーネント、つまり、ユニバーサルタグ (utag.js) とユニバーサルデータオブジェクト (utag_data) が必要です。サイトの各ページにこれらのコンポーネントの両方をインストールします。

インストール

ユニバーサルタグ

ユニバーサルタグは、サイト上にタグ管理設定を読み込むために必要なものとして生成されたコードを含む utag.js と称される JavaScript ファイルです。

<!-- Tealium Universal Tag -->
<script type="text/javascript">
  (function(a,b,c,d) {
      a='//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/ENVIRONMENT/utag.js';
      b=document;c='script';d=b.createElement(c);d.src=a;
      d.type='text/java'+c;d.async=true;
      a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a)})();
</script>

utag.js ファイルへのパスは、アカウントに一意のものとなります。このガイド全体を通して、プレイスホルダー値 ACCOUNT、 PROFILE、 ENVIRONMENT を、お使いのアカウント、プロファイル、環境に置き換えます。

たとえば、お使いのアカウント名が your-companyであり、デフォルトプロファイル名として mainを使っていた場合には、QA インスタンスへのファイルパスは、次のようになります:

//tags.tiqcdn.com/utag/your-company/main/qa/utag.js

ユニバーサルタグ (utag.js) のインストールの詳細は、こちらから参照してください。

コードの取得

アカウント名やプロファイル名がわからない場合は、iQ Tag Management の Code Center を用いてインストールコードを取得します (または、貴社の Tealium アドミニストレーターに問い合わせます)。

Tealium iQ Tag Management で、[user menu] をクリックし、 Code Centerを選択します
デフォルトの JavaScript タイプ の設定を Asynchronous (非同期) のままにします (同期と非同期の比較 - JavaScriptを参照してください)
Tealium Script タブで、 Select All をクリックし、コード‘ スニペットを選択します
選択したユニバーサルタグコードをクリップボードにコピーします

コードセンター

環境

適切なリリースサイクルをサポートするための環境が 3 つ (Dev (開発)、QA、Prod (本番)) あります。これによって、お客様の非本番環境の utag.js の QA インスタンスと、ライブの本番サイト上の Prod (本番) インスタンスをインストールすることができます。このようにセットアップすれば、QA の変更について、Prod (本番) へのリリース前にテストすることができます。

環境パスは、読み込む対象のユニバーサルタグのインスタンスがどれであるかを定めます。

QA //tags.tiqcdn.com/utag/ACCOUNT/PROFILE/qa/utag.js
Prod (本番) //tags.tiqcdn.com/utag/ACCOUNT/PROFILE/prod/utag.js

インストールコードを取得するためのコードセンターの使用の詳細は、こちらから参照してください。

コードの配置

ユニバーサルタグコードを、サイトの各ページのオープニング <body> タグの直後に貼り付けます。この場所に配置することで、最大多数のベンダーとの互換性を実現し、訪問者が次のページに移動する前に、サードパーティのトラッキングを完了させることが可能になります。

次の例は、コードの配置を示しています。

<head>
  ...
</head>
<body>
<!-- Tealium Universal Tag -->
<script type="text/javascript">
  (function(a,b,c,d) {
      a='//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/ENVIRONMENT/utag.js';
      b=document;c='script';d=b.createElement(c);d.src=a;
      d.type='text/java'+c;d.async=true;
      a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a)})();
</script>
  ...
</body>

ユニバーサルタグの読み込みの仕組みについて理解できるように、操作順序の詳細は、こちらから参照してください。

データレイヤー

データレイヤーは、サイト全体で収集されるさまざまな変数のすべてと、トラッキングされる訪問者とのやり取りで構成される Tealium ソリューションの基盤です。

ユニバーサルデータオブジェクト (UDO) は、 utag_data と呼ばれる JavaScript オブジェクトです。このオブジェクトでは、サイトからの動的データが Tealium タグに渡されます。このオブジェクトのプロパティには、ビジネスに合わせてベンダーに依存しないプレインな名前を使用します。

サイトの各ページにデータレイヤーオブジェクトを読み込み、各ページタイプに必要な変数に基づきそれを動的に入力し、ユニバーサルタグの前にそれを読み込みます。

以下は、検索結果ページに表示されることがある utag_data の宣言の例です。

<script type="text/javascript">
  var utag_data={
      "tealium_event"  : "search",
      "page_name"      : "Search Results",
      "search_results" : "42",
      "search_keyword" : "Tealium shirt"
  };
</script>

詳細を見る：

トラッキング

イベント

非ページビュー、ページでのインタラクション、その他の動的ページイベントなどのイベントをトラッキングするための utag.link() 関数を使用します。イベントのトラッキングにより、ページ内での訪問者のインタラクションに関する情報を収集できます。

Tealium では、トラッキング対象のイベントに名前を与えるためにデータレイヤー変数 tealium_event を提供します。これは、ユーザーがウェブサイトの要素とのインタラクション (ボタンのクリックなど) を行ったときに、JavaScript イベントリスナー内でイベントをトラッキングするために用いられます。

以下の例では、ユーザーがソーシャルシェアボタンをクリックしたときにトラッキングがなされます。

<a href="#" name="share" onclick="utag.link({'tealium_event': 'social_share', 'social_network': 'LinkedIn'});">Share</a>

イベントのトラッキングの詳細は、こちらから参照してください。

ビュー

utag.view() 関数は、ページが読み込みされる都度、自動的にトリガーされます。これでは、ページビュー、仮想ページビュー、AJAX ページフロー、およびシングルページアプリケーションをトラッキングします。この関数を呼び出すと、構成されたベンダータグ内の対応するページトラッキング機能がトリガーされます。

以下は、訪問者が「jeans」を検索したコンテンツサイトの例です。

utag.view({
    "tealium_event": "search",
    "search_keyword": "jeans",
    "search_results": "42"
});

以下は、チェックアウトフローの手順をトラッキングする E コマースサイトの例です。

utag.view({
    "tealium_event": "page_view",
    "page_type": "checkout",
    "page_name": "Checkout: Payment Method",
    "cart_total_items": "2",
    "cart_total_value": "125.00"
});

詳細を見る：

Tealium イベント変数

トラッキングするインタラクションの種類を一意に特定するには、予約変数tealium_eventを使用します。この変数は、タグ配信ルール、拡張機能、データマッピングを構成するためにTealium iQ全体で使用されます。その他すべてのイベントデータには、好きな変数名を使います。

以下は、tealium_eventの推奨値ですが、これに限定されるわけではありません。

`tealium_event`の値	イベントの説明
`page_view`	ページのビュー
`search`	商品の検索
`product_view`	商品のビュー
`cart_add`	ショッピングカートへの商品の追加
`purchase`	購入の完了
`user_login`	ユーザーのログイン
`social_share`	ソーシャルサイトでのリンクの共有

詳細を見る：

ベストプラクティス

データレイヤーの実装と管理に関連するベストプラクティスには、以下のものがあります。

変数の名称設定方法

小文字、単数形、アンダースコアで区切られたの変数の名前を用います。
ベンダー固有の名前を避けて、意味のある変数名を用います。
接頭辞がブール値の変数名 (is_ や has_を用いるもの)。

データ値

すべての変数に文字列値を使用します。
ブール値には、文字列値 "1" と "0" を用います。 true と falseは用いません。
数値には、 "1234.56" などの文字列値を用い、 1234.56を用いません。
配列には、 ["prodID1", "prodID2", "prodID3"] などのカンマで区切られた文字列を用います。

ページタイプ識別子

サイトの全ページに page_type という変数を含めるべきです。これは、読み込みルール、拡張機能、データマッピングを構成するために有益となる可能性がある、ユーザーがビューしているページのタイプを定めるために用いられます。

サードパーティデータレイヤーオブジェクト

サイト上にデータレイヤーオブジェクト (W3C Data Object や、独自のカスタムオブジェクト) が既に実装されているかもしれません。こうしたオブジェクトを UDO utag_data 形式に (利用可能なデータレイヤーコンバータのいずれかを使用して) 変換します。

** utag_data を utag.js** の前に設定しますページコードでは、ユニバーサルデータオブジェクトは、ユニバーサルタグの前に宣言される必要があります。これによって、ユニバーサルタグが、読み込みルール、拡張機能、タグを評価するために必要なすべてのデータレイヤー変数を持つように確保されます。

データレイヤーのベストプラクティスの詳細は、こちらから参照してください。

テストと検証

インストールが正常に機能していることを検証するには、以下のツールを使用します。

Universal Tag Debugger

Universal Tag Debugger（”utag debugger”とも呼ばれる）では、サイトの閲覧中にリアルタイムでデータレイヤーとトラッキングコールを簡単に検証する方法を提供します。

UTAG Monitor

utag.jsによって行われるトラッキングコールは、移動したり、ページ内イベントをトリガーしたりすると、ツール内で表示および更新されます。

Universal Tag Debugger (ユニバーサルタグデバッガー)の詳細は、こちらから参照してください。

Web Companion

Web Companionというブラウザツールを利用すると、タグの構成のチェック、サイトのデータの調査、および新しい構成の作成とテストを手早く簡単に実行できます。このツールを起動すると、utag.jsライブラリがご自身のサイトに正常に読みまれていることがすばやく確認されます。

Web Companion

詳細を見る：

Live Events

Tealium EventStream では、Live Events 機能を用いて、受信イベントをリアルタイムで管理、検査します。データソースから送信するイベントが受信されることを検証します。

Live Events を使用するには、Tealium Collect タグを iQ Tag Management の設定に追加する必要があります。

詳細を見る：

次に

ウェブの概念

このページはお役にたちましたでしょうか？

最終更新日 :: 2022年August月29日

インストール

ユニバーサル タグ

コードの取得

環境

コードの配置

データレイヤー

トラッキング

イベント

ビュー

Tealium イベント変数

ベストプラクティス

テストと検証

Universal Tag Debugger

Web Companion

Live Events

ユニバーサルタグ