様々なタイプの編集、更新

グローバルメニューなど全ページ共通の内容を更新することはできますか？

できます。下記条件でページを登録してください。

  • 全ページを対象となるようにURL条件を設定する
  • 設定したページの優先度を一番高く設定する

ページ登録の方法についてはこちらをご確認ください。

スライダー/カルーセル形式の画像を編集できますか？

スライダー/カルーセルに関しては、基本的にブロックリスト画面からCSSセレクタを直接登録し、編集することを推奨としています。
（ページエディタ画面からも編集自体はできますが、対象の要素を正しく選択できないケースが多いため）

また、ブロックリストから登録、編集したとしても、スライダーで利用されているライブラリ、実装方法によっては正しく動作しない場合があります。　予めご了承ください。

設定方法

  • 更新したい画像をGoogle Developer Toolsで選択し、右クリック→「Copy Selector」を選択
  • ブロックリスト画面右上の「オリジナルブロックを登録」→「CSSセレクタを入力」からコピーしたCSSセレクタを貼り付け
  • ブロックを変更→カスタム作成を選択
  • 更新したい画像をGoogle Developer Toolsで選択し、右クリック→「Copy HTML」を選択
  • ブロック編集画面のHTMLにコピーしたHTMLを貼り付け後、任意の画像に更新、配信

注意点

  • スライダー/カルーセルによっては、登録したCSSセレクタの値が途中で変更される場合があります。（swiper.jsのライブラリを使っている場合など）
  • その場合は上記の方法ではなく、属性セレクター等を活用して対象のブロックを指定してください。
    • 例：画像のsrcやaltの値が一意に設定されている場合、下記のように指定することでCSSセレクタの値の変更に依存せずに配信が可能です。
      • img[src='srcに設定されている値を指定']
      • img[alt='altに設定されている値を指定']

iframeで埋め込んだ要素を編集できますか？

  • <iframe>タグのsrc属性に設定されたURLにBlocksタグ（builder.js）が設置されている場合はブロックとして扱うことができます。
    • <iframe>タグのsrc属性に設定されているページでBlocksタグ（builder.js）が設定されているかご確認ください。
    • Blocksタグ（builder.js）が埋め込まれている場合でも、元サイトとsrc属性で設定されているURLのドメインが異なる場合、ブロックとして扱うことはできません。（同一オリジンポリシーというセキュリティの仕様）

ポップアップやモーダルで表示されている箇所を編集できますか？

できます。ポップアップやモーダルが表示されたタイミングで編集したい要素を選択し、編集してください。

background-imageで設定されている画像を編集できますか？

できます。ページエディタにて背景→画像を選択し、任意の画像をアップロードしてください。

null

CSSスプライトで設定されている画像の編集できますか？

  • スプライト画像内で表示する画像位置をCSSで指定しているため、通常の画像更新と同様に更新することはできません。
  • 代わりに、ページエディタ画面→コードを編集する→CSSタブからCSSを記述することで更新が可能です。

擬似要素（::beforeや::after等で生成された要素）は編集できますか？

ページエディター内のプレビューからブロックを選択して編集しても、変更が反映されません。
コード編集から擬似要素を生成しているスタイルを変更したり、CSSの記述が必要です。

metaタグ（title, keywords, description等）の内容を編集できますか？

metaタグ（title, keywords, description等）に記述された内容をBlocksで書き換えることはできません。サイト側のソースを直接修正してください。

class属性などでブロックを登録して、同じページ内で複数の要素を一括してオリジナルブロックに登録できますか？

できません。 共通のclass属性などで複数の要素に当てはまる形でCSSセレクターを指定しても、ページ内で一番先に読み込まれる最初の要素がオリジナルブロックとして認識され、変更ブロックの配信はそのオリジナルブロックに対してのみ実行されます。

コンテンツ編集のための環境

ログインが必要なページでのプレビュー確認はできますか？

できます。お使いのChromeでページにログインした状態でプレビューを行ってください。

IP制限やベーシック認証が必要なサイトでもプレビュー確認はできますか？

できます。お使いのChromeでサイトにアクセスした状態でプレビューを行ってください。

スマホサイトでも編集できますか？

できます。ページエディタからSPのデバイスを選択することで、SPサイトをそのまま編集できます。

<script>タグをBlocks内で埋め込むことはできますか？

  • ページエディタ画面→「コード編集」→「Script」から、JSファイルを読み込むようなスクリプトを記述していただくことで読み込み自体は可能です。（「HTML」でscriptタグを使って呼び出すことはできません。）
  • KARTE Blocksでの書き換えが完了した後に、指定ブロックのscriptタグで記載されているJSを実行するよう制御しています
var s = document.createElement('script');
s.src = 'script srcの値を記述する';
s.type = 'text/javascript';
document.body.appendChild(s);

