KARTE Blocksで設定したブロックが更新されない場合には、下記チェックポイントを上から順番に確認してください。

更新されない場合のチェックポイント

  • 対象のページでBlocksタグが設置されているか？
  • ページ登録時のURL条件が合っているか？
  • ブロックエリアのCSSセレクタが合っているか？
  • ブラウザのキャッシュが残っていないか？
  • 設定内容がサイトに配信されているか？
  • ブロックに設定している配信条件に合致しているか？
  • アクセスした際に未実施グループに割り振られていないか？

対象のページでBlocksタグが設置されているか？

Blocksタグがページに設置されているか？

ブロックを更新したいページにBlocksタグ（builder.js）が埋め込まれているかを確認します。確認方法は下記です。

  • Chrome DevToolsを開く（ブラウザで右クリック→検証をクリック）
  • 検索窓を表示する（Windows：Control＋F、Mac：Command＋F）
  • 検索窓にbuilder.jsと入力

Blocksタグが設置されていると、下記のように該当のHTMLが黄色にハイライトされます。検索にヒットしない場合はBlocksタグが設置されていません。

null

Blocksタグのバージョンが最新か？

BlocksタグのURLが下記になっている場合は旧バージョンのBlocksタグが設置されています。旧バージョンのタグは現在非推奨となっていますので、新バージョンのタグに移行してください。

旧バージョンのBlocksタグ

<script src="https://static.karte.io/{$api_key}/builder.js"></script>

新バージョンのタグの確認方法はこちらをご確認ください。

Blocksタグが複数読み込まれていないか？

検証プロジェクトと本番プロジェクトを分けて運用する際、同じページに異なるBlocksタグが複数設置される場合があります。Blocksタグは一つのページに複数設置されることを想定としていません。複数埋め込まれた場合、一番上部に設置されたBlocksタグのみ読み込まれるようになっています。

コンソール上でエラーが発生していないか？

Chrome DevToolsのConsoleタブでBlocksタグ(builder.js)関連のエラーが出ていないか確認してください。

null

ページ登録時のURL条件が合っているか？

ページ一覧画面で設定したURL条件と対象のページが合っているか確認します。対象のページで拡張機能のアイコンをクリック→「ツールバーを表示」ボタンをクリックします。

ページ登録のURL条件が合っている場合は、ツールバー右下に設定したページ名が選択されています。

null

ページ登録のURL条件が間違っている場合、ツールバー左下に「ページグループに登録されていないため、この機能は利用できません」といったアラートが表示されます。

null

よくある間違い例

  • URL末尾に「/」が含まれているのに「/」を含まない形で完全一致で設定してしまった
  • URLにクエリ文字列（パラメータ）が含まれる場合を考慮せずに、クエリ文字列なしのURLを完全一致で設定してしまった

ブロックエリアのCSSセレクタが合っているか？

Blocksでは、登録したブロックエリアのCSSセレクタを元にブロックの更新を行っています。CSSセレクタの値が正しくないとブロックの更新が行われません。下記の操作を行うことで、登録したブロックエリアのCSSセレクタを検索することができます。

  • エリアの詳細 > エリア指定 > CSSセレクタの値をコピー
  • ブラウザのdevloper toolを開く（ブラウザの右クリック→検証をクリック）
  • 検索窓を表示する（Windows：Control＋F、Mac：Command＋F）
  • コピーした値をペーストする

CSSセレクタの値が正しい場合、下記のように該当のHTMLが黄色にハイライトされます。検索にヒットしない場合はCSSセレクタの指定が誤っている可能性が高いです。

null

以下のようなケースに該当する場合、登録したブロックエリアのCSSセレクタと実際のCSSセレクタが異なることがあります。

  • Blocksで更新したいページでCMSを併用しており、コンテンツの追加・削除等を行っている
  • 会員・非会員など、ユーザーの属性によってサイトのHTML構造自体が異なる
  • サイト側のリニューアルや改修などでHTMLの構造自体が変更された

定常的にCSSセレクタの値が変更される場合は、拡張機能を用いた指定ではなく、ID属性や属性セレクタのように、HTMLの構造や順序に依存しない形でブロックエリア指定していただくようお願いいたします。

また、スマートフォンサイトとPCサイトを別で用意している場合、基本的にはCSSセレクタの値が異なります。スマートフォンサイトでブロックエリアを指定する場合はこちらをご確認ください。

配信条件で設定しているセグメントに合致しているか？

ブロックに設定している配信条件で設定しているセグメントに自分が合致しているか確認します。設定しているセグメントに合致していない場合は、配信が行われません。

Blocksセグメントに合致している確認する方法

Blocksの拡張機能のアイコンをクリックすると、下記のように合致しているセグメント情報を確認できます。

null

KARTEのセグメントに合致しているか確認する方法（KARTEを併用している場合のみ）

KARTEのセグメントを設定している場合は、Chrome DevToolsでLocalStorageを確認します。具体的に方法は下記になります。

①Applicationタブを選択
②Local Storageを選択
③Keyでkrt___segmentsを選択
④Valueがすべて表示される

null

④のvalue内に合致しているセグメントのIDが配列形式で格納されているので、ユーザーストーリー画面で自分がそのセグメントに合致しているの確認します。

設定内容がサイトに配信されているか？

管理画面で設定した内容はBlocksタグが配信された時点でサイトに反映されます。Blocksタグが配信されているかどうかは、配信履歴ページから確認することができます。
（管理画面での設定からBlocksタグの配信までは数秒〜十数秒程度かかります。）

null

キャッシュが残っていないか？

ブロックの配信後30秒間はCDN(Amazon CloudFront)に配信前の状態がキャッシュされています。下記のショートカットキーを使ってキャッシュをクリアした上で最新のブロックに更新されるか確認してください。

  • Windows：Shift + F5
  • Mac： shift + command + r

未実施グループに割り振られていないか？

配信条件で未実施の割合を設定している場合、設定した割合でブロックの更新が行われません。自分が未実施グループに入っているか、下記の方法で確認できます。

  • Chrome DevToolsを開く（ブラウザで右クリック→検証をクリック）
  • コンソールタブで以下のコマンドを入力する
    • __KARTE_REWRITE_ADMIN_CONFIG.util.enable_logger(true)
    • ログを流さないようにする場合は引数をfalseにして再度コマンドを実行してください。
  • 画面をリロードすると下記のようにコンソールにログが流れるようになります。

その後、コンソール上で以下の値を確認してください。

  • [Conditions]-> 該当の配信条件を選択し、isControlForConditionがtrueになっていないか？
    • trueの場合、未実施グループに割り振られています。

それでも更新が行われない場合は？

上記のほか、サイト側で配信されているJavaScriptによって挙動を制御している場合（例： クリック時の遷移先を変更）、配信したブロックが正しい挙動にならない事象も報告されています。

ご不明の場合は、追加の調査を行いますので、チャットサポートでお問い合わせください。

#karte_blocks