LP 管理

LP テンプレート管理

LP テンプレート管理でできること

LP テンプレート管理では、広告URLに設定する以下LPのテンプレートを作成・編集できます。
・LP
・アップセルページ
・確認ページ
・サンクスオファーページ
・サンクスページ

LPテンプレート

ecforceではLPを管理画面からHTML・CSS・JavaScript・画像より自由自在にデザインできます。
作成したLPは「マーケティング管理 > 広告管理 > 広告 URL 管理」画面で広告URLにセットすると、広告URLからアクセス可能になります。

具体的な活用シーン

あらかじめ広告URLを構成する各ページごとのテンプレートを用意することで、広告URLの作成・更新作業を効率的に行うことができます。
・確認ページの表示内容を一括で更新したい
・サンクスページの表示内容を一括で更新したい

LP テンプレート管理画面

LP テンプレート管理は「マーケティング管理 > LP 管理 > LPテンプレート管理」で表示されます。

LP テンプレート一覧の確認・編集

登録されているLPテンプレートの一覧を確認・編集できます。

LPテンプレートを新規作成する場合は「新規作成」をクリックします。
登録済みのLPテンプレートを編集する場合は「編集」をクリックします。
登録済みのLPテンプレートを複製して作成する場合は「コピー作成」をクリックします。
LPテンプレートの表示順を変更する場合は「並び順」にてドラッグ&ドロップを行う、もしくは「先頭」「末尾」をクリックします(LPテンプレート作成時は最上部に表示されます)。

スクリーンショット 2021-09-16 11.37.14.png

各フィールドに設定済みのコードを条件とした検索

以下の検索条件にコードを入力して、各フィールドに設定したコードによる検索が行えます。

  • ヘッダー編集
  • ボディー編集
  • フッター編集
  • CSS編集
  • Javascript編集

テキストボックス内に入れたコードで検索可能です。
改行して複数のコードで検索が行えます。
※複数のコードを検索した場合「or検索」になります。検索したコードのどれか1つでも入力されているLPテンプレートが検索結果に表示されます。

LP テンプレート管理画面における各項目

LP テンプレート管理に関する設定として、以下項目を確認・編集できます。

基本情報

ID LPテンプレートを一意に特定する管理用のIDです。
LP テンプレート名 LPテンプレートの名前です。
LP テンプレートタイプ 広告URL管理で設定できるテンプレートのタイプです。
各テンプレートの詳細は「LP テンプレートタイプ」をご確認ください。
説明 テンプレートの管理用の説明です。
LP テンプレートラベル LPテンプレートに設定されたラベルです。
LP テンプレートラベルは「設定 > ラベル管理 > LP テンプレートラベル管理」で追加、編集、削除を行えます。
タイトル(SEO) テンプレートが表示された際のページのtitleタグです。
メタディスクリプション(SEO) テンプレートが表示された際のページのmeta descriptionタグです。
メタキーワード(SEO) テンプレートが表示された際のページのmeta keywordタグです。
ヘッダー情報 <head></head>に表示するコードです。
ボディー情報 <body></body>の内側に表示するコードです。
記述に関する詳細は「ボディー編集」をご確認ください。
フッター情報 <body></body>の内側に表示するコードです。
ボディー情報のあとに出力されます。
CSS情報 テンプレートに適用するCSSです。

Caution!!

「LP テンプレートタイプ」で選択したテンプレートタイプごとにデフォルトでCSSが記述されています。
デフォルトの記述を消去すると、購入フォームや確認画面などのデザインが崩れます。

デフォルトの記述は下図「可変部分」を編集することで、色などの見た目変更が可能です。
スクリーンショット 2021-09-16 14.14.45.png
CSSを追加で定義する場合は、本項目で追記も可能です。
Javascript 編集 テンプレートに適用するJavaScriptです。
作成日 LPテンプレートが作成された日時です。
更新日 作成されたLPテンプレートが更新された日時です。
  • 「LP テンプレートタイプ」を選択すると、フォーム部分に関するデフォルトデザインの記述が「ボディー編集」と「CSS 編集」に入力されます。
  • デフォルトのデザインを利用する場合は「ボディー編集」と「CSS 編集」にすでに入力されている記述を削除しないでください。

使用されているURL一覧

LPテンプレートが使用されている広告URLの一覧です。

ID 広告URLを一意に特定する管理用のIDです。
クリックで対象広告URLの「基本設定」ページに遷移します。
URL 広告URL(販売URL)の「https://ドメイン」以下です。
クリックで対象の販売URLへアクセスします。
説明 広告URLの管理用の説明です。

使用されている商品一覧

LPテンプレートが使用されている商品の一覧です。

ID 商品を一意に特定する管理用のIDです。
クリックで対象商品の「基本設定」ページに遷移します。
商品名 商品の名前です。
オファー商品名 商品に紐づくオファー商品の名前です。
クリックで対象オファー商品の「基本設定」ページに遷移します。

プレビュー

作成中のテンプレート内容を確認できます。
※「パスワード保護機能:有効」の場合は、プレビュー時にパスワードの入力を求められます。

Caution!!

