コンテキストイベント機能の概要はこちらの記事をご確認ください。

本記事では、コンテキストイベントのアイテム情報取得の設定方法と仕様を説明します。

本機能を利用するには、 「アイテム情報クローリング」 プラグインが必要です。
ご利用を希望の場合には、サポート担当までご連絡ください。
（注意） 本機能は開発途中のβ版の機能です。
今後、機能の内容・仕様が大幅に変わったり、機能自体の提供を終了する可能性があります。
機能自体が終了する場合にはあらかじめアナウンス致しますが、使用される際はご注意ください。

何ができる機能か

アイテム情報取得の設定を行うと、「閲覧イベント」「コンテキストイベント」のイベントデータに、どんなアイテムを閲覧したのか、どんなアイテムをカートに入れたのかという詳細な情報が付与されるようになります。

通常の閲覧イベント

"view": {
  "uri": {
    "url": "https://www.plaid.test.com/shop/item/A123456789",
  },
  "title": "マリンエナメルパンプス - プレイドドットテストコム",
}

アイテム情報取得の設定を行ったあとの閲覧イベント

"view": {
  "uri": {
    "url": "https://www.plaid.test.com/shop/item/A123456789",
  },
  "title": "マリンエナメルパンプス - プレイドドットテストコム",
  "item": {
    "item_id": "sk-0010",
    "name": "マリンエナメルパンプス",
    "price": １１９９９,
    "l_category_name": "シューズ＆バック",
    "s_category_name": "レディースシューズ",
  },
}

どうやって実現するのか

アイテムの情報は下記のようにWebページに表示されている値から取得します。
よって、設定では「アイテムIDやアイテム名などの値がWebページのどこに書かれているか」を指定することになります。
null

設定を始める

コンテキストイベント画面 > クローリング > [業界名(例：eコマース)]アイテム情報取得 で設定します。
null

計測ページ条件と情報を付与するイベントを指定する

アイテム情報を計測する対象ページはどこかと、どのイベントにデータを付与するかを指定します。

例えばアイテム詳細ページのURLが下記の場合には

https://www.plaid.test.com/shop/item/A123456789
https://www.plaid.test.com/shop/item/B999999999
…

https://www.plaid.test.com/shop/item/ までが常に同じなので前方一致を使って指定します。
null

情報を付与するイベントは、「閲覧」「コンテキストイベント」の両方を指定します。
既存の閲覧イベントの挙動を変えたくないなど対象を絞りたい場合は、計測したいイベントだけ指定します。
null

アイテムID取得方法の設定をする

設定画面には、アイテムの詳細情報の項目名が並んでいるので、これから１つ１つの項目について「Webページのどこから取得するか」を指定していきます。
null

最初にアイテムID取得方法を設定しましょう。

さまざまなサイトがありますが、アイテムIDがある場所は大きく次の3ケースのいずれかになると思います。
どれに当てはまるか確認し、設定してみてください。

(1) URLのパスにアイテムIDがある場合

URLのパスの一部にアイテムIDがあるケースです。
null

この場合は、「URLから正規表現で取得」を指定します。
null

正規表現部分には、URLのアイテムID部分を ([^/]+)に変換して記載します。

  • 元のURL： https://www.plaid.test.com/shop/item/A123456789
  • 取りたい値： A123456789
  • 記載する内容： https://www.plaid.test.com/shop/item/([^/]+)

null

(2) URLのクエリパラメータにアイテムIDがある場合

URLのクエリパラメータにアイテムIDがあるケースです。
null

この場合は「URLのクエリキーから取得」を指定します。
null

クエリキー名には、クエリパラメータのアイテムIDの左辺の文字列を記載します。

  • 元のURL： https://www.plaid.test.com/shop/category/shoes? item=A123456789&color=red
  • 取りたい値： A123456789
  • 記載する内容： item

null

(3) Webページ上にアイテムIDが表示されている場合

画面上にアイテムIDが存在しているケースです。
null

この場合は「CSSセレクターで取得」を指定します。
null

CSSセレクターには、対象の要素を特定するCSSセレクターを記載します。
一番簡単な方法としては、KARTE Action Viewer を利用して記載する方法があります。
設定画面の「詳しくはこちら」をクリックして利用方法をご確認ください。
KARTE Action Viewerで要素をクリックしたら、そのまま入力欄に貼り付けてください。
null

CSSセレクタの記述に慣れている場合は、KARTE Action Viewerを使わずにブラウザの開発者ツールで要素のidやclassを確認し、手動で記載しても問題ありません。要素が一意に特定できるように気をつけてください。
null
null

設定がうまくいっているか確かめる

正しく設定できているかどうかを簡単に確認するテストコードを使います。
設定を保存すると、設定確認画面に「テストコード」が表示されているので、これをコピーします。
null

アイテム情報があるページで、ブラウザのコンソールを開き、このコードを貼り付けると、意図通り取得できるかどうかが確認できます。
null

もしここで取得できていなければ、設定を見直します。
null

他の項目を設定する

