バナー(リンク+バナー画像)差し替えスクリプトは、ポップアップやオーバーレイのアクション配信ではなく、サイト上に表示されているリンク付きのバナーを指定して、別の画像に差し替えをすることができるテンプレートです。
AタグのCSSセレクターを入力して、リンク及び、リンク内の画像を差し替える形になります。
注意事項
- KARTEのタグは非同期型となっており、サイト上の描画が全て完了後にKARTEタグが読みだされ、そのタイミングで画像差し替えが行われます。
ですので、サイト上の読み込みに時間がかかる場合は表示にタイムラグがございます。要素の指定箇所に画像がある場合は、一度画像が表示され、その後に上書きされるような挙動になります。 - 画像のサイズが異なる場合など、サイトの表記が崩れてしまう可能性があるので、必ずテスト配信をして、問題がないかをご確認の上で配信ください。
- CSSセレクターの指定を間違った場合、サイトに設置されている全ての画像を削除していまうなどの、非常に危険度の高い指定が可能になってしまいますので、十分注意してご利用下さい。
利用するテンプレート
設定方法
「差し替え用リンクのjQueryセレクター」
差し替えを希望するAタグのCSSセレクタを入力します。
- 差し替え先のHTML例
<a href="https://karte.io" id="karte_link">
<img src="/img/banner/campaign.jpg" alt="キャンペーンバナー">
</a>
セレクタ
#karte_link
「差し替え先URL」
クリック時に遷移させたいリンク先URLを入力します。
「差し替え画像」
差し替え後の画像を登録します。
「差し替え画像サイズを調整する」
差し替え前後で画像サイズが異なる場合は、チェックします。
「横幅/高さ」
差し替え前後で画像サイズが異なる場合は、差し替え後のサイズを入力します。
「埋め込み画像のクリックトラッキング」
クリック時に「接客サービスをクリック」イベントを発生させたい場合、チェックします。