KARTE Blocksを導入するサイトへの影響に関して、よくあるご質問をまとめました。

KARTE Blocksを利用する際には、事前にこちらの内容を確認し、ご理解いただいた上で利用してください。

導入サイト自体のコンテンツ表示に影響はありますか？

KARTE Blocksでは、同期タグの仕組みを採用することで表示遅延（フラッシュ）なくサイトコンテンツの更新が可能ですが、同期タグの仕組み上影響が出る可能性があります。

発生する事象

タグが同期的に処理される（※）ため、以下のような問題が発生する可能性があります。

対象ページ自体の表示処理が止まる（画面が真っ白になる）
対象ページ自体の表示スタイルが崩れる
Blocksによるコンテンツの更新が正しく行われない（更新前のオリジナルコンテンツが表示される）
更新対象の要素が表示されない

※ 同期処理、非同期処理の違いはブロックがサイト上で更新されるタイミングをご参照ください。

発生する可能性

サイトの構造に依存します。まずはテスト環境でタグ設置を行い、挙動に問題ないかご確認の上で本番サイトへの設置をお願いいたします。

また、本番サイトでは後述するプレビュー確認やテスト配信を行うことで、自サイトで問題なく動作するかを事前に検証いただくことを強く推奨します。

発生するタイミング

Blocksタグ（builder.js）を設置した後で、管理画面上で以下の操作を行った際に、上記の事象が発生する可能性があります。
これは以下の操作を行ったタイミングで管理画面で設定した内容が builder.js に書き込まれ、サイトに配信されるという仕様のためです。

施策の作成、保存、公開/停止、削除
- 優先度の変更も含む
ブロックの作成、保存、削除
ブロックエリアの作成、保存、削除
計測ブロックエリアの作成、保存、削除
Blocksのセグメント作成、編集、削除
計測ページの作成、保存、削除
旧ページの編集、削除

上記のリスクを極小化するための対応策を下記で説明します。

対応策

段階的な配信による検証

KARTE Blocksで本番サイトに配信を行う際は、事前に次の流れで十分に検証をしてください。

配信前にプレビューを確認
- ブロック編集時にプレビュー機能を利用して、以下の点を本番配信前に確認してください
  - 編集したブロックが意図した挙動になっているか
  - 表示の崩れがないか
テスト配信を行い、本番環境で確認
- 自分だけが対象となるような配信条件を作成、設定することで、他ユーザーに影響を与えずに実際のサイトでの挙動を確認できます
- テスト配信の設定方法：施策をテスト公開・確認する

問題発生時の緊急停止

万が一、Blocksタグ設置後に上記にあるようなページ表示処理の停止やページ崩れ等の問題が発生した場合には、速やかに以下どちらかの対応を行うことで影響を最小限に留めることができます。

緊急停止機能を利用して全てのBlocksタグの動作を無効化する
管理画面上からワンクリックで無効化できます。方法は上記サポートサイトをご確認ください。
Blocksタグをサイトから外す

※ GTM経由でのタグ設置について

GTM経由でBlocksタグを設置することも可能ですが、以下の点を予めご確認いただき、本番配信前には必ず事前検証を行った上でご利用ください。

GTM経由で設置してうまく動作しない場合は、サイトの<head>内に直接タグを埋めてください。

タグの実行が非同期になるため、ブロック配信時に画面のチラつき（フラッシュ）が発生する可能性がある
- ※ 同期処理、非同期処理の違いはブロックがサイト上で更新されるタイミングをご参照ください。
以下の理由などにより、正常に動作しない可能性がある
- GTMの設置方法が誤っている
  - 参考：タグマネージャーの設定とインストール
- GTM内で設置されている他のサードパーティタグとBlocksタグが干渉してしまう
- GTM内での配信優先度の設定

サイトの表示速度への影響はありますか？

KARTE Blocksの書き換えの仕組みについて

KARTE Blocksは、同期タグの仕組みを採択しています。
サイトの<head>タグに直接設置した場合、書き換え箇所の表示遅延やカクツキを極小化することができ、ページ表示におけるユーザー体験を損ねないよう設計しています。

タグ読み込み後の書き換えまでの流れについて

KARTE Blocksは、ウェブサイトのHTMLツリーが読み込まれる（DOMContentLoadedイベントの発生）のを待ちます。その後、Blocksで書き換える対象要素を透明化の上、管理画面で設定した編集内容（HTML）に書き換え、CSSファイルや各画像を読み込みます。
- KARTE Blocksによるページの読み込み速度に与える影響を最小限にしつつ、書き換え箇所の表示遅延やガタ付きなどが極小化するための仕組みです。
- HTMLの構造やSPAサイトなどにおけるJavaScriptの影響によっては、HTMLツリーが読み込まれる前にBlocksの書き換えを実行すると書き換えが正しく実行できないリスクを考慮した設計になっています。

表示速度への影響について

