「埋め込み」ウィジェットテンプレート(β版)について

埋め込みテンプレートとは?

ウィジェット型で、テンプレートの型が「埋め込み」のものは、
ページ内の任意のDOM要素に対して、ウィジェットのHTMLを、「置き換え」「前に挿入」「後ろに挿入」「子要素の先頭に挿入」「子要素の最後に挿入」する事ができます。
 
基本的にはHTMLが特定の場所に埋め込まれる事以外は、通常の接客サービスと変わらないため、
セグメントや配信ページなどを別途設定することで、ユーザーによって違う表示を出すといったような、ページ自体のパーソナライズ化が可能です。


注意事項

  • KARTEが対応しているブラウザのみで動作するため、対応外のブラウザでは埋め込みが動作しません。お客様に必ず見てほしい内容を埋め込む際は、対応ブラウザにご注意ください。
  • KARTEのタグは非同期型となっており、サイト上の描画が完了後(onload後)にKARTEタグが読みだされ、そのタイミングで画像差し替えが行われます。そのため、元の要素が表示されてからぱっと変わったり、サイト内の要素がガクッと落ちるような見え方(フラッシュ)になる場合があります。
  • 画像のサイズが異なる場合など、サイトの表記が崩れてしまう可能性があるので、必ずテスト配信をして、問題がないかをご確認の上で配信ください
  • CSSセレクターの指定を間違った場合、サイトに設置されている全ての画像を削除していまうなどの、非常に危険度の高い指定が可能になってしまいますので、十分注意してご利用下さい。

[強く推奨] 埋め込みたい要素・書き換えたい要素のデフォルトのものをサイト内に設置してください。

埋め込みたい内容が、「ユーザーに必ず見せたい要素」の場合は、必ずデフォルトの要素を設置し、「置き換え」る形をとってください。
 
理由:
  • 配信セグメントに該当しない場合や、配信時間外への対応
    KARTEの接客サービスは、ターゲット外のユーザー/時間では配信しません。管理画面上で条件や配信時間の設定を切り替えたり、配信を一次的に停止することも考えられるため、デフォルトを設定しておく必要があります。
 
  • ネットワークエラー対策
    imgタグのaltテキストと似ていますが、モバイルユーザーなどネットワークが安定せずタイムアウトするケースが考えられます。Karteのサーバー側で問題が起きているケースもありますが、その場合は http://status.karte.io を確認してください。
 
  • KARTEが動作しないブラウザ対策
    KARTEが動作しないブラウザは、埋め込み接客サービスは動作せず、何も表示されません。
 
  • 読み込まれるまでにタイムラグが存在するため
    KARTEのタグはサイトの読み込み時間に当たる影響をなくす「非同期型」での読込となっており、サイト上の描画が全て完了後、接客サービスが動作します。
    非同期型の説明についてはこちらのページを御覧ください。
    よって、サイト表示後、埋め込み接客サービスが表示されるまでに短いタイムラグが発生してしまう事があります。
 
 
 

フラッシュ対策について

埋め込み接客サービスは、KARTEが読み込まれた後に表示されるので、サイト読み込み後、少し時間が経ってから埋め込みが表示されることがあります。
これによりサイト閲覧時に要素のチラツキ(フラッシュ)を感じ、ユーザーの体験に悪影響を与える可能性があります。
 
対策案:
  • Javascriptや、画像のサイズを減らす対策によって、読込までの時間が短縮されます。
  • フラッシュが起きるタイミングで、ローディング中を表すトランジションを設定することで、ユーザーのストレスを軽減することが出来ます。下記のコードサンプルをご参考ください。
 
コードサンプル:
HTML
<div id="krt-wrapper" class="krt-hidden">
  <!-- 接客サービス一式のHTML -->
</div>
 
CSS
#krt-wrapper{
  opacity: 1
}
.krt-hidden {
  opacity:0.1 !important;
  filter:alpha(opacity=0.1) !important;
  background:none !important;
}
 
JavaScript
$(function (){ 
  setTimeout(function () {
    $("#_krt-wrapper__#{shorten_id}_").removeClass("_krt-hidden__#{shorten_id}_");
  }, 1000);
});
 
※ScriptでjQueryをONにして、サイト内でjQueryを活用可能な状態にする必要があります。


埋め込みテンプレートについて

テンプレートは現状開発中のため、非公開としております。
すぐにテンプレートをご利用になりたいお客様は担当までお問い合わせください。


「埋め込み」設定方法について

該当のテンプレートを選択すると、アクションを設定する画面の前に、下記のような「埋め込み設定」画面が追加されます。
各項目を設定後、適用して編集とすることで、プレビュー上で確認しながら接客サービスを作ることが可能です。

eaea7b7-_2017-08-03_17.37.37.png

 

設定項目 説明
対象ページURL

「対象ページURL」は、プレビュー画面をコントロールするもので、「このページで接客サービスが表示される」という設定のための表示ではないことに注意

配信ページの限定設定は、普通の接客サービスと同じく、「配信ページ」設定で行ってください。

埋め込み方法 「置き換え」「前に挿入」「後ろに挿入」「子要素の先頭に挿入」「子要素の最後に挿入」がお選びいただけます。
埋め込み先  

埋め込み先は、CSSのセレクターを指定するか、プレビュー画面から選択をクリックして、要素を選択してください。

プレビュー画面から選択した場合、正確なCSSセレクターが指定できない場合がありますのでお気をつけください。

 

一度設定した埋め込み設定を再度変更したい場合は、アクション編集画面の上部右上にある「編集」ボタンをおしてください。

9f66f0d-_2017-08-03_17.39.08.png