1. タグの改修
・UGCセットの表示位置を「タグを埋め込んだ位置に表示」に設定し、タグを取得します。
・各種設定→タグ設定に表示されているLetroタグを取得します。
・Letroタグの改修
| ①1.で取得した位置表示タグ |
<div class="letroUgcsetGadget" data-contents="letro-gadget" data-
gadget-id="****"></div> |
| ②2.で取得したLetroタグの右記⻘の部分 |
<!-- Letro -->
<script>
window.__letroUgcGadget = window.__letroUgcGadget || {};
__letroUgcGadget.advertiser_id = ***;
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "
https://letro.jp/tags/js/letro.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'letro-jssdk'));
</script>
<script>
window.addEventListener('load', function() {
var id = 'letro-review-js';
var sid = 'letro-review-style';
if (document.getElementById(id)) {
return;
}
var ram = new Date().getTime();
var lrjs = document.createElement('script');
lrjs.id = id;
lrjs.src = '
https://letro.jp/tags/js/letro-review.js?v=' + ram;
var lrs = document.createElement('link');
lrs.id = sid;
lrs.rel = 'stylesheet';
lrs.href = '
https://letro.jp/tags/css/letro-review.css?v=' + ram;
document.body.appendChild(lrjs);
document.head.appendChild(lrs);
var ltag = document.createElement('div');
ltag.setAttribute('class', '__letro-review-tag');
ltag.setAttribute('data-ec-site-id', "**********");
document.body.appendChild(ltag);
});
</script>
<!-- End Letro -->
|
| ③3.タグを修正 |
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'letro-jssdk'));
■■ この部分に下記スクリプトを追加 ■■
</script>
<!— 追加スクリプト —>
const messages = document.getElementById('wc-message-groups');
messages.addEventListener('scroll', () => {
if (__letroUgcGadget.ugcSets.length > 0) {
__letroUgcGadget.ugcSets.forEach(ugc => {
ugc.checkScrollPos();
})
}
});
|
| 完成イメージ |
<div class="letroUgcsetGadget" data-contents="letro-gadget" data-gadget-
id="****"></div>
<script>
window.__letroUgcGadget = window.__letroUgcGadget || {};
__letroUgcGadget.advertiser_id = ***;
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "
https://letro.jp/tags/js/letro.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'letro-jssdk'));
$('.chat-left').has('.letroUgcsetGadget').addClass('chat-left-letro');
console.log('letro_bot_js');
const messages = document.getElementById('wc-message-groups');
messages.addEventListener('scroll', () => {
if (__letroUgcGadget.ugcSets.length > 0) {
__letroUgcGadget.ugcSets.forEach(ugc => {
ugc.checkScrollPos();
})
}
});
</script>
|
2. Botchanのシナリオに作成したタグの設置
3. 表示するURLパターンの設定
①Botchanのチャットボット上で、右クリックして「検証」
②表示された部分の上にある <iframe で始まる行を探す。
③3.[F2]をクリックして、下記⻩色部分がBotchanのURL。
こちらをUGCセットの「表示するページのURLパターン」に設定します。
4. カスタムCVの設置
・注文成功時のメッセージ内にカスタムCVを設置。
・リダイレクトなどが入ってる場合、CV計測前にリダイレクトしてしまう場合が
ある。リダイレクト前に「遅延1秒」を挿入する。
