レコメンド対象のサイトファイルに設置しているJavaScriptの処理を、接客アクションで読み込んだHTML要素に反映する方法

Open Q&A
1

現在、既存のサイト内に「埋め込みタグ」テンプレートを利用して、レコメンドの表示を試みています。
その際に、サイトに設置しているCSSファイルは、KARTEアクションのスクリプトで記述したHTMLの要素に反映されましたが、
サイトに設置しているJavaScriptの処理は、KARTEアクションのスクリプトで記述したHTMLの要素に反映されておりません。
JSファイルの読み込むタイミングとKARTEのレコメンドを読み込むタイミングが関係するかとも思いますが、
JSをKARTEアクションのスクリプトに記述する以外で、何か対処方法ございますでしょうか。
想定される原因と合わせて、ご教示頂けますでしょうか。
ご確認の程、何卒宜しくお願い致します。

2

おそらくですが、まさに「実行されるタイミング」の問題でしょうね。

KARTEの接客配信ですが、基本的にサイト上に設置されているJavascriptよりも後に実行されます。
結果、KARTEの接客サービスのHTMLが挿入されたときには、すでに実行後であるということかと思います。

JSをKARTEアクションのスクリプトに記述する以外で、何か対処方法ございますでしょうか。

KARTEがいつ実行されたかをフロントのScriptが検知することは難しいと思いますので・・
KARTEの接客サービスのJavaScript内でなんとかする必要はありそうです。

ただ、KARTEの接客サービスのJavaScriptからは、グローバルに定義された関数なども実行できますので、
例えばslick.jsなどのjQueryPluginをサイト上ですでに読んでいるとして、

window.$('hoge').slick({...})

みたいな感じで、KARTEのScript内で、上記のようなコード叩けば、
全部移植することなく実行することもできるかもですね。

若干工夫が必要そうです！

「いいね！」 1
3

@masaaki.akiba
ご返信ありがとうございます！
頂いた方法含め、再度検討してみます。

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

4

@masaaki.akiba

詳細な状況をお伝えできず申し訳ございませんが、
下記ご確認いただき、お気付きの点ございましたらご教示頂けますと幸いです。

下記の記事で、KARTE内でCSSを記載した場合に、指定した属性がKARTE独自のセレクターになるよう自動でプレフィックスが付与されることを確認しました。
https://support2.karte.io/note/note-action/1404/

特にKARTEでCSSを設定していない場合でも、
KARTEがレコメンドを埋め込む際に、先頭に以下のタグが付与されておりますが、
こちらが既存のサイトのJSやCSSのセレクターに影響することはございませんでしょうか。

<div class="karte-g _karte-g__****_">
    <div class="karte-widget" id="karte-*******">
        <style></style>
            <div class="karte-widget__backdrop"></div>
                <div class="karte-widget__container">
                    <div class="karte-widget__content" >
                        <div class="hoge">
                        ...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

下記の様にサイト上のJSを指定し、サイトに指定のJSを再読み込みできているのですが、処理が適用されていない状態です。

$(document).ready(function(){
var s = document.createElement('script');
s.setAttribute('src','/assets/js/hoge.js');
document.head.appendChild(s);
});

お手数お掛け致しますが、何かお気付きの点ございましたらご教示頂けますと幸いです。