KARTE Blocksの初期セットアップ完了後の流れについてまとめたページです。

- 本機能はβ版となります。今後予告なく仕様変更になる場合がありますのでご了承ください。
- ご利用時はGoogle Chromeを利用してください。

配信までの流れ

プロジェクトのゴール設定

ゴールの設定方法を参考に、プロジェクトのゴールを設定してください。

KARTEのゴール機能で既にプロジェクトのゴールを設定している場合、追加設定は不要です。

ページ追加

null

書き換えを行うページを追加します。

  • ページ
    • ページ名:ページの名前を入力(例:トップページ)
    • URL条件:書き換えしたいページのURLを入力
      • 部分一致の設定や正規表現で指定することも可能です。またクエリ文字列を設定することも可能です。
    • プレビュー用URL:設定した内容をプレビューで確認する用のURLです。
  • オプション
    • 優先度:書き換え条件で設定したページの条件が重複した場合、優先度が高いページの書き換えが優先されます。
      • ページ追加時は1(一番高い優先度)として追加されます。
    • 優先度変更はページ編集から可能です。

null

URL設定時の注意点

  • 単一ページではなく、複数のURLをまとめて書き換え対象として設定したい場合は、部分一致を用いるか正規表現で直接指定してください。
  • クエリ文字列(パラメータ)を含んだURLを書き換え対象としたい(例:特定の広告流入の場合のみ書き換えを実施したい)場合は、クエリ文字列に対象のクエリ文字列を入力してください。
  • アンカーリンク(#test)はURLに設定することができません。例えば、以下のようなURLを条件に指定した場合は、書き換え対象アンカーリンクが無視され、https://sample.comが書き換え対象ページになります。
    • https://sample.com#test

施策の追加

null

次に、施策を追加して公開タイミングや対象ユーザー等を設定していきます。

  • 基本設定
    • 施策名:出し分けしたい条件名を入力(例:会員ユーザー)
    • 公開設定:書き換え設定がサイトに反映された際の施策毎の挙動を設定できます。
      • 公開:サイトへ反映後すぐに書き換えが行われます
      • スケジュール:設定された期間中のみ書き換えが行われます
      • 非公開:サイトへ反映後この条件で書き換えは行われません
  • 対象ユーザー
    • セグメント:KARTEで作成しているセグメントを対象ユーザーとして設定することができます。
  • 効果計測
    • 未実施グループを追加:ONに設定した場合、設定した条件で書き換えが行われないユーザーグループ(全体の10%)を自動的に作成し、書き換えたグループと効果を比較して見ることができるようになります。
    • ゴール設定:Blocksのゴール画面で追加したゴールを設定します。

書き換えエリアの追加

null

次に、どこのエリアを書き換えるのかを設定します。

  • 基本設定
    • エリア名:書き換えたいエリアの名前を入力(例:メインバナーエリア)
  • エリア指定方法
    • CSSセレクタで指定します。
    • 「サイトでエリアを選択」をクリックするとページ追加のプレビュー用URLで設定したURLに遷移します。

ブロックの設定

施策とエリアが設定されたので、最後にブロックを設定していきます。

  • 書き換え:以下から選択します
    • 置き換え(エリア追加した要素に対してブロックの置き換えを行いたい場合)
    • 追加(エリア追加した要素の下にブロックを追加したい場合)
    • 非表示(エリア追加した要素を非表示にしたい場合)
  • タイプ:以下から選択します。タイプによって設定内容が異なります。
    • 画像
    • テキスト
    • HTML
- 追加、削除は必然的にHTML書き換えになります。
- 追加を選択した場合、追加される位置は「設定したエリアのDOM内の末尾」になります。

画像の場合

  • 画像:書き換え後の画像をアップロードします
  • オプション
    • 画像のリンク先URL:書き換えた画像のリンク先を設定します(例:https://sample.com/campaign.html

テキストの場合

  • テキスト:書き換え後のテキストを入力します
- ログイン後の画面など認証が必要なページではオリジナルテキストを取得することができません。その場合は、オリジナルテキストを元サイトからコピーして編集してください。

HTMLの場合

  • HTML:書き換え後のHTML/CSS/Scriptを入力します
  • 「オリジナルHTMLを挿入」をクリックすると、書き換えエリアのHTML要素を取得してエディタに反映することができます。
- CSSタブで設定したスタイルはパーツの外側の要素も影響を受けますので、記述する際はご注意ください。
- Scriptタブで設定したスクリプトはページ全体に影響を与えますので、記述する際はご注意ください。
- ログイン後の画面など認証が必要なページではオリジナルHTMLを取得することはできません。その場合は、オリジナルHTMLを元サイトからコピーして編集してください。

プレビュー確認

インストールした拡張機能を活用して、配信前にプレビューを確認することができます。詳細はこちらをご確認ください。

配信

null

プレビューで挙動が問題ないことが確認できたら、実際にサイト上に配信を行います。本番配信時には必ずテスト配信を行っていただくようお願い致します。

  • 編集画面右上の「変更内容をサイトに配信」を押下します
  • 配信が成功すると「配信に成功しました」というメッセージが表示されます。(10秒〜20秒程度かかります。)
- 施策、エリア、ブロックの「保存」をクリックしただけでは変更内容がサイト上に反映されませんのでご注意ください。変更内容を実サイトに反映させるためには「変更内容をサイトに配信」を押下してください。
- ブラウザ側でキャッシュが効いている場合、書き換えの反映には多少時間がかかることがあります。

効果確認

効果タブより、書き換え条件ごとの書き換え効果を確認することができます。効果タブの見方の詳細はこちらをご確認ください。

書き換えが正しく行われない場合

  • 以下の点を確認してください。
    • builder.jsが書き換え対象ページに適切な場所に埋め込まれているか?
    • 書き換えエリアの設定が合っているか?(src属性の値、CSSセレクタなど)
    • 書き換え条件に合致しているか?
    • 未実施グループに割り振られていないか?
  • 具体的な確認方法はこちらをご参照ください。