ページ登録後、Blocksで運用したい要素をブロック化してブロックリストに登録します。この記事では具体的なブロックの登録手順や、登録時の注意点についてご説明します。
ブロックをブロックリストに登録する手順
- ブロックリスト画面で、
サイトで選択ボタンをクリックします。- 既にブロックが登録されている場合は、右上の
オリジナルブロックを登録 > サイトで選択をクリックします
- 既にブロックが登録されている場合は、右上の
- サイト上でブロックを選択し、名前をつけて保存します。複数ブロックまとめて登録できます。（事前にBlocks専用のChrome拡張機能のインストールが必要です）
- 右下の終了ボタンをクリックすると自動で管理画面に戻り、登録したブロックがリスト形式で表示されます。
スマホ(SP)サイトのブロックを登録する場合は注意が必要です。詳細はこちらをご確認ください。
また、サイト上で選択するのではなく、CSSセレクタを直接入力してブロックを登録することもできます。クラス名(
.クラス名)やID名(#ID名)を直接指定したい場合は、右上のオリジナルブロックを登録 > CSSセレクタを入力を選択してください。- カスタムデータ属性も、
[data-hoge="fuga"]のように入力することでブロックとして指定できます。
- カスタムデータ属性も、
- CSSセレクタを直接入力する際の注意点
- CSSセレクタを直接入力する場合、オリジナルブロックが取得できない場合があります。詳細はこちらをご確認ください。
- CSSセレクタ中のクラス名(
.クラス名)やID名(#ID名)の中に以下の文字が含まれる場合は、各文字の前に\を入れたエスケープが必要です。!,",#,$,%,&,',(,),*,+,,,.,/,:,;,<,=,>,?,@,[,],^,`,{,|,},~- NG ->
#test@,.test@ - OK ->
#test\@,.test\@（\でエスケープしている）
ブロックはどのような単位で登録するといいか？
- ブロックを登録することで、
ブロック単位の数値を計測することとブロックを変更することができるようになります。 - つまり、計測したい単位、更新やABテスト等の運用が効率よくできる単位でブロック化することが重要です。
- 以下サンプルイメージで、①は画像と見出しテキストをまとめて一つのブロックとして登録、②は画像と見出しテキストをそれぞれ分けてブロックとして登録しています。
- どちらのケースでも、編集時にはノーコードで画像とテキストを編集できます。運用の手間を考えると一回の編集でまとめて作業できた方が効率が良いため、①のようにまとめて登録することを推奨します。
- 計測観点では、①のケースだと画像とテキストのクリックを分けて計測することはできません。画像とテキストのクリックUU数を分けて計測したい場合には②のように分けて登録することを推奨します。
- 動的に生成される要素（例えば人気商品ランキング等、アクセスタイミングによってサイトに表示される要素が変動する）はBlocksで変更することはできません。ブロックを変更する運用を行う際には、静的に表示されている要素を登録してください。
- 数値計測においては、動的に生成された要素でも計測可能です。例えば、人気商品ランキングの1,2,3位をそれぞれブロック登録し、クリックUU数やゴールUU数を確認することは可能です。
#karte_blocks