以下のようなケースでは、ページの読み込み完了（Loadイベントの発生）までの時間は長くなる傾向にあります。後述する、表示速度への影響を最小化する仕組みの導入、および継続的な改善を行うことで対応しています。

KARTE Blocksで書き換えている要素が大きい
KARTE Blocksでページ内の多くの要素を書き換えている
KARTE Blocksで書き換えている要素で、読み込んでいる画像などのサイズが大きい / サーバーからのレスポンスが遅い

表示速度への影響を最小化するための仕組みについて

上記の通り、同期タグの仕組みを採択をしているため、全く影響が無いとは言えません。
ただし、下記のように KARTE Blocksではサイトの表示速度に極力影響が出ないような設計 を採用しています。

登録したブロックの書き換え等の処理を行うbuilder.jsファイルは、圧縮され軽量化された状態でCDNに送信しており、さらにCDNにて更なるファイル圧縮を行なった上でウェブサイトに配布しています。
ユーザーが、Blocksタグが設置されているページ来訪した際に、CDNからbuilder.jsがダウンロードされます。その際、初回通信以降はキャッシュが効くため、高速にダウンロードがされます。
表示数やクリック数といったログの送信やブロックの書き換え処理などは、非同期処理を行っており、ページの表示をブロックしない仕様になっています。
Blocksのセグメントの解析処理はクライアント側（ブラウザ側）で行っているため、解析時にサーバーとの通信が発生しない仕組みになっています。
Insightのセグメントは、1PV前の情報を利用し、サーバーとの通信を待たないようにしています。

PageSpeed Insightsと数値と実測値について

Blocksタグ（builder.js）は、Googleが提供している PageSpeed Insights のレポートで「レンダリングを妨げるリソースの除外（Eliminate render-blocking resources）」として警告が出ることがあります。

ここに表示されるのは、<head>に含まれるリソースの中で、ダウンロードに一定時間以上かかる同期処理をするjsファイルとcssファイルです。
参考：Eliminate render-blocking resources

モバイルにおける「減らせるデータ量（Potential Savings）」に記載されている数値に関して、Googleのドキュメントにも「現在、Lighthouse はモバイルネットワーク上のミッドレンジ端末（Moto G4）でページ読み込みをシミュレートします」と記載があります。

参考：PageSpeed Insights API について、PageSpeed Insights でのモバイル分析

日本国内のネットワーク環境とユーザーが利用するモバイル端末のスペックを踏まえると、実測値はPageSpeed Insights内の数値と比べて小さくなるケースがほとんどです。

ご自身の通信環境での対象リソースのダウンロード速度は、以下の方法でご確認いただけます。

サイトにアクセスして Chrome DevTools を開く
Networkタブをクリックし、検索窓でbuilder.jsと入力し、画面をリロードする
「Time」を確認

null

SEOへの影響はありますか？

KARTE Blocksを利用して全ユーザーへ継続的なコンテンツ配信、もしくはA/Bテストやパーソナライズによるコンテンツの出しわけを行うこと自体が、Googleの検索ランキングに悪影響を及ぼすことは無いという見解です。

全ユーザーへの継続的なコンテンツ配信について

Googleが出している記事でも、JavaScriptが実行された内容をインデックスする、と説明されています。
実際、KARTE Blocksで恒常的に全ユーザーに対してブロックを配信した場合には、配信後の内容でインデックスされているのを確認済です。

ただし、クローラーによってはJavaScriptを実行できない可能性もあるため、Google　Search　ConsoleでURL検証をしてお確かめください。

A/Bテスト・パーソナライズについて

Googleは、自身が提供していたGoogle オプティマイズというA/Bテストソリューションのドキュメントにて、A/Bテストやパーソナライズといったウェブサイトの最適化を推奨していました。
その中にあるガイドラインに従いウェブテストなどの最適化の活動を行うことで、掲載順位には影響を与えることはないと説明しています。

ただし、使い方によってはGoogleからクローキングのような不正行為とみなされる可能性もあります。Google公式ドキュメントのガイドラインも適宜参照してください。

KARTE Blocksの管理画面で障害が発生している場合にサイト側に影響はありますか？

万が一、KARTE Blocksのサービスが停止して管理画面にログインできない場合でも、Blocksタグが入っているサイトが表示されないといった致命的な問題が発生することは基本的にはありません。

KARTE Blocksの仕様として、更新後のブロックの素材取得はCDNを介して行っており、KARTE Blocksとは通信が発生しないためです。

Blocksタグが読み込めない場合にサイト側に影響はありますか？

CDN側の障害等が発生し、万が一、Blocksタグ（builder.js）が読み込めない場合でも、導入サイトで読み込まれる他のJSファイルの読み込みをブロックしたり、サイトが全く表示されなくなることは基本的にはありません。

ただし、その場合ブロックの書き換えは行われずにオリジナルの要素が表示されます。
また、ログの送信も行われません（既に送信されたログの解析は行われます）。

ご利用上の注意点と導入サイトへの影響可能性について