👩‍💻

formrunの埋込みフォームでアフィリエイトの成果発生通知をする

なっとう

2025/02/27に公開

 はじめにホームページを運用している方から

「A8.net以外のアフィリエイトを使うことになったけど、formrunの埋込みフォームだと成果通知出せない」

という話をいただきました。

それぞれの機能を考えた結果、最終的に下記のようなつなぎ方で成果通知できるようにしたので、記事にします。


 formrunとはformrunとは、入力可能なフォームを誰でも気軽に作成でき、入力内容の管理・分析も容易にできるサービスです。

 formrunの埋込みフォームとはLPやHPにお問い合わせフォームや申込みフォームを作成することがあります。

運用をしていくと、ビジネスの要件に合わせて、問い合わせフォームや申込みフォームの質問内容を変えたい、ということがあります。

変更するのは項目だけなのに、デザイナーやエンジニアに依頼すると時間も工数もかかってしまいます。

formrunのフォームをLPやHPに埋め込んでしまえば、ビジネスサイドの方が気軽に運用でき、とても便利です。詳細はこちらをご覧ください。

 成果通知するための障害点今回の要件は下記です。
アフィリエイトサービスの成果通知はGETリクエストしか受け付けない（POSTリクエストは受け付けていない）
formrunはPROFESSIONALプランを契約しているのでwebfookが使える
formrunのwebfookはPOSTリクエストしかできない
問題は、POSTしか出せない機能から成果通知のGETリクエストを出す必要があるという点です。であればリクエストを変換してしまえばよい、と考えました。変換するためにGASでwebサーバを立てても良かったんですが、ビジネスサイドからブラックボックスになってしまうため、自動化ツールを使うことにしました。

自動化ツール例）

Zapier

Make.com

IFTTT
無料でそれなりに使えるので、今回はMake.comを使いました。

今回の対応の一番のポイントはこの点になります。
障害がクリアできたので、下記機能を駆使して繋ぎこむことができます。
phpの$_GET機能
formrunのhiddenテキスト
formrunの初期値機能
ここまで読んでいただければ、あとはそれほど難しいことはしていないので、これ以降は読み飛ばしていただいて構わないと思います。

 実装手順大まかに下記になります。
formrunのフォームにアフィリエイトのパラメータ用の隠し項目を設定する
formrunのフォーム埋込みスクリプトに、初期値を設定する
formrunのwebfookを設定する
make.comを設定する



 1. formrunのフォームにアフィリエイトのパラメータ用の隠し項目を設定するhiddenテキストという項目を使えば隠し項目を作成できます。

formrunの公式が詳しいので、こちらを御覧ください。

 2. formrunのフォーム埋込みスクリプトに、初期値を設定する埋め込みの場合の初期値の設定方法はこちらになります。要は、URLで受け取ったパラメータ(クエリストリング)をhtmlのdivタグに記載してね、ということになります。
もともとformrunの埋込みフォームは使っていたので、APサーバにあるhtmlは下記のようになっていました。
page.html
<!DOCTYPE html>
<html lang="ja">
<head>
  ...
</head>
<body>
  <main>
    ...
    <script src="https://sdk.form.run/js/v2/embed.js"></script>
    <div
      class="formrun-embed"
      data-formrun-form="{フォームの設定を特定する値}"
      data-formrun-redirect="true">
    </div>
  </main>
</body>
</html>
このままだとURLパラメータ(クエリストリング)を取れません。サーバでphpは使えたので、ファイル名をpage.htmlからpage.phpにしてphpとして動作するようにしました。それにより、下記のような書き方ができ、パラメータを初期値として埋め込むことができます。

例）https://aaaa.com/inquiry?affiliate=AAA でアクセスがあり、隠し項目がfield_XXの場合
page.php
<?php
$affiliate_param = isset($_GET['affiliate']) ? htmlspecialchars($_GET['affiliate'], ENT_QUOTES, 'UTF-8') : '';
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  ...
</head>
<body>
  <main>
    ...
    <script src="https://sdk.form.run/js/v2/embed.js"></script>
    <div
      class="formrun-embed"
      data-formrun-form="{フォームの設定を特定する値}?_field_XX=<?php echo $affiliate_param; ?>"
      data-formrun-redirect="true">
    </div>
  </main>
</body>
</html>

 3. formrunのwebfookを設定するwebfookの設定方法はこちらをご覧ください。
今回の設定のポイントは下記になります。
エンドポイントのURLはmake.comのエンドポイントにする
トリガーを 回答>新規回答 にする

 4. make.comを設定する下記のような画面で設定ができます。直感的に設定できますので、設定してみてください。自分でも設定方法忘れるな、と思ったときに、詳しく書くかも知れません。


 最後に今回これを書こうと思ったのは、「GASでつなぎこんじゃえ〜」と思いつつ、会社のエンジニアに相談したら、もっとよい解決策が出てきて助かったなぁと思ったためです。

意見を出し合える仲間がそばにいるってとっても心強い。

今回の記事が、一人で困っている方や、別の考えが欲しい方に「お！いいね〜！」と思っていただけたら嬉しいです。

他の解決策としてこんなんあるよ！っていう提案や改善策も、ぜひください！

DELTAテックブログPublication

DELTAは、ベンチャースタートアップなどの成長企業向けに、ソフトウェア・プロダクト開発や技術選定支援などの技術支援事業を提供しています。また、成長企業向けに様々な事業支援を提供するSEVENRICH GROUPに属して、グループ内の事業会社や、出資先の支援もおこなっています。

はじめに

formrunとは

formrunの埋込みフォームとは

成果通知するための障害点

実装手順

1. formrunのフォームにアフィリエイトのパラメータ用の隠し項目を設定する

2. formrunのフォーム埋込みスクリプトに、初期値を設定する

3. formrunのwebfookを設定する

4. make.comを設定する

最後に

Discussion