※上記はサンプルコードになります。このままコピー＆ペーストしても動きません。

  • scriptタグを読み込んだ後に何か処理を実行したい場合、setTimeoutなどのメソッドを記述する必要があります。ただし非同期で処理が実行されるため、画面のチラツキが発生する可能性があるので予めご認識ください。

画像を更新する際に、元の画像と違うサイズの画像を設定するとどうなりますか？

ページエディタ画面で画像サイズの変更を行うことができますので、サイズを変更して設定ください。元画像のサイズと異なる場合、表示崩れが起こるケースもございますので、事前にプレビューやテスト配信で表示内容を確認してください。

トラブルシューティング

「オリジナルブロック」が取得できないのはどのようなケースですか？

null

「サイトで選択ボタン」からブロックを登録した場合は、基本的にオリジナルブロックは取得されます。「CSSセレクタを入力」からブロックを登録し、かつ以下のようなケースに該当する場合、オリジナルブロックが取得できません。

  • ページにログインしないとアクセスできない/ページにベーシック認証が設定されている
  • ページ画面で複数ページ（商品詳細など）をまとめて一つのページとして指定している場合の、URLの設定が間違っている
    • 複数ページをまとめてページとして設定した場合、URLで設定したページのオリジナルブロックを取得します。
  • オリジナルブロック登録時にCSSセレクタの指定が間違っている
  • 登録したブロックが非同期で生成される
  • ユーザーエージェントによってPC/SPの出し分けを行っていて、SP用のCSSセレクタを指定した
  • WAF (Web Application Firewall)などの仕組みが入っていて、クローラーがアクセスできない

「オリジナルブロックを元に作成」が選択できない場合は、「カスタム作成」を選択した上で、下記の方法で元サイトから対象のHTMLをコピーして貼り付けてください。

  • Chrome DevToolsを開く（ブラウザで右クリック→「検証」をクリック）
  • 対象の要素を選択→右クリック「Copy」→「Copy outerHTML」をクリック

null

ブロックのスクリーンショットが表示されないのはどのようなケースですか？

オリジナルブロックとブロックでそれぞれ異なります。

オリジナルブロック

オリジナルブロックが取得できない場合、スクリーンショットも表示されません。オリジナルブロックが取得できないケースについてはこちらをご確認ください。また、オリジナルブロックが取得できた場合でも、「CSSセレクタから入力」でオリジナルブロックを登録した場合は、ブロックのスクリーンショットは取得できません。

ブロック

「エディタ画面で表示されている編集内容を元に、Google Chromeの拡張機能経由で撮る」という仕様のため、エディタ画面でページの内容がプレビューできない場合はスクリーンショットが取得できません。また、拡張経由でスクリーンショットを撮影する際の具体的な仕様は下記になります。

  • エディタ画面右上の「編集を終了」ボタンをクリックしたタイミングで、編集内容を元にスクリーンショットを撮影する
  • 「編集を終了」ボタンクリック時点で指定しているデバイスを元にスクリーンショットを撮影する

null

  • 編集した要素がプレビュー画面内に表示されていなくても、スクリーンショットは撮影される

ページエディタ画面が真っ白になり、ページが表示されません。

以下の場合、登録したページがページエディタ画面で表示されません。

  • 編集しているページがHTTPS対応されていない（URLの先頭がhttp://になっている）
    • Google Chromeの「混合コンテンツ（Mixed Contents）」に該当しプレビューが表示されません。登録しているページのHTTPS対応をご検討ください。
  • 存在していない、インターネット上に公開されていないURLを登録した
  • ブラウザで保存されているCookieのデータ量が多く、Bad Requestが返ってくる
    • ご利用ブラウザのCookieの削除をお願いします（できる限り全期間のデータ削除が好ましいです）

上記以外で、プレビューが表示されない場合はサポートまでお問い合わせください。

その他仕様

Blocksで書き換えた際に元サイトのソースコードも書き換わりますか？

元サイトのソースコードは書き換わりません。Blocksは、サイト上に描画されるHTMLをJavaScriptで差し替えることでコンテンツの書き換えを実現しています。
描画後のHTMLにはBlocksで書き換わった後のHTMLが表示されていますが、元サイトのソースコード自体が書き換わっているわけではありません。

すでに公開中のABテストを編集した場合、ユーザーごとのパターンの割り当てはリセットされますか？

配信条件で設定されているパターンごとの配信率を変更した場合、その時点から改めてパターンの割り当てが行われます。 すなわち、変更前に特定のパターンに割り振られたユーザーでも、別パターン（もしくは未実施）が配信される可能性があります。

なお、配信対象のユーザーセグメントを変更した場合には、その条件に合致するユーザーにおいて配信が行われますが、パターンの再割り当ては行われません。

参考： パターンの割り振りの仕様について

#karte_blocks