以下項目はプレビューでは表示されず、確認できません(グレーの枠で表示されるのみ)。

  • __PAYMENT_FORM__
  • __PAYMENT_FORM_CONFIRM__
  • __PAYMENT_FORM_UPSELL__
  • __PAYMENT_FORM_CV_UPSELL__
  • __PAYMENT_FORM_CV_XSELL__
  • __PAYMENT_FORM_PERFORM__
購入フォームを適用した状態で表示確認を行う場合

テスト用の広告URLを作成し、テスト用広告URLにテンプレートを設定して表示確認を行います。
「テンプレートタイプ:LP」以外のテンプレートタイプを確認する場合は、テスト用広告URLからテスト購入を実施し、各画面を表示して実施します。

編集画面でプレビュー表示する場合

「保存前プレビュー」ボタンをクリックしてテンプレート内容を確認します。
※プレビュー前に必須項目に値を入力します。

スクリーンショット 2021-09-16 14.52.04.png

詳細画面でプレビュー表示する場合

「プレビュー」ボタンをクリックしてテンプレート内容を確認します。
※プレビュー前に必須項目に値を入力してください。

スクリーンショット 2021-09-16 14.53.40.png

ファイルアップロード

画像、css、js等のファイルをアップロードできます。
すべてのファイルは{{ file_root_path }} 以下に設置されます。

(例)<script src='{{ file_root_path }}/test.js'></script>

スクリーンショット 2021-09-16 15.20.26.png

Caution!!

  • フォルダ名やファイル名には「半角英数字、-(ハイフン)、_(アンダーバー)、.(ドット)」が使用可能です(その他の記号などは非推奨です)。
  • フォルダに存在するファイルと同名のファイルをアップロードした場合、もともと存在していたファイルは新しい同名のファイルに上書きされます。
  • ファイルアップロードに作成したフォルダやアップロードしたファイルを削除してしまった場合、
    削除したものと同じ名前のフォルダやファイルを作成することで、再度ファイルアップロード内に削除したフォルダやファイルを表示することが可能です。

各項目の補足事項

LP テンプレートタイプ

LPの場合

広告URL管理「LP設定」テンプレートに選択できます。
※URLは「https://ドメイン/lp?u=広告URL名」

アップセルページの場合

広告URL管理「アップセル設定」テンプレートに選択できます。
※URLは「https://ドメイン/lp/upsell?u=広告URL名」

確認ページの場合

広告URL管理「確認ページ設定」テンプレートに選択できます。
※URLは「https://ドメイン/lp/confirm?u=広告URL名」

サンクスオファーページの場合

広告URL管理「サンクスオファー設定」テンプレートに選択できます。
※URLは「https://ドメイン/lp/cv_upsell?u=広告URL名&order_id=受注番号」

サンクス確認ページの場合

広告URL管理「サンクス確認ページ設定」テンプレートに選択できます。
※URLは「https://ドメイン/lp/cv_confirm?u=広告URL名&order_id=受注番号」

サンクスページ

広告URL管理「サンクスページ設定」テンプレートに選択できます。
※URLは「https://ドメイン/lp/complete?u=広告URL名&order_id=受注番号」

ボディー編集

購入画面内で表記する箇所(フォーム部分など)は、以下の値で入力します。

テンプレートタイプ 記述 表示内容
LP __PAYMENT_FORM__
  • 購入フォーム

確認画面スキップの場合は、以下も表示されます。

  • 購入内容確認
  • 購入ボタン
アップセルページ __PAYMENT_FORM_UPSELL__
  • アップセルボタン
__PAYMENT_FORM_CONFIRM__
  • 購入内容確認
  • 購入ボタン
確認ページ __PAYMENT_FORM_CONFIRM__
  • 購入内容確認
  • 購入ボタン
サンクスオファーページ __PAYMENT_FORM_PERFORM__
  • 購入完了メッセージ
__PAYMENT_FORM_CV_UPSELL__
  • サンクスオファー(アップセル訴求)
__PAYMENT_FORM_CV_XSELL__
  • サンクスオファー(クロスセル訴求)
サンクスページ __PAYMENT_FORM_PERFORM__
  • 購入完了メッセージ

Caution!!

  • __PAYMENT_FORM_CV_UPSELL__
  • __PAYMENT_FORM_CV_XSELL__

上記2つの変数をLPテンプレート内で複数回使用すると正常な挙動とならない可能性がございます。

使用できる変数一覧

LPテンプレートはLiquidというテンプレートエンジンを採用していて、テンプレート内容に「受注情報」を変数で動的に呼び出せます。
使用できる変数一覧は、LP テンプレート管理の「新規作成/編集」画面の右上「使用できる変数一覧」をクリックして確認できます。

スクリーンショット 2021-09-16 15.13.27.png※テンプレート内の「__PAYMENT_FORM__」はひとつのテンプレートエンジンより呼び出しているecforce全体のデフォルト設定のため、編集することはできません。

高度な機能になりますが、Liquidを利用することでLPテンプレートの条件分岐が可能です。
ただし、Liquidの使い方についてはカスタマーサポートのサポート対象外です。以下、参考例ベースでの情報公開になります。

参考イメージ

LPテンプレートの各項目は以下参考イメージのように呼び出されます。

(例)参考イメージ

この記事の目次

このセクションの記事

LP 管理