KARTE Blocksを使ってブロックを登録、設定し、実サイトに配信するまでの流れを説明します。
※設定にはKARTE BlocksのChrome拡張機能が必要になります。まだインストールしていない場合は、下記の記事をご覧ください。
全体の流れ
- ブロックエリアをボード画面に登録する
- 配信条件を作成する
- 置き換えブロックを追加、設定する
- プレビューで確認する
- 配信する
ブロックエリアをボード画面に登録する
更新したいブロックエリアをボード画面に登録します。ブロックエリアは以下2つの方法から登録できます。
- サイトで選択
- ページから直接ブロックエリアを追加することができます。
- CSSセレクタを入力
- 管理画面からCSSセレクタを入力してブロックエリアを追加することができます。
サイトで選択
「サイトで選択」ボタンを押すと、ページ追加時に設定したプレビュー用URLに遷移します。Chrome拡張の機能により、サイト上から直接ブロックエリアを追加することができます。
既に登録済みのブロックエリアは、下記のように緑の枠線で囲まれて表示されます。
CSSセレクタを入力
「CSSセレクタを入力」ボタンを押すと、管理画面からブロックエリアを登録できます。対象のCSSセレクタを入力してください。
- 基本 > エリア名
- 更新したいエリアの名前を入力します（例：メインバナーエリア）
- エリア指定 > CSSセレクタ
- ブロックエリアとして登録したい要素のCSSセレクタを入力します
- 「サイトでエリアを選択」をクリックするとページ追加のプレビュー用URLで設定したURLに遷移し、直感的に選択することができます。
【ブロックエリアとブロックの違いについて】 ページ内でブロックにしたい領域をブロックエリアと呼んでいます。ブロックエリアを管理画面に登録すると、その領域内がブロックとして扱われ、ブロックの置き換えやパフォーマンス計測が行えるようになります。
CSSセレクタ入力時の注意点
- クラス名(
.クラス名)やID名(#ID名)を直接指定したい場合は、拡張機能を利用せずに管理画面から直接入力してください。 - また、CSSセレクタ中のクラス名(
.クラス名)やID名(#ID名)に以下の文字を含めるためには、各文字の前に\を入れたエスケープが必要です。!,",#,$,%,&,',(,),*,+,,,-,.,/,:,;,<,=,>,?,@,[,],^,`,{,|,},~
NGなケース
#test@
.test@OKなケース （\@ としてエスケープしている）
#test\@
.test\@配信条件を作成、設定する
配信条件タブをクリックし、「配信条件を作成」をクリックします。
基本/対象ユーザー
- 配信条件名
- ブロックを配信する条件名を入力します（例：初回来訪ユーザー）
- スケジュール
- 配信したい期間を設定できます
- 公開設定
- 「非公開にする」にチェックを入れると、この配信条件のブロックが公開されなくなります
- 条件
- 対象ユーザーを設定します。「絞り込み」を選択するとセグメントを指定して、対象ユーザーの絞り込みができるようになります。
- セグメント
- Blocksセグメントを利用して対象ユーザーを絞り込むことができます。Blocksセグメントの詳細はこちらをご確認ください
- KARTE Insightのセグメント（KARTEを契約している場合のみ）
- KARTE Insightで作成しているセグメントを対象ユーザーとして設定することができます。
- KARTEのセグメントを活用する場合の注意点はこちらをご確認ください。
パターン
- パターン名はデフォルトで「パターンA」のように設定されます。変更することも可能です
- 配信比率をパターンごとに変更することができます
- 配信比率は5%刻みで変更できます
パターンの追加は配信条件を作成した後に行えます。配信条件作成時には下記のようにアラートが表示され、パターンの追加はできません。一度配信条件を作成後に追加を行ってください。
パターンの設定方法例はこちらもご確認ください。
置き換えブロックを追加する
置き換えブロックを追加することで、ブロックエリア内のブロックを更新することができます。置き換えブロックの追加はブロックエリア内の「＋」ボタンから行えます。
作成した配信条件を置き換えブロック編集モーダルで設定します。
既に他のブロックで条件が設定されている場合、「このパターンはすでに他のブロックで選択されています」というアラートが表示されます。詳細はこちらをご確認ください。
ブロックタイプ
用途に応じたブロックタイプを選択します。選んだブロックタイプによって、設定できる内容が異なります。
| ブロックタイプ | 用途 |
|---|---|
| イメージ | 画像を置き換える |
| テキスト | テキストを置き換える |
| コード | HTML、CSS、JSなどコードを置き換える |
| HTMLの追加 | ブロックにHTMLを追加する |
| 非表示 | ブロックを非表示にする |
各ブロックタイプの詳細仕様はこちらをご確認ください。
プレビューで確認する
設定したブロックが正しく設定されているか、本番配信前に確認することができます。ブロック編集モーダルのプレビューボタンを押すと、別タブでプレビューが開き、変更内容をリアルタイムで確認することができます。
配信する
プレビューで挙動が問題ないことが確認できたら、ブロック編集モーダル右上の「保存して配信」を押すと、設定内容が本番に配信されます。
本番配信時にはテスト用のセグメント条件を設定してテスト配信を行っていただくことを強く推奨します。テスト配信の設定方法はこちらをご確認ください。
- 配信ボタンを押してから、実際に配信されるまで数秒から十数秒かかります。
- またブラウザでキャッシュが効いている場合、変更内容の反映には多少時間がかかることがあります。
設定した置き換えブロックが更新されない場合は、こちらのトラブルシューティングの記事をご確認ください。
その他注意点、仕様はこちらをご確認ください。
次のステップ
ブロックの配信が完了したら、効果測定を行うためにゴールを設定しましょう。
「サイトのゴールを設定する」にお進みください。