Adobe Analytics の追加

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

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

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 ​を開きます

デバッガーが前のレッスン ​で説明したように、your​開発環境にタグプロパティをマッピングしていることを確認してください

に表示されているタグ開発環境

クリックして「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準備​を選択します

ルールがAnalytics/ビーコンを送信アクションを含むルールを​ before ​実行するように、Order​を40に設定します

「変更を保持」をクリック

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

1. 条件タイプ/値比較​を選択

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

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

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

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

   

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

拡張機能/ Adobe Analytics Product String​を選択します

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

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

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

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

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

拡張機能/ Adobe Analytics​を選択します

アクションタイプ/変数を設定​を選択

eVar1/別名で設定​を選択し、product detail pageと入力します

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

「イベント」で、「別の」ボタンをクリックします

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

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

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

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

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

デバッガーアイコン を開いて​ Adobe Experience Cloud Debugger ​を開きます

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

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

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

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

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

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

イベントタイプ/ビューポートに入る​を選択します。 表示されたフィールドに 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」を選択します。

比較演算子ドロップダウンから​ Equals ​を選択します

次のフィールドで、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 Debuggerを開きます

「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拡張機能で、Configure​をクリックします

ライブラリ管理​で、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 Debugger ​を開きます

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

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

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

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

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

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

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

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