KARTE Blocksでは、パーソナライズ配信の一環として、ブロックを配信する対象を指定デバイスに絞ることができます（例：「PCのみ」「モバイルのみ」）。

多くのサイトでレスポンシブ対応が施されていますが、その実装方法によっては、各デバイス幅に対応した施策をそれぞれ設定・公開する必要があります。

本記事では、閲覧デバイスごとに施策を設定する方法、およびユースケースをご紹介します。

閲覧デバイスごとに施策を設定する

施策の配信条件セクションで、対象ユーザーの絞り込みで施策を公開したい対象デバイスを選択し、施策を保存します。

閲覧情報のセグメント（Blocksのセグメント）の中から、選択したデバイスに応じてPC SP タブレットのうち全て、あるいは一部が自動的に選択されます。

なお、これらのPC SP タブレットのセグメントはプリセットで用意されており、スクリーン幅の情報をもとに閲覧デバイスを識別しています。

プリセットのため設定は変更できないため、別の条件でデバイスの識別を行いたい場合はカスタムセグメントを作成してください。

もしブロックの配信は全ての来訪ユーザーに対して行いたい場合には、上記の流れに沿ってデバイスごとに施策を設定して公開してください。

閲覧デバイスの指定が不要なケース

ご利用のウェブサイトでレスポンシブ対応が実装されている場合、実装方法によってはデバイスの指定が不要ですのでご確認ください。

KARTE Blocksでは、ブロックを配信する対象は以下の情報の組み合わせで決定されます。

• ページのURL条件（= 配信ページ設定）
• ブロックエリア（= CSSセレクターで特定されるDOM要素）

そのため、URLがデバイスごとに異なったり、ブロックエリアがデバイス別で設定される場合には、閲覧デバイスの指定が不要となります。

以下で具体的なケースをご紹介します。

1. 「PC用ページ」「SP用ページ」などで、ページURL自体が異なるケース

例えば、同じページ内容でも以下のようにURLが異なるケースです。

• PC用サイト：https://example.com/
• SP用サイト：https://sp.example.com/やhttps://example.com/sp/など

この場合、配信条件で閲覧デバイスのセグメントを指定せずとも、配信ページにおけるURL条件の設定でブロックの配信範囲を制御できます。

2. ページURLは同じだが、PC用ページとSP用ページで対象ブロックエリアのCSSセレクターが異なるケース

別のレスポンシブ対応の実装方法として、URL自体は同じであるものの、PCでアクセスした場合とスマートフォンでアクセスした場合で、別々のHTML要素を切り替えて表示している場合があります。

このようなサイトでは、ユーザーエージェントやスクリーン幅などを検知し、自動的にPCアクセス時に表示する要素とSPアクセス時に表示する要素を切り替える処理を行っています。

確認方法

エディター画面でブロックの編集を行った後、プレビュー時のデバイスを切り替えた場合に、ブロックがプレビュー上で反映されるかご確認ください。本ケースで実装されている場合は、デバイスを切り替えると編集したブロックが表示されません。

ただし、サイトの構造によっては、デバイスを切り替えた時に、思わぬ箇所で編集したブロックが表示/反映されていることが稀にあります。
この場合、編集したブロックに対するブロックエリアと同じCSSセレクターが、偶然ページ内の別の箇所で一致してしまっているため、閲覧デバイスを指定する設定(前述)を必ず行ってください。