このページについて
このページでは、UI エディターの使い方の中でも比較的簡単に操作できる項目を説明いたします。
UI エディターについて
Kaizen Platform UI エディターは、画面上から、ページ上の要素を移動したり、文字の大きさ・色などを変えることができます。 通常のエクスペリエンス は、このエディターを利用して、デザイン案を作成し、実施します。
このエディターでは、元ページのHTML・CSSを直接書き換えているわけではありません。
エディター上で行った操作を、 JavaScript のコードに変換して元ページに当てることで、
デザインを変化させています。
UI エディターの基本的な操作
UI エディターを起動するには、エクスペリエンス詳細画面にある、デザイン案を作成する ボタンをクリックします。
マウスが移動すると、ページ内の要素が、青い枠で囲われます。その状態でクリックすると、コンテクストメニューが開きます。
基本的な操作
- HTMLを編集:選択している要素とその配下の要素を編集することができます。
- スタイルを編集:CSSによる編集をすることができます。
- 属性を編集:classやidなどの編集・追加ができます。
- 背景画像を設定:背景画像の変更・設定ができます。
- ドラッグして移動 : 要素をドラッグして、移動することができます。
- 要素を削除 : 要素の削除を行うことができます。
- テキストを編集 : テキストを編集できます。
- 画像の挿入・変更 : 画像の挿入・変更を行うことができます。1画像あたりの容量は最大 2MB になります。合計で 10MB までアップロードできます。
- オリジナルを表示 : エディターで編集する前のデザイン案を表示します。
- プレビュー : エディターで編集したデザインをプレビューを開きます。実際の動作 (例: ボタンの動作確認) などを行うことができます。
また、元のページの CSS や HTML によって、画像の位置が規定されているため、変更できない場合があります。 エディター左下の StyleSheet タブや JavaScript タブから直接スタイルシートと JavaScript を記述することで変更できます。
HTML/スタイルを編集する
- HTML を編集: 選択した箇所の HTML を編集することができます。
- スタイルを編集: 選択した箇所の HTML に
style=""
形式で CSS を挿入することができます。
JavaScript で要素の操作を行う
- jQuery コードの追加: 選択した箇所に対して、jQuery コードを追加することができます。
コードを直接編集する
- StyleSheet タブ: エクスペリエンスを実行したいページに、後付する形で、CSS を追記いたします。
- JavaScript タブ: UI エディター上での変更内容を JavaScript 形式で記録しているものを確認できます。
アクセス制限のあるページを UI エディターで編集する
IP 制限や Basic 認証、ユーザー認証が必要なページは、Kaizen Platform JavaScript コードを貼り付けるか、Kaizen Platform Assistant Google Chrome 機能拡張をインストールしていただく必要があります。
作業の前に、対象サイトでログインを行った後、エディターを開くことで、ログイン後画面の編集ができます。
イベントトラッキングゴールが設定された画面を編集するときの注意点
イベントトラッキングゴールはクリックトラッキングゴールと異なり、画面のソースコード内に明示的に識別できるゴールIDが存在しません。ゴールイベント対象となるUI要素のHTMLタグ及びIDやCSSクラスなどの属性情報を基に識別しているため、デザイン案作成時に対象UIのHTMLソースコードが変更されますと、ゴール計測ができなくなりますので、編集時には注意が必要です。
上記画面のように「イベントトラッキングを表示ボタン」が確認できる場合には、イベントトラッキングゴールが設定されていますので、対象UIを確認の上、デザイン案を作成してください。
イベントトラッキングゴールや編集時の確認方法について、詳しくは以下ページを参照してください。
「イベントトラッキングゴール」が設定されているエクスペリエンスをEditorで編集する時の注意点
よくある問い合わせ
Question | Answer |
---|---|
CSS タブで記述したコードが反映されないのですが、反映の仕方はありますか? | エクスペリエンス対象ページの既存スタイルの上書きができていない可能性があります。スタイルシートの実行順序 を参照してください。 |
要素を移動させる際に、pixel 単位での微調整を行うことはできますか? | ドラッグして移動 にて、要素をドラッグさせて移動させた後、エディターの下部にある JavaScript タブを開き、ピクセルの数値を調整することで、微調整が可能です。 |
画像をアップロードした場合、画像ファイルが置かれているサーバーはどちらになりますか? | 画像は Kaizen Platform のサーバー上にアップロードされています。 |
自社サーバー上にアップロードした画像を、挿入や差し替えすることはできますか? | できます。エディターの下部にある JavaScript タブを開き、画像のアップロード先の URL を変更することで、指定したサーバーから画像を表示させることができます。 |
最初の エクスペリエンスでは、デザインのどこを変更すればいいのでしょうか? | ファーストビジュアルや、ボタンの色を変えるだけであれば、 画像の変更 や スタイルを編集 で対応が可能なため、比較的簡単に エクスペリエンスをスタートすることができます。 ボタンの色を変えるだけでも、10%〜20%の改善が見られるケースが多数ございます。 |
アップロードできる画像に容量制限はありますか? | 1つの画像につき 2MB、1デザイン案につき 10MB までとなっております。 |
エディターを使わず、直接コーディングすることはできますか? | 可能です。 エディター左下の JavaScript タブを表示させることで、直接コーディングが可能になります。また、オファー作成時に オファータイプ を スプリット URL とに設定することで、事前に作成し、公開されたページの URL にリダイレクトを行う、スプリット URL 型の エクスペリエンスを行うことができます。 |
エディターで画像を編集することはできますか? | 画像を書き換えることはできません。 画像を変更したい場合は、新しく画像を作成していただき、エディターで画像を差し替えて、デザイン案を作成していただく必要があります。 |
0 コメント