Adobe Analytics の追加
このレッスンでは、Adobe Analytics 拡張機能を実装し、Adobe Analytics にデータを送信するルールを作成します。
Adobe Analytics は、顧客像を把握し、顧客インテリジェンスを活用してビジネスを導く力をユーザーに提供する、業界最先端のソリューションです。
- platform launch(クライアント側)が tags
- platform launchサーバー側が event forwarding
- エッジ設定が datastreams
学習内容
このレッスンを最後まで学習すると、以下の内容を習得できます。
- Adobe Analytics 拡張機能の追加
- 拡張機能を使用したグローバル変数の設定
- ページビュービーコンの追加
- ルールを使用した変数の追加
- クリック追跡およびその他のイベントベースのビーコンの追加
- Analytics プラグインの追加
Analytics のタグには、多くの機能を実装できます。 このレッスンは完全なものではありませんが、お客様独自のサイトで実装するために必要となる、主な技術の概要について明確に説明します。
前提条件
でのレッスンを既に完了しているはずです。 タグの設定 および ID サービスを追加する.
さらに、1 つ以上のレポートスイート ID とトラッキングサーバーが必要です。このチュートリアルで使用できるテスト/開発用レポートトスイートがない場合は、作成してください。方法が分からない場合は、ドキュメントを参照してください。トラッキングサーバーは、現在の実装、アドビコンサルタントまたはカスタマーケア担当者から取得できます。
Analytics 拡張機能の追加
Analytics 拡張機能は、次の 2 つの主要部分で構成されます。
-
拡張機能設定。コア AppMeasurement.js library 設定を管理し、グローバル変数を設定できます。
-
次の操作を実行するルールアクション:
- Set Variables
- Clear Variables
- Analytics ビーコンの送信
Analytics 拡張機能を追加するには、以下を実行します。
-
拡張機能/カタログ に移動します。
-
Adobe Analytics 拡張機能を検索します。
-
インストール をクリックします。
-
の下 ライブラリ管理/レポートスイート」で、各タグ環境で使用するレポートスイート id を入力します。 ユーザーがAdobe Analyticsにアクセスできる場合は、ボックスに入力し始めると、すべてのレポートスイートのリストが事前に入力されて表示されます。 (このチュートリアルでは、すべての環境に対して 1 つのレポートスイートを使用しても構いませんが、実際の環境では、次の画像のように別々のレポートスイートを使用する必要があります)。
note tip TIP ライブラリの管理設定では私に代わってライブラリを管理するオプションを使用すると、 AppMeasurement.js
ライブラリを最新の状態に維持しやすくなります。 -
の下 一般/トラッキングサーバーに設定し、トラッキングサーバー ( 例:
tmd.sc.omtrdc.net
. サイトがhttps://
に対応している場合は、SSL トラッキングサーバーを入力します。 -
内 「グローバル変数」セクションの下 追加設定、 ページ名 変数を
Page Name
データ要素。 をクリックしてモーダルを開き、ページのPage Name
データ要素を選択します。 -
ライブラリに保存 をクリックします。
ページビュービーコンの送信
次に、Analytics ビーコンを起動するルールを作成します。このルールは、拡張機能設定で設定されたページ名変数を送信します。
「All Pages - Library Loaded」ルールを データ要素、ルールおよびライブラリの追加 このチュートリアルのレッスン。タグライブラリが読み込まれる際に、各ページでトリガーされます。 あなた cound このルールを Analytics にも使用しますが、この設定では、Analytics ビーコンで使用されるすべてのデータレイヤー属性を、タグ埋め込みコードの前に定義する必要があります。 データ収集をより柔軟に実行できるようにするには、「DOM Ready」でトリガーして Analytics ビーコンを起動する、新しい「all pages」ルールを作成します。
ページビュービーコンを送信するには、以下を実行します。
-
次に移動: ルール セクションを開き、 ルールを追加
-
ルール名を設定します。
All Pages - DOM Ready
-
イベント/追加 をクリックして、
Event Configuration
画面を開きます。 -
イベントタイプ/DOM Ready を選択します(ルールの順序は「50」です)。
-
変更を保存 をクリックします。
-
「アクション」の下の をクリックして、新しいアクションを追加します。
-
拡張機能/Adobe Analytics を選択します。
-
アクションタイプ/ビーコンを送信 を選択します。
-
トラッキングは
s.t()
に設定したままにします。クリックイベントルールでs.tl()
を呼び出す場合は、「ビーコンを送信」アクションでおこなうことも使用できます。 -
「変更を保存」ボタンをクリックします。
-
「ライブラリに保存してビルド」をクリックします。
ページビュービーコンの検証
ビーコンを送信するためのルールを作成したら、Experience Cloud デバッガーでそのリクエストを表示できるようになります。
ルールによる変数の追加
Analytics 拡張機能を設定する際、拡張機能設定に pageName
変数を入力しました。タグ埋め込みコードが読み込まれる前に、ページ上で値を使用できる場合、これは eVar や prop などの他のグローバル変数を入力するのに適した場所です。
変数やイベントを設定する場所は、Set Variables
アクションを使用するルール内でより柔軟に指定できます。ルールを使用すると、異なる条件下で異なる Analytics 変数やイベントを設定できます。例えば、prodView
は製品詳細ページでのみ、purchase
イベントは注文確認ページでのみ設定できます。ここでは、ルールを使用して変数を設定する方法について説明します。
使用例
製品の詳細ページ(PDP)は、小売サイトでのデータ収集に重要なポイントです。通常は、Analytics に対し、製品の表示が発生し、どの製品が閲覧されたかを登録します。これは、顧客に人気のある製品を把握するのに役立ちます。メディアサイトでは、記事またはビデオページで、このセクションで説明する手法と似たトラッキングテクニックを使用できます。製品の詳細ページを読み込む際、その値を「ページタイプ」eVar
に入力し、イベントと製品 ID を設定することができます。これにより、以下の内容を分析で確認できるようになります。
- 製品の詳細ページは何回読み込まれたか。
- どの製品が何回表示されたか。
- その他の要因(キャンペーン、検索など)が、ユーザーが読み込む PDP にどの程度影響しているか。
ページタイプのデータ要素の作成
まずどのページが製品の詳細ページであるかを特定する必要があります。これには、データ要素を使用します。
ページタイプのデータ要素を作成するには、以下を実行します。
-
クリック データ要素 左のナビゲーション
-
データ要素を追加 をクリックします。
-
データ要素に「
Page Type
」と名前を付けます。 -
データ要素の種類/JavaScript 変数 を選択します。
-
用途
digitalData.page.category.type
を JavaScript 変数名 -
次を確認します。 クリーンテキスト および 小文字を強制 options
-
ライブラリに保存 をクリックします。
製品 ID のデータ要素の作成
次に、現在の製品詳細ページの製品 ID をデータ要素と共に収集します。
製品 ID のデータ要素を作成するには、以下を実行します。
-
クリック データ要素 左のナビゲーション
-
データ要素を追加 をクリックします。
-
データ要素に「
Product Id
」と名前を付けます。 -
データ要素の種類/JavaScript 変数 を選択します。
-
用途
digitalData.product.0.productInfo.sku
を JavaScript 変数名 -
次を確認します。 クリーンテキスト および 小文字を強制 options
-
ライブラリに保存 をクリックします。
Adobe Analytics 製品文字列拡張機能の追加
Adobe Analytics の実装に詳しい方は、products 変数について既に詳しいと思われます。製品変数には特定の構文があり、コンテキストに応じて使用方法は若干異なります。製品変数をタグで生成しやすくするために、タグ拡張マーケットプレイスで、さらに 3 つの拡張機能が作成されました。 この節では、製品の詳細ページで使用できるよう、アドビコンサルティングによって作成された拡張機能を追加します。
Adobe Analytics Product String
extension を追加するには、以下を実行します。
-
拡張機能/カタログページに移動します。
-
アドビコンサルテングサービスの
Adobe Analytics Product String
拡張機能を探し、インストール をクリックします。
-
しばらく時間をかけ、手順を読んでください。
-
ライブラリに保存 をクリックします。
製品の詳細ページ用のルールの作成
次に、新しいデータ要素と拡張機能を使用して、製品の詳細ページルールを作成します。この機能の場合は、「DOM Ready」によってトリガーされる別のページ読み込みルールを作成します。ただし、製品の詳細ページでのみ実行するよう条件を使用しビーコンを送信するルールより 前に 実行されるように順序を設定します。
製品詳細ページのルールを作成するには、以下を実行します。
-
次に移動: ルール セクションを開き、 ルールを追加
-
ルール名を設定します。
Product Details - DOM Ready - 40
-
イベント/追加 をクリックして、
Event Configuration
画面を開きます。 -
イベントタイプ/DOM Ready を選択します。
-
順序 を「40」に設定し、「Analytics/ビーコンを送信」アクションを含むルールの 前に ルールが実行されるようにします。
-
変更を保存 をクリックします。
-
条件 で、 して、
Condition Configuration
画面を開きます。
-
条件タイプ/値の比較 を選択します。
-
データ要素ピッカーを使用して、最初のフィールドで「
Page Type
」を選択します。 -
比較演算子ドロップダウンで「次を含む」を選択します。
-
次のフィールドで、
product-page
を入力します(PDPのデータレイヤーから取り出したページタイプ値の一意の部分)。 -
変更を保存 をクリックします。
-
-
「アクション」の下の をクリックして、新しいアクションを追加します。
-
拡張機能/Adobe Analytics 製品文字列 を選択します。
-
アクションタイプ/s.products を設定 を選択します。
-
「Analytics E コマースイベント」セクションで、prodView を選択します。
-
「製品データのデータレイヤー変数」セクションで、データ要素ピッカーを使用して
Product Id
データ要素を選択します。 -
変更を保存 をクリックします。
-
「アクション」の下の をクリックして、新しいアクションを追加します。
-
拡張機能/Adobe Analytics を選択します。
-
アクションタイプ/変数の設定 を選択します。
-
eVar1/設定 を選択し、
product detail page
を入力します。 -
イベント 1 を設定し、オプションの値は空白のまま残します。
-
「イベント」の下の「その他を追加」ボタンをクリックします。
-
prodView イベントを設定し、オプションの値は空白のまま残します。
-
変更を保存 をクリックします。
-
「ライブラリに保存してビルド」をクリックします。
製品の詳細ページデータの検証
ビーコンの送信前に変数を設定するルールを作成しました。これで、Experience Cloud デバッガーでヒット内のデータを表示できるようになります。
製品詳細ページデータを検証するには、以下を実行します。
-
Chrome ブラウザーで Luma サイトを開きます。
-
製品の詳細ページに移動します。
-
デバッガーアイコン をクリックして、Adobe Experience Cloud デバッガー を開きます。
-
「Analytics」タブをクリックします。
-
レポートスイートを展開します。
-
製品詳細変数がデバッガーに表示されています。
eVar1
は「製品詳細ページ」に設定されており、Events
変数は「event1」および「prodView」に設定されています。製品変数は表示している製品の製品 ID とともに設定されています。ページ名は引き続き Analytics 拡張機能によって設定されています。
トラックリンクビーコンの送信
ページが読み込まれると、通常、s.t()
関数によってトリガーされたページ読み込みビーコンが実行されます。これにより、pageName
変数に表示されるページの page view
指標が自動的に増分されます。
しかし、実行するアクションがページビューよりも小さい、またはページビューとは異なるという理由で、サイトのページビュー数を増加させたくない場合があります。この場合は、s.tl()
関数(一般的にトラックリンクリクエストと呼ばれます)を使用します。トラックリンクリクエストと呼ばれていますが、必ずしもリンクのクリックでトリガーする訳ではありません。次を使用してトリガーできます: 任意 タグのルールビルダーで使用できるイベント(独自のカスタム JavaScript を含む)。
このチュートリアルでは、最も優れた JavaScript イベントの 1 つである s.tl()
イベントを使用して Enters Viewport
の呼び出しをトリガーします。
ユースケース
この使用例では、ユーザーが Luma のホームページを下にスクロールして、 注目製品 」セクションに含める必要があります。 ユーザーがそのセクションを閲覧できるかどうかに関して、社内で不和があるため、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
.- 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() ヒットに関連付けられたパラメーターが含まれている必要があります。すなわち、
-
LinkType = "link_o"
となります(これは、ヒットは、ページビューヒットではなく、カスタムリンクヒットであることを意味します)。 -
LinkName = "Scrolled down to Featured Products"
-
prop3 = "Home Page - Featured Products"
-
eVar3 = "Home Page - Featured Products"
-
Events = "event3"
-
プラグインの追加
プラグインは、実装することで、製品に組み込まれていない関数を実行できる JavaScript コードです。プラグインは、ユーザー、他のアドビの顧客やパートナー、またはアドビコンサルティングによって作成できます。
プラグインを実装するには、基本的には次の 3 つの手順があります。
- doPlugins 関数を含める(この関数では、プラグインが参照されます)。
- プラグインのメイン関数コードを追加する。
- 関数を呼び出し、変数などを設定するコードを含める。
Analytics オブジェクトにグローバルでアクセスできるようにする
doPlugins 関数(以下)を追加してプラグインを使用する場合は、チェックボックスをオンにして、Analytics 実装でグローバルに Analytics の「s」オブジェクトを使用できるようにする必要があります。
-
拡張機能/インストール済み に移動します。
-
Adobe Analytics 拡張機能で 設定 をクリックします。
-
ライブラリ管理 で、「
Make tracker globally accessible
」とラベル付けされたボックスを選択します。ヘルプバブルに表示されるように、トラッカーは、window.s の下でグローバルにスコープされるので、顧客の JavaScript で参照する際に重要です。
doPlugins 関数を含める
プラグインを追加するには、doPlugins と呼ばれる関数を追加する必要があります。この関数は、デフォルトでは追加されませんが、追加されると AppMeasurement ライブラリによって処理され、Adobe Analytics にヒットが送信される際に最後に呼び出されます。したがって、この関数を使用すると、JavaScript を実行して、この方法を設定するよりも簡単に変数を設定できます。
-
Analytics 拡張機能を使用している間に、下にスクロールして「
Configure Tracker Using Custom Code.
」セクションを展開します。 -
エディターを開く をクリックします。
-
コードエディターに次のコードを貼り付けます。
code language-javascript /* Plugin Config */ s.usePlugins=true s.doPlugins=function(s) { /* Add calls to plugins here */ }
-
次の手順で使用するので、このウィンドウを開いておきます。
プラグインに関数コードを追加します。
このコードでは 2 つのプラグインを呼び出しますが、そのうちの 1 つは AppMeasurement ライブラリに組み込まれているので、呼び出す関数を追加する必要はありません。ただし、2 番目の関数については、関数コードを追加する必要があります。この関数は、getValOnce() と呼ばれます。
getValOnce() プラグイン
このプラグインの目的は、訪問者がページを更新したとき、またはブラウザーの戻るボタンを使用して値が設定されたページに戻ったときに、コード内で誤って値が複製されるのを防ぐことです。このレッスンでは、clickthrough
イベントの重複を防ぐためにこれを使用します。
このプラグインのコードは Analytics のドキュメントで入手できますが、簡単にコピーして貼り付けられるよう、ここに含まれています。
-
次のコードをコピーします。
code language-javascript /* 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 関数の下に(関数の内部ではなく)完全に にペーストします。
これで、このプラグインを doPlugins 内から呼び出せるようになりました。
doPlugins 内からのプラグインの呼び出し
これでコードが配置され、参照できるようになったので、doPlugins 関数内でプラグインを呼び出すことができます。
まず、AppMeasurement ライブラリに組み込まれているプラグイン(ユーティリティ)を呼び出します。これは、s.Util.getQueryParam
と呼ばれ、s オブジェクトの一部であるため、ビルトインユーティリティであり、URL のクエリー文字列のパラメーターに基づいて値を取得します。
-
次のコードをコピーします。
code language-javascript s.campaign = s.Util.getQueryParam("cid");
-
doPlugins 関数に貼り付けます。これにより、現在のページ URL で
cid
というパラメーターを探し、s.campaign 変数に配置します。 -
次のコードをコピーして、getQueryParam への呼び出しの下に張り付け、getValOnce 関数を呼び出します。
code language-javascript 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 を押して、デバッガーで再度表示します。note note NOTE 実際には、 Analytics 拡張機能の設定など、URL のクエリー文字列からパラメーターを取得する方法はいくつかあります。ただし、これら以外のプラグインオプションでは、getValOnce プラグインを使用してここでおこなった操作と同じように、不要な重複を停止する機能は提供していません。これは著者が気に入っている方法ですが、どの方法がお客様やお客様のニーズに最適かは、お客様が判断する必要があります。
お疲れ様です。Analytics のレッスンが完了しました。もちろん、Analytics の実装を強化するためにできることは他にも多数ありますが、できれば残りのニーズに対処するためのコアスキルがいくつか得られたと思います。
次:「Adobe Audience Manager の追加」>