こんにちは、ASUE株式会社広報のN村です。
弊社では、MAツールであるAccount Engagementや、CRM/SFAツールであるSalesforceを活用しています。ありがたいことに多少のコーディングができるということで、社内のAccount Engagementの設定や、ページ・フォームの作成などを、わたしが一手に担っていたりします。
現在、お問い合わせや資料請求用のページをAccount Engagementのフォーム機能を使って作っているのですが……
管理、めちゃくちゃ面倒くさくないですか？？？
たとえば、1つの資料請求ページを作る場合、綺麗なURLを設定したいなら、ランディングページ機能でページを作成→中に埋め込むフォームを作成→レイアウトテンプレートでHTMLやCSSを調整……と、手順が結構多いです。
1〜2件ならともかく、イベントやホワイトペーパーの数が増えると、10件・50件とどんどん増えていき、毎回作るのはなかなかの労力になります。
さらに、「何か修正が発生したら、これ全ページ対応しなきゃいけない！？」となる未来は、できれば避けたいですよね。わたしは全力で避けたいです。
もちろん、Account EngagementやSalesforceを活用することで、マーケや営業部門の業務効率化は進められると思いますが、フォームのページ作成だけを切り出してみると、正直かなり手間のかかる部分もあるな……というのが本音です。
ということで今回は、Account Engagement上でのフォーム作成を任されるようになった超初期のわたしが、未来の面倒臭さを察知して実装した管理方法をご紹介します！
〜当時のやりとり〜
このフォームとこのフォーム、作ってください！
デザインは同じでいいので、複製して中身を差し替えればOKです！
……この仕様だと、レイアウトテンプレートを別々に作る必要がある？
そうしたら将来の修正がめっちゃ大変になるのでは？
ということで、Account Engagementのフォームの基本からご説明します！
目次
Account Engagementのフォームとは？
Salesforce Account Engagement（旧Pardot）では、見込み顧客の情報を収集するためのフォームを作成できます。
フォームを作るためには、以下3つの機能が関わってきます：
- フォーム機能
- レイアウトテンプレート
- ランディングページ機能
フォーム機能とは？
- 見込み顧客（プロスペクト）の情報を収集するための入力フォームを簡単に作成できる
- （例：氏名、メールアドレス、会社名など）
- 入力内容に応じて、次のような処理が自動で実行可能：
- メールの自動送信
- スコア加算（見込み度の判定）
- 特定リストへの振り分けなど
- Salesforceと自動連携することで、営業チームへの情報共有もスムーズに
- フォーム単体作成でも URL は設定され個別アクセスが可能
- URLが「https://設定したドメイン/l/012345/YYYY-MM-DD/xxx」のような形
- iframeへのフォーム埋め込みにはこのURLを使う
- （ただしURLから中身がわかりにくく、管理に不便）
- URLが「https://設定したドメイン/l/012345/YYYY-MM-DD/xxx」のような形
入力項目が共通であれば、複数ページでフォームを使い回すことができます。また、フォームはAccount Engagement外のWebサイトにも埋め込み可能です。
レイアウトテンプレートとは？
- フォームやページの見た目・デザインをカスタマイズするテンプレート
- HTML・CSSで編集可能。ブランドやサイトデザインに合わせて調整できる
- 一つのテンプレートを複数フォームに使い回せる
- ただし、ページごとの細かい見出しや画像の出し分けは標準機能では不可
HTML/CSSが書ければ柔軟なデザインが可能ですが、適用したページごとに書き換えられる要素が少なく、「ページごとにキービジュアルや見出しを変えたい」といった複雑なニーズには、標準機能だけだと不十分です。
例えば、フォームのページが以下のようなデザインの場合。
レイアウトテンプレートを使い回しつつ、資料のタイトル・画像・資料の概要だけを書き換えたいですが、標準機能では難しいです。
ランディングページ機能とは？
- Account Engagementのドメイン内にページを作成できる機能
- 自由にURL（バニティURL）を設定できる
- レイアウトテンプレートの適用も可能
- Account Engagementで作成したフォームを埋め込んで使用するのが一般的
フォーム付きページを作る場合、このランディングページにフォームを埋め込むのが主流です。
課題：大量ページの作成・修正がつらい！
さて、一つのフォームを作るのに、これらの3つの機能を全部設定する必要があります。となると、「コピーで済まそう」では済まない管理の煩雑さが出てきますね。
レイアウトテンプレートを複製して対応もできますが、後から修正が入った場合に全ページ修正が必要になる可能性が高く、非常に非効率です。
絶対にやりたくないヨ……
解決策：管理をラクにするための運用方法
管理方針
- 使い回せるものは最大限使い回す（フォーム、レイアウトテンプレート）
- 編集箇所を最小限に絞る
- ページ追加時の対応をできるだけ簡素化
全体の流れ
- 1. フォーム作成（初回のみ）
- 入力項目など通常通り設定
- 2. レイアウトテンプレート作成（初回のみ）
- ランディングページごとに切り替えたいHTML部分を空に
- 書き換え用のJSファイルを用意し、テンプレート内で読み込む
- 3. ランディングページ作成（ページ追加ごと）
- URL・フォーム・テンプレートの設定を行う
- 4. JSファイルにページデータを追加（ページ追加ごと）
- 出し分けたい見出しや画像などのデータを定義
1.および2. 共通部分の作成（フォームとレイアウトテンプレート）
共通のフォームとレイアウトテンプレートを作成します。フォームは通常通り、必要な項目を設定すればOKです。
レイアウトテンプレートでは、(1)書き換え用のjsファイルを読み込むことと(2)ランディングページごとに切り替えたいhtmlをそれぞれ空にしておくことが必要になります。以下がコード例（<body>タグの中身）。
See the Pen Untitled by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.
書き換え用jsは下記のような内容。このファイルは任意の自社管理ドメインにアップロードすればOKです。
See the Pen Account Engagement大量生産系フォーム用の書き換えjs例 by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.
このjsによって、このレイアウトテンプレートを設定されたランディングページにアクセスした際、動的に見出しや画像などが出力されるようになります。（デザインによって適宜変更します。）
3. ランディングページの作成（ページ追加ごとに対応）
コンテンツの出し分けに使用するバニティURLの設定と、1.で作成したフォームとレイアウトテンプレートを使用する設定をします。
4. ページデータ追加（ページ追加ごとに対応）
書き換え用jsのconst pageData = {...（中略）...}内に、追加するページデータを書き加えてアップロードします。（※必要なテキスト・画像は別途作成）
See the Pen Untitled by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.
この仕様で作っておけば、あとはフォーム追加時に3.ランディングページの作成（管理画面上の設定）と4.ページデータの追加の対応をすれば良くなり、少しだけ管理が楽になります。
また、レイアウト等の修正がある場合も1ページ分対応すればOKです。
ページタイトル+フォームのようなシンプルなページ構成ならこんなことする必要ないですが、画像や箇条書き等を入れたいときはぜひ活用してみてください！
おまけ：動的コンテンツ（機能）ではできないの？
Account Engagementには「動的コンテンツ機能」もありますが、以下の理由で採用を見送りました。
- 出し分けにはプロスペクト情報が必要（新規ユーザー向けには不向き）
- 条件に「URL」などを使うのが困難
- コンテンツバリエーションの作成にリッチテキストが必要
- 複雑なデザインには向かない
こんな感じで、今回の目的では使えませんでした。
ということで、自前のJSで「擬似的な動的コンテンツ」を実現しています！
まとめ：Account Engagementのフォーム管理は修正箇所を減らす運用を
Account Engagementでの大量のフォーム管理が必要な場合は、
- フォームとテンプレートはできる限り使い回す
- 複雑なページデザインは、JSで出し分ける
- 修正が入っても1ファイル対応で済むように設計する
以上が個人的最適解かな〜と思います。何が最適解かと少し調べてみましたが、同じような悩みをあまり見かけなかった気がするので、ASUEでの方法をご紹介しました。
ChatGPTにも「最適解なんですかね？」と聞いてみたところ……
うん、それでいいと思う（大意）
と、返ってきました（笑）
HTML/CSS/JSの知識は必要ですが、構造自体はシンプルなので、同じような課題を感じている方はぜひ試してみてください！
もし「ちょっと難しそう…」「やってみたけどうまくいかない…」という場合は、お気軽にご相談いただければと思います！
ASUEでは、SalesforceやAccount EngagementなどのCRM／SFA／MAツールの導入支援・運用支援も行っています。
フォーム周りの構築や運用についてもサポート可能ですので、ぜひご活用ください！
Salesforceをはじめとした
CRM・MAの無料相談 受付中
- CRMやMAツールを導入したいけどよく分からない
- 導入したけど、うまく活用が進んでいない
- 活用しているが、その先の成果に繋がっていない
上記のようなお悩みを持った方へ
ぼんやりとした状態でもOK！
気軽にお悩み、課題感を聞かせてください！
この記事を書いた人
2016年入社。ASUE株式会社広報を担当。メールマガジン「ほぼ週刊ASUE通信」もお送りしています。ほぼ週刊なので週刊ではない。月初に公開するWebマーケティング情報をまとめたツキイチシリーズはちゃんと月刊です。
趣味はミュージカル観劇。おすすめ作品を知りたい方はN村のTwitterまでお問い合わせください。パーソナルカラーはイエベ春。
得意なこと
文章を書きます。
ひとこと
メルマガにご登録いただけると泣いて喜ぶかもしれません。