アイテムIDの設定ができたら、順番に他の項目も設定していきます。

他の項目の場合でも、設定の考え方はアイテムIDと同じです。
まずその情報がどこにあるか（URLか、画面上か）を探し、場所に合わせて設定します。
以下に、取得方法の決め方と設定方法をまとめました。

取得方法の決め方と設定方法

  • 取りたい値がURLにある
    • URLのパスに含まれている → 「URLから正規表現で取得」
    • URLのクエリパラメータに含まれている → 「URLのクエリキーから取得」
  • 取りたい値が画面上にある
    • OGPで定義されている → 「OGPから取得」
    • OGPにはない → 「CSSセレクターで取得」
    • CSSセレクターじゃ取れない → 「XPathで取得」

(1) URLから正規表現で取得

取りたい値がURLのパスに含まれる時に使います。

null

正規表現部分には、URLのとりたい部分を ([^/]+)に変換して記載します。

  • 元のURL： https://www.plaid.test.com/shop/item/A123456789
  • 取りたい値： A123456789
  • 記載する内容： https://www.plaid.test.com/shop/item/([^/]+)

null

(2) URLのクエリキーから取得

取りたい値がURLのクエリパラメータに含まれる時に使います。
null

クエリキー名には、クエリパラメータのクエリキー（取りたい文字のの左辺の文字列）を記載します。

  • 元のURL： https://www.plaid.test.com/shop/category/shoes? item=A123456789&color=red
  • 取りたい値： A123456789
  • 記載する内容： item

null

(3) OGPから取得

取りたい値がOGP(OpenGraphProtcol)で定義されているときに使います。
アイテムURL と アイテム画像URL は、ogpで定義されているサイトが多いのでこちらを使ってください。
null

null

(4) CSSセレクターで取得

取りたい値が画面に表示されているときに使います。

CSSセレクターには、対象の要素を特定するCSSセレクターを記載します。

一番簡単な方法としては、KARTE Action Viewer を利用して記載する方法があります。
設定画面の「詳しくはこちら」をクリックして利用方法をご確認ください。
KARTE Action Viewerで要素をクリックしたら、そのまま入力欄に貼り付けてください。
null

CSSセレクタの記述に慣れている場合は、KARTE Action Viewerを使わずにブラウザの開発者ツールで要素のidやclassを確認し、手動で記載しても問題ありません。要素が一意に特定できるように気をつけてください。
null
null

要素のテキストを取得する場合は以上で終了です。
null

null

要素の属性の値を取得する場合は、属性名を指定します。
null

null

(5) XPathで取得

取りたい値が画面に表示されているときに使う（上級編）です。

取りたい値が画面上にはあっても、「項目の場所がページによって変動するので、階層で一意に特定できない」「XXXという文字列の隣の要素を取得する」のような、CSSセレクター記法では指定できないときに使います。

こちらは、ulタグ要素（クラスはtags) が複数並んでいる中で、文字列に#を含まないaタグ要素を取得する例です。
null

設定がPCサイトでもスマホサイトでも動作しているか確認する

一通り設定ができたら、最後に汎用的な設定になっているかを確認して終わりです！

設定を保存して5分くらい経過したら、確認画面の「計測チェック」を実行します。
※一定数のユーザーがサイトに来訪してから確認したいので5分としています。

null

全部の項目が「計測OK」になっていれば大丈夫です。
もし、「計測NG」の項目がある場合には、設定の修正もしくは追加を行います。
null

上記のケースでは、PCサイトでは計測できているけれどスマホサイトでは計測できていないようでした。
その場合には、アイテム情報取得設定を「追加」し、スマホサイトで取得できなかった項目だけ、追加で設定します。

null

Q&A

Q1:クローリングはサイトに負荷がかかりませんか？

A1： 一般的なボットによるクローリングは、サイトの全ページにボットがアクセスして情報を収集するので、サイトのサーバーへのアクセスが増え、負荷となります。
本機能では、ユーザーがサイトページを閲覧したときに、その情報をユーザーのブラウザ上で取得してイベントと一緒にKARTEに送っているため、サーバーへのアクセス数は増えず負荷がかかりません。
また、ブラウザ上での情報の取得自体も軽量な操作なので、ユーザーのブラウザの挙動が重たくなるといったこともありません。

Q2: 全ての項目が設定必須ですか？

A2： いいえ、該当する情報がサイトにない場合には何も設定しなくてかまいません。

Q3: アイテム情報のitem_idしか取得できないのですがどうしたらいいですか？

A3: 基本的に全てのコンテキストイベントに アイテム情報 が付加されますが、クリック系のイベントには下記の注意点があります。

  • 「ボタンクリック時のページのアイテム情報が取得できる」イベント
    • カートに入れる
    • お気に入りに追加
    • アイテム情報をチェック
  • 「ボタンクリック時の遷移先のページのアイテム情報(item_idのみ)が取得できる」イベント
    • アイテムクリック
    • レコメンドアイテムクリック
    • ランキングクリック