---
title: ウェブサイト用クイックスタートガイド
url: https://docs.tealium.com/ja/platforms/getting-started-web/quick-start/
---
このガイドでは、ウェブサイト用のTealiumタグ管理ソリューションのインストールについて説明します。このインストールには2つのコンポーネントが必要です：ユニバーサルタグ（`utag.js`）とユニバーサルデータオブジェクト（`utag_data`）。これらのコンポーネントをサイトのすべてのページにインストールしてください。
## インストール
### ユニバーサルタグ
ユニバーサルタグは、`utag.js`と呼ばれるJavaScriptファイルで、サイトのタグ管理構成をロードするために必要なコードが生成されています。
```html
```
`utag.js`のファイルパスはアカウントによって異なります。このガイドを通じて、プレースホルダーの値`ACCOUNT`、`PROFILE`、`ENVIRONMENT`をあなたのアカウント、プロファイル、環境に置き換えてください。
例えば、アカウント名が`your-company`で、デフォルトのプロファイル`main`を使用している場合、QAインスタンスのファイルパスは以下のようになります：
```
//tags.tiqcdn.com/utag/your-company/main/qa/utag.js
```
[ユニバーサルタグ（utag.js）のインストールについてもっと学ぶ](https://docs.tealium.com/ja/platforms/javascript/install/#universal-tag-utag-js)。
### コードの取得
アカウントやプロファイル名がわからない場合は、Tealium管理者に尋ねるか、アカウントの権限システムに応じてプラットフォームからコードスニペットを取得できます：
#### プラットフォーム権限
プラットフォーム権限を使用しているアカウントの場合、**タグ管理 > 環境管理**にアクセスしてコードスニペットを取得します：
1. クライアントサイドの管理メニューで**環境管理**をクリックします。**環境管理**ダイアログが表示されます。
1. 使用しているウェブサイトの環境の編集アイコンをクリックします。**環境の編集**画面が表示されます。
1. **コードスニペット**セクションで**クリップボードにコピー**をクリックしてコードスニペットを選択します。
1. スクリプトコードの`a=`行の場所を置き換えます。
詳細については、[manage-environments](https://docs.tealium.com/manage-environments/)を参照してください。
#### レガシー権限
レガシー権限を使用しているアカウントの場合、**タグ管理 > コードセンター**にアクセスしてコードスニペットを取得します：
1. 管理メニューで**コードセンター**をクリックします。
**コードセンター**ダイアログが表示されます。
1. サイドパネルで環境を選択します。
1. テキストボックスに表示されたコードを以下のいずれかの方法で選択します：
* コード全体をクリックしてドラッグして選択します。
* コード上にマウスを移動すると表示される**すべて選択**ボタンをクリックします。
1. コードをコピーします。
1. サイトのオーサリングツールやバックエンドシステムにコードを貼り付けます。
詳細については、[code-center](https://docs.tealium.com/code-center/)を参照してください。
### 環境
適切なリリースサイクルをサポートするために、Dev、QA、Prodの3つの環境があります。これにより、QAインスタンスの`utag.js`を非本番環境にインストールし、Prodインスタンスをライブ本番サイトにインストールできます。この構成により、Prodにリリースする前にQAで変更をテストできます。
環境パスは、ロードするユニバーサルタグのインスタンスを決定します。
* **QA**
`//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/qa/utag.js`
* **Prod**
`//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/prod/utag.js`
詳細については、[manage-environments](https://docs.tealium.com/manage-environments/)を参照してください。
### コードの配置
ユニバーサルタグのコードは、サイトのすべてのページの開始``タグの直後に貼り付けます。この位置は、最も多くのベンダーとの互換性を提供し、訪問が次のページに移動する前にサードパーティのトラッキングが完了することを可能にします。
以下の例は、コードの配置を示しています：
```html
...
...
```
[操作の順序](https://docs.tealium.com/order-of-operations/)についてもっと学ぶことで、ユニバーサルタグがどのようにロードされるかを理解できます。
### Tealium イベント変数
追跡する各種のインタラクションを一意に識別するために、予約変数 `tealium_event` を使用します。この変数は Tealium iQ 全体でロードルール、拡張機能、データマッピングの構成に参照されます。その他のイベントデータには、お好みの変数名を使用してください。
推奨される `tealium_event` の値には以下が含まれますが、これに限定されません：
| `tealium_event` の値 | イベントの説明 |
| --- | --- |
| `page_view` | ページを表示 |
| `search` | 商品を検索 |
| `product_view` | 商品を表示 |
| `cart_add` | ショッピングカートに商品を追加 |
| `purchase` | 購入を完了 |
| `user_login` | ユーザーログイン |
| `social_share` | ソーシャルサイトでリンクを共有 |
詳細はこちら：
* [`tealium_event` 変数について](https://docs.tealium.com/ja/platforms/javascript/track/#tealium-event)
* [データレイヤー定義：小売](https://docs.tealium.com/retail/)
* [データレイヤー定義：公開](https://docs.tealium.com/publisher/)
* [データレイヤー定義：ビデオトラッキング](https://docs.tealium.com/basic-video-tracking/)
### ベストプラクティス
データレイヤーの実装と管理に関連するベストプラクティスには以下が含まれます：
**変数命名規則**
- 小文字、単数形、アンダースコアで区切られた変数名を使用します。
- ベンダー特有の命名を避ける意味のある変数名を使用します。
- ブール型変数名には `is_` や `has_` を接頭辞として使用します。
**データ値**
- すべての変数に文字列値を使用します。
- ブール値には、`true` や `false` の代わりに文字列値 `"1"` と `"0"` を使用します。
- 数値には、`1234.56` の代わりに文字列値 `"1234.56"` を使用します。
- 配列には、`["prodID1", "prodID2", "prodID3"]` のようなカンマ区切りの文字列を使用します。
**ページタイプ識別子**
サイトのすべてのページには `page_type` という変数が含まれている必要があります。これは、ユーザーが閲覧しているページのタイプを判定し、ロードルール、拡張機能、データマッピングの構成に役立ちます。
**サードパーティのデータレイヤーオブジェクト**
既にサイトに実装されているデータレイヤーオブジェクト（W3Cデータオブジェクトや独自のカスタムオブジェクトなど）がある場合、これらのオブジェクトをユニバーサルデータオブジェクト（UDO）`utag_data` に変換します。利用可能な[データレイヤーコンバーター](https://docs.tealium.com/set-up-data-layer-converter/)のいずれかを使用してください。
**`utag_data` を `utag.js` の前に構成する**
ページコードでは、ユニバーサルデータオブジェクトをユニバーサルタグの前に宣言する必要があります。これにより、ユニバーサルタグはロードルール、拡張機能、タグを評価するために必要なすべてのデータレイヤー変数を持つことが保証されます。
[データレイヤーのベストプラクティス](https://docs.tealium.com/data-layer-best-practices/)についてもっと学ぶ。
## テストと検証
インストールが正しく機能しているかを確認するために、以下のツールを使用します。
### ユニバーサルタグデバッガー
ユニバーサルタグデバッガー（または「utagデバッガー」）は、サイトをナビゲートする際にリアルタイムでデータレイヤーとトラッキングコールを検証する簡単な方法を提供します。
`utag.js` によって行われるトラッキングコールは、ページ内イベントをナビゲートまたはトリガーするとツールに表示され、更新されます。
[ユニバーサルタグデバッガー](https://docs.tealium.com/universal-tag-debugger/)についてもっと学ぶ。
### Web Companion
Web Companionは、タグ構成を確認し、サイト上のデータを検査し、新しい構成を素早く簡単に作成してテストするためのブラウザツールです。このツールをすぐに起動することで、`utag.js` ライブラリがサイト上で適切にロードされていることを確認できます。
詳細はこちら：
- [Web Companion](https://docs.tealium.com/web-companion/)
- [公開構成のWeb Companion構成](https://docs.tealium.com/publish-configuration/)
- [環境の切り替え](https://docs.tealium.com/methods-to-switch-publish-environment/)
### ライブイベント
Tealium EventStreamでは、ライブイベント機能を使用してリアルタイムで受信イベントを管理および検査します。データソースから送信されたイベントが受信されていることを確認します。
ライブイベントを使用するには、iQタグ管理構成にTealium Collectタグを追加する必要があります。
詳細はこちら：
* [ライブイベントとフィード](https://docs.tealium.com/about-live-events/)
* [iQタグ管理のためのデータソース](https://docs.tealium.com/data-sources-for-iq-tag-management/)
* [Tealium Collectタグ構成ガイド](https://docs.tealium.com/tealium-collect-tag/)