ページ編集では、Webページ内のコンテンツの修正・追加・削除がノーコード、またはローコードで簡単に実施できます。テキストや画像、ボタン、レイアウトの編集はもちろん、動画の追加やHTMLの編集も可能です。
ページ編集の具体的なアイデアを確認したい場合は、インスピレーションギャラリーをご覧ください。
また、ページ編集を利用する際は、Ptengineの基本タグをサイトソースのタグ内に直接設置することをお願いしております。詳しくは、「ページ編集を使う前に必ずお読みください」をご覧ください。
ページ編集の始め方 #
ヒートマップまたはExperienceの「体験作成」からページ編集をご利用いただけます。
ヒートマップ(Insight)から始める場合
Webビュー画面右上の「施策する」ボタンからページ編集を選択すると、体験作成画面に入りページ編集を実行できます。
例えば、下記のようなシーンでご活用ください。
（例）
・ヒートマップで「○○に関するユーザーの関心が高そう」と判断したら、ページ編集で○○のコンテンツを追加してみる
・スクロール到達率がページの△△％の場所で高くなっており、離脱の原因となっている可能性があるとしたら、△△周辺のコンテンツを削除しコンテンツを入れ替えてみる
体験作成(Experience)から始める場合
Experienceにて「＋体験を新規作成する」から、ページ編集を選択し、ページ編集を実行します。
有料プランをご利用の方は、「アドバンス」からでもページ編集画面を起動することができます。
オリジナルの体験を作成したい場合は空白の「＋オリジナル作成」を、アイデアやテンプレートを参考にしたい場合はそれぞれのコンテンツをクリックし、体験名と編集ページを指定して編集を開始しましょう。
以下では、各詳細機能をご紹介します。
テキストの変更 #
テキスト編集
変更したいテキスト要素をクリックすると、ツールバーに「テキスト変更」が表示されます。テキストはこの画面上で直接変更可能です。
製品の価値を表現するタグラインやコピー、CTAボタンのテキストを変更し、コンバージョン率を検証してみましょう。
スタイル編集
ツールバーの「スタイル編集」をクリックすると、テキストやボタンの色/形を変更することも可能です。
要素やテキストのサイズ、字体、テキストの太さ、行間、配置、色、下線や斜体、取り消し線などの装飾、選択した要素の背景や枠線の色、太さの選択、余白などが設定できます。
画像の変更 #
画像要素を選択すると、ツールバーに「画像変更」が表示されます。お手持ちの画像ファイルをアップロードすると、元の画像と入れ替えることができます。
＜アップロード可能な画像形式＞
形式：jpeg,png,gif,avif,webp,ico,svg
容量：最大6メガバイト
アイキャッチ画像やバナー画像などを変更して、効果を検証してみましょう。テキストの変更と同様にスタイル編集からサイズや余白を調整可能です。
画像の設定（代替テキスト） #
画像要素を選択すると、ツールバーに「画像の設定」アイコンが表示されます。選択中の画像に設定したい代替テキスト(Alt)を入力してください。
代替テキストについての詳細は、Webアクセシビリティへの対応をご参照ください。
コンテンツの追加 #
コンテンツ追加では、テキストや画像、動画などのコンテンツを新たにページに追加できます。
（例）
・「カートに追加する」というボタンの近くに「7日間の返品保証つき」というようなテキストを追加
・新着記事への画像バナーを追加
・ページの中間に重要なCTAを追加...etc
コンテンツの追加方法
- 1コンテンツを追加したい場所の周辺（※）のコンテンツをクリックします。
緑色で表示されているレイヤー選択機能を活用して、適切なレイヤーを選択します。親レイヤーを選択することを推奨しています。（※詳しくは補足記事をご覧ください）
- 2「コンテンツ追加」をクリックして、コンテンツを追加したい場所を選択します。（※詳しくは補足記事「適切なレイヤーの選択」をご覧ください）
次の5つのタイプのコンテンツを追加することが可能です。
→見出しテキスト、本文テキスト、画像、ボタン、HTML - 3追加したコンテンツは、ツールバーから編集することができます。
Note：コンテンツを追加する場所やスタイル調整には、いくつかポイントがございます。詳細は、「コンテンツ追加のコツ」または「適切なレイヤーの選択」をご覧ください
コピーの作成と貼り付け #
既存のコンテンツと類似するコンテンツを追加したい場合、ツールバーの「コピーを作成する」アイコンをクリックすればコンテンツをコピーすることができます。
そして、「貼り付け」アイコンをクリックしてコピーしたコンテンツをページ内の別の場所に貼り付け、ツールバーからコンテンツを編集することが可能です。
リンクの編集 #
リンクアイコンからは「クリックアクションの有効化」と「イベント計測の有効化」について編集できます。
何もリンクが貼られていない要素は、デフォルトで「クリックアクションの有効化」がOFFになっています。ONにスライドし、クリックアクションの設定を行なってください。
既にリンクが設定してある場合は、ツールボックスの内容を編集してください。イベント計測についても同様です。
クリックアクションの有効化 #
クリックアクションの有効化とは、要素にリンクを設定する機能です。次のアクションタイプからクリック後のアクションを指定することができます。
アクションタイプ
リンクへ遷移：指定のURLに遷移します
LINE公式アカウントを開く：LINE公式アカウントのURLを入力することで、当該ページに遷移します
電話をかける：指定した電話番号に発信します（例：03-1234-5678 ※15文字制限）
テキストやURLのコピー：指定した文字列をクリップボードにコピーします（例：クーポンコードなど）
ファイルのダウンロード：URLで指定したファイルをダウンロードします
コードを実行：指定したJavaScriptコードを実行します。右下の矢印から入力枠を拡大できます。
Note：クリックアクションの利用シーンについては、次の記事「クリックアクションを有効化または変更する必要があるのはどんな時でしょうか？」をご覧ください。
イベント計測の有効化 #
「イベント計測を有効化」をONにすると、対象要素のクリックをイベントとして計測できます。ここでは、既存のイベントを選択もしくは新規イベントを作成可能です。
イベント設定の手順
-
1「イベント計測を有効化」をONにする
-
2イベントを選択もしくは新規作成する
既にPtengine Insightでイベントを計測している場合、プルダウンから選択できます（※計測数が 1 以上ないとExperienceに連携されませんのでご注意ください）。新規のイベントを設定したい場合は新規作成をクリックしてください。
ここで設定したイベントはデバイスに関わらず計測が開始されます。
-
3ゴール設定
ここで作成したイベントを体験の評価軸として設定したい場合は、このイベントを別途Experienceでゴール登録した上、体験のゴールとして設定ください。ゴールの登録方法はこちら。
新規作成する場合
イベント名について
イベントを新規設定する場合は新しいイベント名を入力してください。既に Insight で同じイベント名を使用している場合、そのイベントに今回の計測対象が追加されてしまいます。
Insightへの連携について
ここで作成したイベントは、Insightでも計測値を確認できます。イベント分析画面で確認ください。なお、設定したイベント一覧はイベント設定画面の「コーディングイベント」で確認できます。
変更・削除について
体験を配信中でも「イベント計測を有効化」をOFFにすれば、当該体験のイベント計測は停止します。もしイベント名ごとを削除したい場合は、チャットサポートから【体験で作成したイベントの削除依頼】として対象のイベント名をご連絡ください。
既存のイベントを使用する場合
既存のイベントの中に類似アクションがある場合はプルダウンから当該イベント名を選択ください。
Insightで作成したイベントは計測数が
Note：ここで作成したイベントは、体験のゴールや体験を配信する際のユーザーグループとして利用できるだけでなく、Ptengine Insightにも連携され、数値確認やセグメント条件としての利用も利用可能です。
コンテンツの削除 #
訪問者の関心が低いコンテンツは削除アイコンから1クリックで削除することができます。アテンションヒートマップでページを確認し、訪問者にあまり見られていないコンテンツは削除してみましょう。
HTMLの編集 #
より自由度高く編集を行いたい場合は、ツールバーのHTML編集アイコンまたは、メニューバーのコードの編集からソースコードを編集することができます。詳しくは「コードモードで体験を設定」をご覧ください。
▼ツールバー
▼メニューバー
ページ編集履歴 #
全てのページ編集履歴はメニューバーから確認できます。「変更数○箇所」をクリックすると、コンテンツの変更や追加した内容が確認できます。それぞれの変更履歴をクリックすれば変更箇所に誘導されます（削除したコンテンツを除く）。また、削除アイコンをクリックすると、その変更自体を取り消し、オリジナルに戻すことができます。
画面操作モード #
ページ上でクリックをしないと表示されないアコーディオンメニューの中のコンテンツ等（インタラクティブコンテンツ）を編集したい場合は、「画面操作モード」を利用します。
画面操作モードに切り替えた後、クリックしてコンテンツを表示したら当モードを終了し、通常の編集モードに戻りページ編集を行います。
