データ要素、ルールおよびライブラリの追加
作成対象:
- 初心者
- 中級
- 開発者
このレッスンでは、最初のデータ要素、ルール、ライブラリを作成します。
データ要素とルールは、タグの基本的な構成要素です。 データ要素には、マーケティングソリューションと広告ソリューションに送信する属性が格納され、ルールは、適切な条件下でこれらのソリューションに対する要求を実行します。ライブラリは、すべての作業を実行するため、ページに読み込まれる JavaScript ファイルです。このレッスンでは、3 つすべてを使用して、サンプルページで何らかの処理をおこなうようにします。
- Platform launch(クライアントサイド)が tags になりました
- Platform launchサーバーサイドが event forwarding になりました
- Edgeの設定が datastreams になりました
学習内容
このレッスンを最後まで学習すると、以下の内容を習得できます。
- データ要素の作成
- ルールの作成
- ライブラリの作成
- ライブラリへの変更の追加
- ライブラリが Web ブラウザーに読み込まれていることを検証する
- 作業ライブラリ機能を使用して作業効率を上げる
ページ名のデータ要素の作成
データ要素は、データレイヤーのタグのバージョンです。 独自のデータレイヤーオブジェクト、cookie、ローカルストレージオブジェクト、クエリ文字列パラメーター、ページ要素、メタタグなどの値を保存できます。この演習では、ページ名のデータ要素を作成し、Target および Analytics の実装で後から使用します。
データ要素を作成するには、以下を実行します。
-
左側のナビゲーションで、「データ要素」をクリックします
-
このプロパティにはまだデータ要素を作成していないので、このトピックに関する追加情報を含む短いビデオが表示されます。よろしければこのビデオをご覧ください。
-
「新しいデータ要素を作成」ボタンをクリックします。
-
データ要素を
Page Name
と名付けます。 -
サンプルページのデータレイヤーの値を示すには、JavaScript 変数データ要素タイプ使用します:
digitalData.page.pageInfo.pageName
-
「小文字を強制」および「テキストをクリーン」チェックボックスをオンにして大文字と小文字を区別し、不要なスペースを削除します
-
通常、この値はページごとに異なるので、なし を ストレージ期間 設定のままにします
-
「保存 ボタンをクリックして、データ要素を保存します
ルールの作成
次に、このデータ要素を単純なルールで使用します。ルールはタグの最も強力な機能の 1 つであり、訪問者が web サイトを操作したときの動作を指定できます。 ルールで概説された基準が満たされると、ルールは指定したアクションをトリガーします。
ページ名データ要素の値をブラウザーコンソールに出力するルールを作成します。
ルールを作成するには以下を実行します。
-
左側のナビゲーションで、「ルール」をクリックします
-
このプロパティにはまだルールを作成していないので、トピックに関する追加情報を含む短いビデオが表示されます。よろしければこのビデオをご覧ください。
-
新規ルールを作成 ボタンをクリックします。
-
ルール名を
All Pages - Library Loaded
に設定します。この命名規則は、ルールを実行する場所とタイミングを示すので、タグプロパティの成熟時に識別して再利用することが容易になります。 -
イベントで、「追加」をクリックします。 イベントは、ルールをいつ実行するかをタグに指示します。タグには、ページの読み込み、クリック、カスタム JavaScript イベントなど、様々なイベントを使用できます。
-
「イベントタイプ」として、「読み込まれたライブラリ(ページ上部)」を選択します。イベントタイプを選択すると、選択した項目を使用してイベントの名前がタグによって事前設定されます。 また、イベントのデフォルトの順序は 50 です。順序は、同じイベントによってトリガーされる複数のルールがある場合に、アクションのシーケンスを正確に制御できるタグの強力な機能です。 この機能は、チュートリアルの後半で使用します。
-
「変更を保持」ボタンをクリックします
-
-
このルールはすべてのページで実行する必要があるので、条件 は空白のままにします。 条件モーダルを開くと、URL、データ要素の値、日付範囲など、幅広いオプションに基づき、条件で制限と除外の両方を追加できます。
-
「アクション」で、「追加」をクリックします
-
アクションタイプ/カスタムコード を選択します。この時点では、これが唯一のオプションです。 チュートリアルの後半で、拡張機能を追加すると、より多くのオプションが利用できるようになります。
-
「</> エディター 開く」を選択して、コードエディターを開きます
-
コードエディターに次を追加します。次のコードは、ページ名データ要素の値をブラウザーコンソールに出力し、機能していることを確認できます。
console.log('The page name is '+_satellite.getVar('Page Name'));
-
コードエディターを保存します。
-
アクション設定画面で、「変更を保持」をクリックします
-
「保存」をクリックして、ルールを保存します
ルール ページに新しいルールが表示されます。
ライブラリへの変更の保存
データ収集インターフェイスで拡張機能、データ要素、ルールのコレクションを設定したら、訪問者がサイトにアクセスしたときにマーケティングタグが実行されるように、これらの機能とロジックを一連のJavaScript コードにパッケージ化して、web サイトにデプロイできるようにする必要があります。 ライブラリは、これを実行する JavaScript コードのセットです。
以前のレッスンでは、開発環境の埋め込みコードをサンプルページに実装しました。サンプルページを読み込むと、埋め込みコード URL で 404 エラーが返されました。これは、タグライブラリがまだ作成されておらず、環境に割り当てられていないためです。 このチュートリアルでは、サンプルページで何らかの処理をおこなえるよう、ライブラリに新しいデータ要素とルールを配置します。
ライブラリを追加してビルドするには、以下を実行します。
-
左側のナビゲーションで、「公開フロー」をクリックします
-
「新しいライブラリを追加」をクリックします
-
ライブラリに名前を付けます(例:
Initial Setup
) -
環境/開発 を選択します。
-
「変更されたすべてのリソースを追加」をクリックします。
-
「変更されたすべてのリソースを追加」をクリックすると、タグには変更の概要が表示されます。
-
開発用に保存してビルド をクリックします
しばらくすると、ステータスドットが緑色に変わり、ライブラリが正常にビルドされたことを示します。
作業の検証
次に、ルールが期待どおりに動作していることを検証します。
サンプルページを再度読み込みます。開発者ツール/ネットワーク タブを見ると、タグライブラリに対して 200 件の応答が表示されています。
開発者ツール/コンソールを見ると、「The page name is home」というテキストが表示されます。
これで、最初のデータ要素とルールを作成し、最初のタグライブラリを作成しました。
作業ライブラリ機能の使用
タグで多数の変更を行う場合、「公開」タブに移動して変更を追加し、結果を確認するたびにライブラリを構築する必要があると、不便です。 初期セットアップライブラリを作成すると、作業ライブラリ機能を使用して変更内容をすばやく保存し、ライブラリを 1 つの手順でリビルドできます。
「All Pages - Library Loaded」ルールに小さな変更を加えます。左側のナビゲーションで ルール をクリックし、All Pages - Library Loaded
のルールをクリックして開きます。
Edit Rule
ページで「作業ライブラリ」ドロップダウンをクリックし、Initial Setup
ライブラリを選択します。
ライブラリを選択すると、「保存」ボタンがデフォルトで ライブラリに保存 になることがわかります。 タグに変更を加える場合、このオプションを使用すると、作業ライブラリに直接変更を自動的に追加したり、変更を再構築したりできます。
やってみてください。この機能をテストするには、「Custom Code」アクションを開き、「The page name is」というテキストの後にコロンを追加します。コードブロック全体は次のようになります。
console.log('The page name is: '+_satellite.getVar('Page Name'));
コードを保存し、変更をアクションに残して、「ライブラリおよびビルドに保存」ボタンをクリックします。
作業ライブラリドロップダウンの横に緑色の点が再び表示されるまでしばらく待ちます。次に、サンプルページを再読み込みし、変更がコンソールメッセージに反映されていることを確認します(ページの変更を確認するには、ブラウザーのキャッシュをクリアして再読み込みする必要がある場合があります)。
これで作業がはるかに高速になるので、チュートリアルの残りの部分ではこの方法を使用します。