ウェブサイトのクイックスタートガイド | ウェブサイト向けの始め方

このガイドでは、ウェブサイトのためのTealiumタグ管理ソリューションのインストール方法について説明します。このインストールには2つのコンポーネントが必要です：ユニバーサルタグ（utag.js）とユニバーサルデータオブジェクト（utag_data）。これらのコンポーネントをサイトのすべてのページにインストールしてください。

インストール

ユニバーサルタグ

ユニバーサルタグは、サイトでタグ管理の構成をロードするために必要な生成されたコードが含まれたJavaScriptファイルであり、utag.jsと呼ばれます。

<!-- Tealiumユニバーサルタグ -->
<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タグ管理のCode Centerを使用してインストールコードを取得するか（またはTealium管理者に問い合わせてください）：

クライアントサイドの管理メニューで、Code Centerをクリックします。Code Centerダイアログが表示されます。
デフォルトのJavaScript TypeをAsynchronousに構成したままにします（同期 vs. 非同期のJavaScriptについてを参照してください）。
Tealium Scriptタブで、コードスニペットを選択するためにSelect Allをクリックします。
選択したユニバーサルタグコードをクリップボードにコピーします。

環境

適切なリリースサイクルをサポートするために、Dev、QA、およびProdの3つの環境があります。これにより、非本番環境にQAインスタンスのutag.jsをインストールし、本番環境のサイトにProdインスタンスをインストールできます。このセットアップにより、QAでの変更をProdにリリースする前にテストすることができます。

環境パスは、ロードするユニバーサルタグのインスタンスを決定します。

QA
//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/qa/utag.js
Prod
//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/prod/utag.js

Code Centerを使用してインストールコードを取得する方法について詳しく学びます。

コードの配置

ユニバーサルタグコードをサイトのすべてのページの<body>タグの直後に貼り付けてください。この位置は、最も多くのベンダーとの互換性があり、訪問が次のページに移動する前にサードパーティのトラッキングが完了するため、最適です。

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

<head>
  ...
</head>
<body>
<!-- Tealiumユニバーサルタグ -->
<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ページフロー、およびシングルページアプリケーションをトラッキングします。この関数を呼び出すことで、構成されたベンダータグ内の対応するページトラッキング機能がトリガーされます。

次は、コンテンツサイトの例で、訪問が「ジーンズ」を検索した場合のトラッキングです：

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

次は、チェックアウトフローのステップをトラッキングするECサイトの例です：

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内でロードルール、拡張機能、およびデータマッピングを構成するために参照されます。その他のイベントデータについては、任意の変数名を使用してください。

suggested tealium_eventの値は、次のようなものですが、これに限定されません：

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

詳細については、次を参照してください：

ベストプラクティス

データレイヤーの実装と管理に関連するベストプラクティスは次のとおりです：

変数の命名規則

小文字の単数形のアンダースコアで区切られた変数名を使用します。
ベンダー固有の命名を避け、意味のある変数名を使用します。
ブール変数名の接頭辞にはis_またはhas_を付けます。

データの値

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

ページタイプの識別子

サイトのすべてのページには、page_typeという変数を含める必要があります。これは、ユーザーが表示しているページのタイプを判断するために使用され、ロードルール、拡張機能、およびデータマッピングの構成に役立ちます。

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

すでにW3Cデータオブジェクトや独自のカスタムオブジェクトなど、サイトに実装されているデータレイヤーオブジェクトを、利用可能なデータレイヤーコンバータのいずれかを使用してユニバーサルデータオブジェクト（UDO）utag_dataに変換します。

utag_dataをutag.jsの前に構成する
ページコードでは、ユニバーサルデータオブジェクトをユニバーサルタグの前に宣言する必要があります。これにより、ユニバーサルタグがロードルール、拡張機能、およびタグを評価するために必要なデータレイヤー変数をすべて持っていることが保証されます。

データレイヤーのベストプラクティスについて詳しく学びます。