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

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

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

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

施策の配信ページの設定方法については施策設定 - 配信ページをご確認ください。

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

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

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

施策のブロックリストでの、CSSセレクターの設定方法に関しては下記記事をご参照ください。
施策 - ブロックリスト - ページエディターを利用せずブロックを登録する

該当のCSSセレクターのコピー方法

  • 更新したい画像をChrome DevToolsで選択し、右クリック→「Copy Selector」を選択
  • ブロックリスト画面右上のブロックエリアを登録ボタン > CSSセレクターを入力メニューをクリックし、コピーしたCSSセレクターを貼り付け

Chrome DevToolsの開き方はこちらをご参照ください。

該当のHTMLのコピー方法

  • 更新したい画像をChrome DevToolsで選択し、右クリック→「Copy HTML」を選択

null

注意点

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

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

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

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

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

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

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

null

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Q. <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などのメソッドを記述する必要があります。ただし非同期で処理が実行されるため、画面のチラツキが発生する可能性があるので予めご認識ください。

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

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

トラブルシューティング

Q. 「ブロックエリア」が作成されないのはどのようなケースですか？

null

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

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

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

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

null

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

ブロックエリアとブロックでそれぞれ異なります。

ブロックエリア

ブロックエリアが登録できない場合、スクリーンショットも表示されません。また、ブロックエリアが登録できた場合でも、CSSセレクターから入力でブロックエリアを登録した場合は、ブロックのスクリーンショットは取得できません。

ブロック

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

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

null

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

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

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

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

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

その他仕様

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

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

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

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

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

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

#karte_blocks