ご注意ください

この記事は、リニューアル後のKARTE Blocksに関する内容です。現在ご利用のUIが旧バージョンの場合は、リニューアル前のサポート記事をご確認ください。

さまざまなタイプの編集、更新

グローバルメニューなど全ページ共通の内容を更新することはできますか？

スライダー/カルーセル形式の画像を編集できますか？

スライダー/カルーセルに関しては、基本的にブロックリスト画面からCSSセレクターを直接登録し、編集することを推奨しています。
ページエディターからの編集は可能ですが、対象要素の選択が正しく行えない場合があります。
スライダーの編集が正しく動作しない場合もあるため、以下の手順をお試しください。

設定方法

Chrome DevToolsで編集したい画像を選択し、右クリック → 「Copy Selector」を選択。

ブロックリスト画面右上の［ブロックエリアを登録］ボタン > ［CSSセレクターを入力］メニューをクリックし、コピーしたCSSセレクターを貼り付け

ブロック編集画面のHTMLにコピーしたHTMLを貼り付け後、任意の画像に更新、配信。

注意点

スライダー/カルーセルによっては、登録したCSSセレクターの値が途中で変更される場合があります。（swiper.jsのライブラリを使っている場合など）
その場合は上記の方法ではなく、属性セレクターなどを活用して対象のブロックを指定してください。
- 例：画像のsrcやaltの値が一意に設定されている場合、下記のように指定することでCSSセレクターの値の変更に依存せずに配信が可能です。
  - img[src='srcに設定されている値を指定']
  - img[alt='altに設定されている値を指定']
ブロックリストから登録、編集したとしても、スライダーで利用されているライブラリ、実装方法によっては正しく動作しない場合があります。あらかじめご了承ください。

iframeで埋め込んだ要素を編集できますか？

<iframe>タグのsrc属性に設定されたURLにBlocksタグ（builder.js）が設置されている場合は編集できます。まずは、<iframe>タグのsrc属性に設定されているページでBlocksタグ（builder.js）が設定されているかご確認ください。
ただし、Blocksタグ（builder.js）が埋め込まれている場合でも、元サイトとsrc属性で設定されているURLのドメインが異なる場合、ブロックとして扱うことはできません。（同一オリジンポリシーというセキュリティの仕様）

ポップアップやモーダルで表示される箇所を編集できますか？

可能です。ポップアップやモーダルが表示されたタイミングで編集したい要素を選択し、編集してください。

background-imageで設定されている画像を編集できますか？

可能です。ページエディターにて「背景 > 画像」を選択し、任意の画像をアップロードしてください。

null

CSSスプライトで設定された画像を編集できますか？

スプライト画像内で表示する画像位置をCSSで指定しているため、通常の画像更新と同様に更新することはできません。ページエディター画面の編集パネルの［コード］タブ > ［CSS］タブで、CSSを記述することで編集してください。

擬似要素（::beforeや::afterなどで生成された要素）を編集できますか？

ページエディター内のプレビューからブロックを選択して編集しても、変更は反映されません。
擬似要素の編集には、コード編集から擬似要素を生成しているスタイルを変更したり、CSSの記述が必要です。

metaタグ（title, keywords, descriptionなど）を編集できますか？

KARTE Blocksでは、metaタグ（title, keywords, descriptionなど）の編集はできません。サイトのソースコードを直接修正してください。

class属性などを利用して、同じページ内で複数要素を一括して1つのブロックエリアとして登録できますか？

できません。同一のclass属性を持つ複数要素がある場合、最初に読み込まれる要素のみがブロックエリアとして認識され、変更ブロックの配信はそのブロックエリアに対してのみ実行されます。

コンテンツ編集のための環境

ログインが必要なページでのプレビュー確認はできますか？

可能です。お使いのChromeでページにログインした状態でプレビューを行ってください。

IP制限やベーシック認証が必要なサイトでもプレビュー確認はできますか？

可能です。お使いのChromeで事前にサイトにアクセスし、必要な認証を済ませてください。

スマホサイトの編集もできますか？

可能です。ページエディターからSPのデバイスを選択することで、SPサイトをそのまま編集できます。

`<script>`タグをBlocks内で埋め込むことはできますか？

