Adobe Analytics の追加

拡張機能設定。コア AppMeasurement.js library 設定を管理し、グローバル変数を設定できます。

次の操作を実行するルールアクション：

1. Set Variables
2. Clear Variables
3. Analytics ビーコンの送信

拡張機能／カタログ ​に移動します。

Adobe Analytics 拡張機能を検索します。

インストール ​をクリックします。

の下 ライブラリ管理/レポートスイート」で、各タグ環境で使用するレポートスイート id を入力します。 ユーザーがAdobe Analyticsにアクセスできる場合は、ボックスに入力し始めると、すべてのレポートスイートのリストが事前に入力されて表示されます。 （このチュートリアルでは、すべての環境に対して 1 つのレポートスイートを使用しても構いませんが、実際の環境では、次の画像のように別々のレポートスイートを使用する必要があります）。

の下 一般/トラッキングサーバーに設定し、トラッキングサーバー ( 例： tmd.sc.omtrdc.net. サイトが https:// に対応している場合は、SSL トラッキングサーバーを入力します。

内 「グローバル変数」セクションの下 追加設定、 ページ名 変数を Page Name データ要素。 をクリックしてモーダルを開き、ページの Page Name データ要素を選択します。

ライブラリに保存 ​をクリックします。

次に移動： ルール セクションを開き、 ルールを追加

ルール名を設定します。All Pages - DOM Ready

イベント／追加 ​をクリックして、Event Configuration 画面を開きます。

イベントタイプ／DOM Ready ​を選択します（ルールの順序は「50」です）。

変更を保存 ​をクリックします。

「アクション」の下の をクリックして、新しいアクションを追加します。

拡張機能／Adobe Analytics を選択します。

アクションタイプ／ビーコンを送信 ​を選択します。

トラッキングは s.t() に設定したままにします。クリックイベントルールで s.tl() を呼び出す場合は、「ビーコンを送信」アクションでおこなうことも使用できます。

「変更を保存」ボタンをクリックします。

「ライブラリに保存してビルド」をクリックします。

Chrome ブラウザーで Luma サイトを開きます。

デバッガーアイコン をクリックして、Adobe Experience Cloud デバッガー ​を開きます。

Debugger がタグプロパティをにマッピングしていることを確認します。 あなたの 開発環境 ( 前のレッスン

クリックして「Analytics」タブを開きます。

レポートスイート名を展開して、それに対するすべての要求を表示します。

そのページ名変数と値で要求が実行されたことを確認します。

クリック データ要素 左のナビゲーション

データ要素を追加 ​をクリックします。

データ要素に「Page Type」と名前を付けます。

データ要素の種類／JavaScript 変数 ​を選択します。

用途 digitalData.page.category.type を JavaScript 変数名

次を確認します。 クリーンテキスト および 小文字を強制 options

ライブラリに保存 ​をクリックします。

クリック データ要素 左のナビゲーション

データ要素を追加 ​をクリックします。

データ要素に「Product Id」と名前を付けます。

データ要素の種類／JavaScript 変数 ​を選択します。

用途 digitalData.product.0.productInfo.sku を JavaScript 変数名

次を確認します。 クリーンテキスト および 小文字を強制 options

ライブラリに保存 ​をクリックします。

拡張機能／カタログページに移動します。

アドビコンサルテングサービスの Adobe Analytics Product String 拡張機能を探し、インストール ​をクリックします。

しばらく時間をかけ、手順を読んでください。

ライブラリに保存 ​をクリックします。

次に移動： ルール セクションを開き、 ルールを追加

ルール名を設定します。Product Details - DOM Ready - 40

イベント／追加 ​をクリックして、Event Configuration 画面を開きます。

イベントタイプ／DOM Ready ​を選択します。

順序 を「40」に設定し、「Analytics／ビーコンを送信」アクションを含むルールの​ 前に ​ルールが実行されるようにします。

変更を保存 ​をクリックします。

条件 ​で、 して、Condition Configuration 画面を開きます。

1. 条件タイプ／値の比較 ​を選択します。

2. データ要素ピッカーを使用して、最初のフィールドで「Page Type」を選択します。

3. 比較演算子ドロップダウンで「次を含む」を選択します。

4. 次のフィールドで、product-page を入力します（PDPのデータレイヤーから取り出したページタイプ値の一意の部分）。

5. 変更を保存 ​をクリックします。

   

「アクション」の下の をクリックして、新しいアクションを追加します。

拡張機能／Adobe Analytics 製品文字列 ​を選択します。

アクションタイプ／s.products を設定 ​を選択します。

「Analytics E コマースイベント」セクションで、prodView を選択します。

「製品データのデータレイヤー変数」セクションで、データ要素ピッカーを使用して Product Id データ要素を選択します。

変更を保存 ​をクリックします。

「アクション」の下の をクリックして、新しいアクションを追加します。

拡張機能／Adobe Analytics を選択します。

アクションタイプ／変数の設定 ​を選択します。

eVar1／設定 ​を選択し、product detail page を入力します。

イベント 1 を設定し、オプションの値は空白のまま残します。

「イベント」の下の「その他を追加」ボタンをクリックします。

prodView イベントを設定し、オプションの値は空白のまま残します。

変更を保存 ​をクリックします。

「ライブラリに保存してビルド」をクリックします。

Chrome ブラウザーで Luma サイトを開きます。

製品の詳細ページに移動します。

デバッガーアイコン をクリックして、Adobe Experience Cloud デバッガー ​を開きます。

「Analytics」タブをクリックします。

レポートスイートを展開します。

製品詳細変数がデバッガーに表示されています。eVar1 は「製品詳細ページ」に設定されており、Events 変数は「event1」および「prodView」に設定されています。製品変数は表示している製品の製品 ID とともに設定されています。ページ名は引き続き Analytics 拡張機能によって設定されています。

次に移動： ルール セクションを開き、 ルールを追加

ルール名を設定します。Homepage - Featured Products enters Viewport

イベント／追加 ​をクリックして、Event Configuration 画面を開きます。

イベントタイプ／ビューポートに入る ​を選択します。表示されたフィールドに CSS セレクターを入力します。このセレクターは、ブラウザーにルールが表示されたときにルールをトリガーする必要のあるページ上の項目を識別します。

Luma のホームページに戻り、「おすすめ製品」セクションまで下にスクロールします。

「おすすめ製品」タイトルとこのセクションの項目の間のスペースを右クリックし、「 」を選択します。 Inspect を選択します。 探しているものはすぐ近くにあります。

おそらく選択したセクションのすぐ下に、class="we-productgrid aem-GridColumn aem-GridColumn--default--12"を含む div があるはずです。この要素を見つけます。

要素を右クリックして、コピー／コピーセレクター ​を選択します。

タグに戻り、この値をクリップボードからラベル付きのフィールドに貼り付けます Elements matching the CSS selector.

1. CSS セレクターの識別方法はユーザーが決定します。この方法は、ページ上で特定の変更をおこなうと、このセレクターが壊れる場合があるので、少し脆弱です。タグで任意の CSS セレクターを使用する場合は、この点を考慮してください。

変更を保存 ​をクリックします。

「条件」で、 をクリックして、新しい条件を追加します。

条件タイプ／値の比較 ​を選択します。

データ要素ピッカーを使用して、最初のフィールドで「Page Name」を選択します。

比較演算子ドロップダウンで「等しい」を選択します。

次のフィールドで、content:luma:us:en と入力します（これは、データレイヤーから取り込んだホームページのページ名です。このルールは、ホームページ上でのみ実行する必要があります）。

変更を保存 ​をクリックします。

「アクション」の下の をクリックして、新しいアクションを追加します。

拡張機能／Adobe Analytics を選択します。

アクションタイプ／変数の設定 ​を選択します。

eVar3 を Home Page - Featured Products に設定します。

prop3 を Home Page - Featured Products に設定します。

Events 変数を event3 に設定します。

変更を保存 ​をクリックします。

「アクション」の下の をクリックして、新しいアクションを追加します。

拡張機能／Adobe Analytics を選択します。

アクションタイプ／ビーコンを送信 ​を選択します。

を選択します。 s.tl() トラッキングオプション

リンク名 ​フィールドに、「Scrolled down to Featured Products」と入力します。この値は、Analytics のカスタムリンクレポートに配置されます。

変更を保存 ​をクリックします。

「ライブラリに保存してビルド」をクリックします。

Chrome ブラウザーで Lumaサイトを開き、ホームページの先頭に来ていることを確認します。

デバッガーアイコン 、Adobe Experience Cloud デバッガーを開きます。

「Analytics」タブをクリックします。

レポートスイートのヒットを展開します。

ホームページの通常のページビューヒットにページ名などが付いています。（ただし、eVar3 や prop3 には何も含まれません）。

デバッガーを開いたまま、「おすすめ製品」セクションが表示されるまで、サイトを下にスクロールします。

デバッガーを再度表示すると、別の Analytics ヒットが表示されるはずです。このヒットには、設定した s.tl() ヒットに関連付けられたパラメーターが含まれている必要があります。すなわち、

1. LinkType = "link_o" となります（これは、ヒットは、ページビューヒットではなく、カスタムリンクヒットであることを意味します）。

2. LinkName = "Scrolled down to Featured Products"

3. prop3 = "Home Page - Featured Products"

4. eVar3 = "Home Page - Featured Products"

5. Events = "event3"

   

拡張機能／インストール済み ​に移動します。

Adobe Analytics 拡張機能で​ 設定 ​をクリックします。

ライブラリ管理 ​で、「Make tracker globally accessible」とラベル付けされたボックスを選択します。ヘルプバブルに表示されるように、トラッカーは、window.s の下でグローバルにスコープされるので、顧客の JavaScript で参照する際に重要です。

Analytics 拡張機能を使用している間に、下にスクロールして「Configure Tracker Using Custom Code.」セクションを展開します。

エディターを開く ​をクリックします。

コードエディターに次のコードを貼り付けます。

/* Plugin Config */
s.usePlugins=true
s.doPlugins=function(s) {
/* Add calls to plugins here */
}

次の手順で使用するので、このウィンドウを開いておきます。

次のコードをコピーします。

/* Adobe Consulting Plugin: getValOnce v2.01 */
s.getValOnce=function(vtc,cn,et,ep){if(vtc&&(cn=cn||"s_gvo",et=et||0,ep="m"===ep?6E4:864E5,vtc!==this.c_r(cn))){var e=new Date;e.setTime(e.getTime()+et*ep);this.c_w(cn,vtc,0===et?0:e);return vtc}return""};

Analytics 拡張機能のコードウィンドウ（まだ開いていない場合は、前の手順に従って再度開きます）にペーストします。doPlugins 関数の下に（関数の内部ではなく）完全に ​にペーストします。

次のコードをコピーします。

s.campaign = s.Util.getQueryParam("cid");

doPlugins 関数に貼り付けます。これにより、現在のページ URL で cid というパラメーターを探し、s.campaign 変数に配置します。

次のコードをコピーして、getQueryParam への呼び出しの下に張り付け、getValOnce 関数を呼び出します。

s.campaign=s.getValOnce(s.campaign,'s_cmp',30);

このコードを使用すると、同じ値が連続した 30 日間に 2 回以上送信されないようにすることができます（必要に応じてこのコードをカスタマイズする方法については、ドキュメントを参照してください）。

コードウィンドウを保存します。

「ライブラリに保存してビルド」をクリックします。

Chrome ブラウザーで Luma サイトを開きます。

デバッガーアイコン をクリックして、Adobe Experience Cloud デバッガー ​を開きます。

「Analytics」タブをクリックします。

レポートスイートを展開します。

Analytics ヒットには Campaign 変数はありません。

デバッガーを開いたまま Luma サイトに戻り、?cid=1234 を URL に追加してから、Enter を押してそのクエリー文字列を含むページを更新します。

デバッガーを選択し、Campaign 変数が 1234 に設定された 2 回目の Analytics リクエストがあることを確認します。

クエリー文字列を URL 内に残したまま、戻って Luma ページをもう一度更新します。

デバッガーで次のヒットをチェックすると、Campaign 変数が存在​ しない ​はずです。getValOnce プラグインは、重複がなく、別の人がキャンペーントラッキングコードから来たように見えないように確認しているからです。

ボーナス：クエリー文字列内の cid パラメーターの値を変更することで、これを何度もテストできます。Campaign 変数は、値が含まれるページを 初めて 実行したときにのみ表示される必要があります。デバッガーに Campaign 値が表示されていない場合は、URL のクエリー文字列にある cid の値を変更し、Enter を押して、デバッガーで再度表示します。