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