ページエディタ画面の編集パネルのコードタブ > Scriptタブから、JSファイルを読み込むようなスクリプトを記述していただくことで読み込み自体は可能です。（「HTML」でscriptタグを使って呼び出すことはできません。）
KARTE Blocksでの書き換えが完了した後に、指定ブロックのscriptタグで記載されているJSを実行するよう制御しています

var s = document.createElement('script');
s.src = 'script srcの値を記述する';
s.type = 'text/javascript';
document.body.appendChild(s);

※上記はサンプルコードになります。このままコピー＆ペーストしても動きません。

scriptタグを読み込んだ後に何か処理を実行したい場合、setTimeoutなどのメソッドを記述する必要があります。ただし非同期で処理が実行されるため、画面のチラツキが発生する可能性があるので予めご認識ください。

画像を更新する際に、異なるサイズの画像を使用できますか？

画像サイズを調整してアップロードしていただくか、またはページエディター画面で画像サイズの変更を行うことができます。異なるサイズを使用する場合、表示崩れが起こるケースもございますので、事前にプレビューやテスト配信で確認してください。

トラブルシューティング

「ブロックエリア」の情報が取得できないケース

ブロックリストで、［CSSセレクターを入力］からブロックエリアを登録する場合、かつ、以下のようなケースに該当する場合、ブロックエリアの情報を取得できないことがあります。

「ブロックエリアの情報を取得できない」というアラートが表示される原因

ページにログインしないとアクセスできない/ページにベーシック認証が設定されている。
WAF (Web Application Firewall)などの仕組みが入っていて、クローラーがアクセスできない。
登録したブロックが非同期で生成される。
ブロックエリア登録時にCSSセレクターの指定が間違っている。
ユーザーエージェントによってPC/SPの出し分けを行っていて、SP用のCSSセレクターを指定した。

ブロックエリアの情報を取得できないことによる制約・注意点

このアラートが出ている場合、以下の制約が発生します。

ブロックエリアのスクリーンショットを取得できない。
施策設定画面内のブロック一覧において、ブロックエリアを元にブロックの作成ができない。

なお、［ブロックエリアを元に作成］が選択できない場合は、［カスタム作成］を選択した上で、下記の方法で元サイトから対象のHTMLをコピーして貼り付けてください。

Chrome DevToolsを開く（ブラウザで右クリック→「検証」をクリック）
対象の要素を選択→右クリック「Copy」→「Copy outerHTML」をクリック

null

ブロックのスクリーンショットが表示されないケース

ブロックやブロックエリアの保存時に、自動的にそれらのスクリーンショットを取得する仕組みになっていますが、一部のケースでスクリーンショットを取得できないことがあります。

ブロックエリア

ブロックエリアの情報が取得できない場合、スクリーンショットも表示されません。また、ブロックエリアが取得できた場合でも、［CSSセレクタから入力］でブロックエリアを登録した場合は、ブロックエリアのスクリーンショットは取得できません。

ブロック

「エディタ画面で表示されている編集内容を元に、Google Chromeの拡張機能経由で撮る」という仕様のため、エディター画面でページの内容がプレビューできない場合はスクリーンショットが取得できません。また、拡張経由でスクリーンショットを撮影する際の具体的な仕様は下記になります。

エディタ画面右上の［変更を確定］ボタンをクリックしたタイミングで、編集内容を元にスクリーンショットを撮影する
［変更を確定］ボタンクリック時点で指定しているデバイスを元にスクリーンショットを撮影する

null

編集した要素がプレビュー画面内に表示されていなくても、スクリーンショットは撮影される

ページエディタ画面が真っ白になり、ページが表示されないケース

以下の場合、ページエディター画面で表示されません。

編集しているページがHTTPS対応されていない（URLの先頭がhttp://になっている）
- Google Chromeの「混合コンテンツ（Mixed Contents）」に該当しプレビューが表示されません。設定した配信ページのHTTPS対応をご検討ください。
存在していない、インターネット上に公開されていないURLを登録した
ブラウザで保存されているCookieのデータ量が多く、Bad Requestが返ってくる
- ご利用ブラウザのCookieの削除をお願いします（できる限り全期間のデータ削除が好ましいです）

上記以外で、プレビューが表示されない場合はサポートまでお問い合わせください。

集計された効果数値に異常があるケース

施策やブロックに関する効果数値について異常があると感じた場合は、以下の項目に沿って、状況を確認してください。

