サイトファイル内のHTML要素へのイベント(ボタン押下)を、KARTEアクション内で受け取る方法

下記の<したいこと>をご確認いただいたうえで、質問にご回答いただけますでしょうか。

<したいこと>
サイトファイル内のHTML要素へのイベント(ボタン押下)を、
KARTEアクション内で受け取り、処理(条件分岐など)し、
KARTEアクション内のHTML要素の表示(レコメンド内容)を出し分ける。

<質問事項>
上記したいことを実現する方法として、
例えば、カスタムイベントタグで、サイトファイル内のHTML要素へのイベントをキャッチし、
KARTEアクションで受け取る(タグで取得した値をスクリプトで利用する)方法はございますでしょうか。
もしくは、上記実現する方法が他にあれば、ご教示頂けますと幸いです。
ご確認の程、何卒宜しくお願い致します。

同じページ内でのデータのやり取りで完結する出来事であれば、

以下のようなコードで
アクションから「ボタン押下時のデータ取得」をしてしまって
レコメンドの表示を出し分けてしまうというのもありかもしれませんね。

jquery('#button').click(function(){
 ...
})

または、一度カスタムイベントという形でKARTEにデータを送信しつつ、
「ユーザー情報変数で戻す」というもありそうです

ボタン押下時に何を連携するのか、また、出し分けのロジックなどにも寄って変わってきそうだなと思いました。

@masaaki.akiba

回答ありがとうございます。

頂いた回答内容は、ボタンがKARTEアクション内のHTMLに記載した要素であることを想定しておりますでしょうか?

先ほどの質問の補足として、
「サイトファイル内のHTML要素へのイベント(ボタン押下)」とは、
「サイトページ上のKARTEアクションの制御外(KARTEアクションに記載していない)のHTML要素へのイベント」を意図し、
そのイベントをKARTEアクション内で受け取る方法を確認したいです。

ボタン押下時に何を連携するのか、また、出し分けのロジックなどにも寄って変わってきそうだなと思いました。

→「webサイト上(KARTE制御外)にボタンが複数存在し(例:カテゴリA・カテゴリB・カテゴリC)、
そのボタンが押された際にボタンに設定したidの値(この値がカテゴリ名かは未定)をKARTEアクションに連携し(←ここの実現方法がわかりません。)、そのidの値に応じたカテゴリ名と同一のフィールドを持つレコードをKARTEアクション内で抽出する想定です。

ご確認の程何卒宜しくお願い致します。

https://javascript.programmer-reference.com/js-event-onclick/
この辺の記事が参考になりそうです!

要するにjavascriptで、KARTEで配信するdom、すでにサイト上にあるdomに関わらず、クリックしたことを取得し、何かの処理を行う方法、ということかと思います。

widget.showというメソッドを叩くと初めて接客が表示されるのですが、そのあたりについても理解いただくと良いかもしれません。

ただしアクション内で接客の表示をコントロールした場合、ABてすとの結果がずれる可能性がある点ご注意ください!

回答ありがとうございます。

要するにjavascriptで、KARTEで配信するdom、すでにサイト上にあるdomに関わらず、クリックしたことを取得し、何かの処理を行う方法、ということかと思います。

→仰っていただいた通りの認識です。

頂いた記事の方法では、
既存のwebサイト上の要素(KARTE制御外)へのイベントをKARTEアクションで受け取るために、
既存のサイトファイルのHTML要素に手を加える(<div krt-on:click="customclick"></div>の様なタグを入れる)ことになりますか?
もしそうであれば、既存のサイトファイルには手を加えない形の方法をご教示頂けますと幸いです。

認識違いましたらご指摘ください。

何卒宜しくお願い致します。

@akira-ichikawa
こちらはKARTEの仕様というよりはJavaScriptの仕様ですが、KARTEのアクションで配信したスクリプトからdocument.querySelector()などを使って対象要素を取得しaddEventListener()を実行することで、サイト側のHTMLを改修することなくサイト側のevent発生時にアクションのスクリプト内で定義した関数を実行させることは可能だと思います。


ただし、対象要素を確実にJSから指定できるかどうかについては、サイト側のDOM構造に依存します。

akibaさんが書いているjquery('#button').click(function(){})は、そのjqueryを用いた記法です。

そのボタンが押された際に ボタンに設定したidの値 (この値がカテゴリ名かは未定)をKARTEアクションに連携し(←ここの実現方法がわかりません。)、そのidの値に応じたカテゴリ名と同一のフィールドを持つレコードをKARTEアクション内で抽出する想定です。

「レコード」というのが何を指しているのか不明ですが、addEventListener()で登録する関数の引数にイベントが発生した要素の情報が入ってくるので、おそらくidの値もそこから取得できると思います。

1 Likes

@jumpei_ikegami
回答ありがとうございます!

KARTEのアクションで配信したスクリプトから document.querySelector() などを使って対象要素を取得し addEventListener() を実行することで、サイト側のHTMLを改修することなくサイト側のevent発生時にアクションのスクリプト内で定義した関数を実行させることは可能だと思います。

→こちら一度試してみます!

引き続き何卒宜しくお願いいたします。

1 Likes