KARTE Blocks専用のChrome拡張機能です。拡張機能を使うことで以下のことが実行可能です。

  • 配信前のプレビュー
    • Blocksタグ(builder.js)を配信する前に、管理画面の設定内容をもとに、実際のページ上でどのように書き換わるかをプレビューで確認することができます
    • ページに設定されているコンディションを手動で切り替えて書き換えをプレビューすることができます
  • エリア選択(CSSセレクタ取得)
    • 書き換えエリアの設定に必要となるCSSセレクタを、実際のページ上から簡単に取得できる
β版のため、今後仕様が変更される可能性があります。

インストール方法

プレビュー機能の使い方

  1. インストールしてポップアップを開き、プロジェクト設定をクリック

null

  1. KARTEのプロジェクトのAPIキーを設定して保存

null

  1. プレビュー用ツールバーを表示をクリックします

null

  1. このページで設定されている施策がプルダウンに表示されるので、プレビューしたい施策とパターンを選択すると、自動でリロードされて書き換え後の要素をプレビューできます

null

ブロック設定されていないページの場合は、プレビューできません。

null

要素選択(CSSセレクタ取得)の使い方

ポップアップを開いて「CSSセレクタを取得」アイコンをクリックするか、

null

右クリックしてコンテキストメニューから「CSSセレクタを取得」をクリックすると、

null

要素選択モードとなり、選択した要素をクリックするとクリップボードにCSSセレクタがコピーされます。

null

Blocksの管理画面→エリア追加時にコピーしたCSSセレクタを貼り付けてください。

null

ユーザーの属性によってDOMの構造が変わる場合(例えば会員ユーザー/非会員ユーザーでサイトの見え方が異なるなど)、拡張機能のCSSセレクタでは正しく設定できない可能性がございます。
その場合は、ID要素で指定するなどサイト構造の変更に依存しない形でエリアを指定いただくようお願いいたします。