もし、いずれにも当てはまらず、記載された確認方法を試しても異常が解消されない場合は、チャットサポート窓口にご連絡ください。

1. Googleアナリティクスなど、他ツールとの数値の大きな乖離

一般的な数値のズレの理由

異なるツール間で計測された数値が完全に一致しないことは一般的です。以下のような理由が考えられますので、予めご了承ください。

データの計測方法や処理順序の違い
- 例：ページ読み込みに対するタグの読み込み順が異なる
集計方法や仕様の違い
- 例：同じ「セッション」単位で集計しても、ツール間で「セッション」の定義が異なる

ズレが生じる場合の確認項目

他ツールとの数値のズレが気になる場合、以下の項目を確認してください。

項目	ズレが起こる場合の例
計測環境の一致	・タグ設置が正しくない、設置範囲が異なる・タグ発火条件が異なる
集計期間の一致	・「8/1 ~ 8/10」 vs「8/1 ~ 8/15」
集計範囲（ページ）の一致	・URLの完全一致 vs 部分一致
集計単位の一致	・「ユーザー数」 vs 「セッション数」
集計指標の一致	・「クリック数」 vs 「遷移先ページのビュー数」
指標定義の一致	・「UTC基準で集計」 vs 「JST基準で集計」

2. 計測数値が少ない

パターンの訪問数やブロックの表示数、ゴール数などが他の類似の数値と比べて少ない場合、以下を確認してください。

タグ設置の確認

効果数値を正確に計測するためには、適切にイベントデータを計測できる状態が必要です。KARTE BlocksやKARTE計測タグ、カスタムイベントタグの設定が正しいかを確認しましょう。

よくある間違い：

タグが設置されていない、または読み込まれていない。
- 例：Google Tag Managerの設定不備。
設定したタグが異なる。
タグ設置場所や順番が間違っている。
- 例：Blocksタグがbody内に設置されている。
- 例：カスタムイベントタグが、KARTE計測タグ前に設置されている。
複数のタグが読み込まれている。この場合、一番上部に設置されたBlocksタグのみ読み込まれます。
- 例：検証環境用のタグが、本番環境でも読み込まれてしまっている。

施策設定の確認

施策が正しく設定されているかを確認しましょう。

考えられる要因	対策
限定的なページでしか公開されていない	・URL条件の設定を修正・URLチェッカーで確認する・（正規表現利用の場合）正規表現が正しいか確認する
対象ユーザーを絞り込みすぎている	・配信条件の対象ユーザー設定を見直す

その他、以下のような要因も考えられます：

施策設定を途中で変更した
集計期間中に施策を一時停止した
途中から一部のパターンやブロックを追加した

3. ブロック表示数が少ない場合

ブロック表示数が少ない場合、以下を確認してください。

優先度の高い施策で配信されたブロックが優先されたため、表示されなかった
- 施策優先度について：施策の優先度とブロックの計測・配信
ブロックが大きすぎて、表示条件を満たしていない
- 例：画面に50%以上表示されていない

（要注意）パターン訪問数とブロック表示数の違い

パターン訪問数に対して、ブロック表示数が少なくなるのは一般的です。パターンはページに訪問した段階でカウントされ、ブロックは画面に表示された場合にのみカウントされるためです。

詳細はブロック/計測ブロックエリアの表示が計測される条件を参照ください。

その他仕様

Blocksで書き換えた際に元サイトのソースコードも書き換わりますか？

元サイトのソースコードは書き換わりません。Blocksは、サイト上に描画されるHTMLをJavaScriptで差し替えることでコンテンツの書き換えを実現しています。
描画後のHTMLにはBlocksで書き換わった後のHTMLが表示されていますが、元サイトのソースコード自体が書き換わっているわけではありません。

すでに公開中のA/Bテストを編集した場合、ユーザーごとのパターンの割り当てはリセットされますか？

配信条件で設定されているパターンごとの配信率を変更した場合、その時点から改めてパターンの割り当てが行われます。すなわち、変更前に特定のパターンに割り振られたユーザーでも、別パターン（もしくは未実施）が配信される可能性があります。

なお、配信対象のユーザーセグメントを変更した場合には、その条件に合致するユーザーにおいて配信が行われますが、パターンの再割り当ては行われません。

参考：パターンの割り振りの仕様について

よくある質問（ブロックの編集、更新）

間違い、誤植等があれば教えて下さい😃

目次