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変数名として使用

「テキストをクリーン」および「小文字を強制」オプションをオンにします

「ライブラリに保存」をクリックします

左側のナビゲーションで データ要素 をクリックします

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

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

データ要素タイプ/JavaScript変数 を選択します。

digitalData.product.0.productInfo.sku を JavaScript変数名として使用

「テキストをクリーン」および「小文字を強制」オプションをオンにします

「ライブラリに保存」をクリックします

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

Adobe Consulting サービスによって 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 と入力します

オプションの値は空白のままにして、event1 を設定します

「イベント」の下の「さらに追加」ボタンをクリックします

prodView イベントを設定します（オプションの値は空白のままにします）

「変更を保持」をクリックします

「ライブラリおよびビルドに保存」をクリックします

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

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

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

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

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

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

左側のナビゲーションの「ルール」セクションに移動し、「ルールを追加」をクリックします

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

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

Event Type > Enters Viewport を選択します。 表示されたフィールドに CSS セレクターを入力します。このセレクターは、ブラウザーにルールが表示されたときにルールをトリガーする必要のあるページ上の項目を識別します。

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

「FEATURED PRODUCTS」タイトルとこのセクションの項目の間のスペースを右クリックし、右クリックメニューから「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 キーを押して、デバッガーで再度表示します。