KARTE Blocksを導入可能な環境に関して、よくあるご質問をまとめました。
合わせて、CMSやカートシステムで構築されたサイトへのタグ設置方法もご覧ください。

アプリ（ネイティブアプリ）への導入は可能ですか？

ネイティブアプリへの導入はできません。現状はWebサイトへの導入のみ可能です。

SPAサイトへの導入は可能ですか？

SPAサイトでも利用可能です。

注意点

  • Next.js, Nuxt.jsなどのVue/Reactのフレームワークで構築されたサイトの場合、Blocksでの書き換えが動作しない場合がございます。
  • サイドバー、ヘッダーなど共通部分の書き換えを行う場合、正常に動作しないことがあります。
    • SPA/SSRのサイトではレンダリングの最適化により、ページ遷移してもサイドバー、ヘッダーなどの共通部が再読込されずに残る事象を確認しています。
    • ページ固有のコンテンツは問題なく書き換え可能ですが、共通部に書き換えを適用している場合、意図せず書き換えが残ってしまうことがある為ご注意ください。

ログイン前提のサイトへの導入は可能ですか？

導入可能です。ユーザーがログインをしている場合、ログイン後のWebページ内のコンテンツをKARTE Blocksによって計測、更新することができます。

レスポンシブサイトには対応していますか？

レスポンシブサイトにも対応可能です。管理画面内でCSS（メディアクエリ）を記述することで、KARTE Blocksで配信するコンテンツ自体をレスポンシブ対応することもできます。

動的にクラス名を生成する仕組みを使用しているサイトへの導入は可能ですか？

導入は可能です。

Blocksタグの設置や管理画面での設定において、動的なクラス名の生成に対して特別な対応は必要ありません。
ただし、KARTE Blocksで設定するCSSセレクタには、動的に生成されるクラス名の使用は推奨していません。

これは、KARTE Blocksで指定したセレクタと、Webサイト上で実際にレンダリングされるクラス名が一致しない可能性があるためです。その結果、ブロックの書き換えが正しく行われない場合があります。

注意点

CSS Modules や CSS-in-JS（JSS、Styled Components、Emotion など）のように、クラス名をビルド時にハッシュ化・動的生成する技術を使用している場合、以下のような問題が発生する可能性があります。

  • ページ訪問時にブロックが表示されない
  • 表示されたブロックがすぐに非表示になる（ちらつき）
  • ページをリロードするとブロックが表示されなくなる

対策として、KARTE Blocksで指定するセレクタには動的なクラス名ではなく、以下のような静的なセレクタの使用を推奨します。

  • 静的なクラス名を付与する：.my-button
  • ID属性を使用する：#main-button
  • data-*属性を使用する：[data-testid="main-button"]
  • HTMLタグと属性の組み合わせを使う：button[type="submit"]

一時的にアクセスが集中するようなサイトで利用する場合の注意事項はありますか？

オートスケーリングするような対応を行っているため、特にございません。

#karte_blocks