KARTE Blocksを使ってブロックを設定、更新して実サイトに配信するまでの流れを説明します。

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

配信までの流れ

プロジェクトのゴール作成

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

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

ページ追加

null

ブロックを設定したいページを追加します。

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

null

URL設定時の注意点

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

クエリ文字列設定時の注意点

  • BlocksではURLに含まれるクエリ文字列を&で区切られた複数のクエリパラメータとしてそれぞれ分解して条件に一致させます。
    例えばクエリ文字列にKARTE=trueを入力した場合、一致不一致は以下のようになります。

一致

  • https://admin.karte.io/project/plaid/?KARTE=true
  • https://admin.karte.io/project/plaid/?KARTE=true&Plaid=1234

不一致

  • https://admin.karte.io/project/plaid
  • https://admin.karte.io/project/plaid/?TESTKARTE=true
  • https://admin.karte.io/project/plaid/?KARTE=false
  • https://admin.karte.io/project/plaid/?Plaid=1234

施策の追加

null

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

  • 基本設定
    • 施策名:ブロックを出し分けしたい条件名を入力(例:会員ユーザー)
    • 公開設定:設定したブロックがサイトに反映された際の施策毎の挙動を設定できます。
      • 公開:サイトへ反映後すぐに更新されます
      • スケジュール:設定された期間中のみ更新されます
      • 非公開:サイトへ反映後この条件で更新はされません
  • 対象ユーザー
    • セグメント:KARTEで作成しているセグメントを対象ユーザーとして設定することができます。
  • パターン
    • パターン名:デフォルトではパターンAが入ります。変更したい場合は任意の名前を入力してください。
    • 複数パターンを用意した場合はパターンの追加が可能です。パターンの追加は施策を作成した後に行えます。
  • 効果計測
    • 未実施グループを追加: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

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

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

効果確認

効果タブより、配信したブロックの効果を確認することができます。効果タブの見方の詳細はこちらをご確認ください。

更新が正しく行われない場合

書き換わらない場合のトラブルシューティングを元に、確認をお願いします。