フォームで申込があったURLパラメータの取得javascript |自社アフィリエイト

javascriptでフォームURLパラメータ取得 アフィリエイト

自社でアフィリエイトの仕組みをつくれないかを検討した際のメモです。

特に、URLの後半につくパラメータ部分で悩む方が多いのかなと思います。


アフィリエイター個別にURLを自動割り振りする方法

パラメータを設定し、フォーム送信時に記録する方法

についてまとめていきます。

前提条件として、


私はプログラミングをほとんど勉強していない

WEB上にある情報を基に、切り貼りしてつくってみた

Cookie機能はなし

という部分をご了承ください。

変な部分があるかもしれません。

が、実装できているので問題はないかなと思います。

目次

個別アフィリエイターにパラメータ付URLを自動割り振りする方法

アフィリエイトシステムというと、個別にURLパラメータがありますよね。

kaigaitensyoku.com/?aaaaa

?の後に続いている文字列です。

アフィリエイターが登録した際に、自動でパラメータを設定・通知

パラメーターを通知する方法は簡単です。

Googleフォームで自動メール返信内容をカスタマイズ・変更する方法」の記事のように、スプレッドシートとフォームを連携させ、取得情報を基にスプレッドシートで関数を使えば、すぐに出来ますね。

そこでパラメータを作成し、そのURLをメールで自動送信すれば実装可能です。

設定したURLパラメータからのフォーム申込を記録する方法

アフィリエイターへのパラメータ付URLの付与が終わったら、どのURLから申込があったのかを記録する仕組みが必要です。

このURLにフォームが設置されていたとして、フォーム送信時にこのURLを記録しなければ成果を測定できません。

例えば、以下のようなフォームがあったとします。

ベトナム語が入っていますが気にしないでください。

仕組みとしては、URLのフォーム欄部分に、開いているWEBページのURLを記録して、フォームと一緒に送信するというやり方です。

ボタンクリックという動作に


ボタンクリックという動作に

①URLのフォームに、開いているWEBページのURLを入力

②フォーム送信

という2つの機能をつけています。

javascriptでURLパラメータを取得・記録する方法

例えば、先程のフォームはこのようになっています。

<div>

<form action="フォームURL" method="post" target="hidden_iframe" onsubmit="submitted=true;">

<dl>

<dt>name</dt>
<dd>
 <input id="name" type="text" name="entry.1736438258" required="" placeholder="*Họ Tên">
</dd>
<dt>phone</dt>
<dd>
 <input id="phone" type="text" name="entry.633612144" required="" placeholder="*Số điện thoại di động">
</dd>
 <dt>old</dt>
<dd>
 <input id="old" type="text" name="entry.1286660865" required="" placeholder="*Tuổi">
</dd>
<dt>place</dt>
<dd>
 <input id="place" type="text" name="entry.1531710985" required="" placeholder="*Thành phố">
</dd>
<dt>so tien muon</dt>
<dd>
 <input id="money" type="text" name="entry.1339764668" required="" placeholder="*Sổ tiền cần?"> 
</dd>
<dt>URL</dt>
<dd>
<input type="text" name="entry.1927122177" id="name3" value="入力不要" readonly="">
</dd>

<div class="right">
 <button type="submit" onclick="showUrl3();submitForm()">Đăng ký nhanh</button>
 </div>

</dl>

</form>
<script type="text/javascript">
function showUrl3(){
    var url= location.href;
    document.getElementById( "name3" ).value = url ;
}
function submitForm(){
  var formObject = document.getElementById('formId');
  formObject.action = "フォームURL";
}
</script>

<script type="text/javascript">var submitted = false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='フォーム提出後に遷移させるURL';}"></iframe> 

</div>

*フォームURLという部分は、Googleフォームと連携させているので、そのURLになります。

*フォーム提出後に遷移させるURLは、サンクスページのURLです。適当でOKです。

ポイントは2点あります。

ボタンクリックに2つの機能・動作をつける

ボタンを押した後に、

①URLというフォーム欄に、開いているページURLを入力

②フォーム送信

という2つの機能が働くようになっています。

<button type="submit" onclick="showUrl3();submitForm()">Đăng ký nhanh</button>

javascript | 2つの機能・動作についての記述

function showUrl3 = URLというフォーム欄に、開いているページURLを入力

function showUrl3(){
    var url= location.href;
    document.getElementById( "name3" ).value = url ;
}

function submitForm = フォーム送信

function submitForm(){
  var formObject = document.getElementById('formId');
  formObject.action = "フォームURL";
}

それぞれについての動きについての記述です。

インラインで書くのは普通じゃないみたいですが、初心者でそんなことも知りませんでした・・・。

まあ、動いたのであとは問題ないですよね。

<script type="text/javascript">
function showUrl3(){
    var url= location.href;
    document.getElementById( "name3" ).value = url ;
}
function submitForm(){
  var formObject = document.getElementById('formId');
  formObject.action = "フォームURL";
}
</script>

Javascriptで開いているページURLの取得が難しかった・・・

どのサイトを見ても、明確な答えが書いておらず苦労しました。

適当につなぎ合わせてテストをしている内に、なぜか成功したので、備忘録として、この記事を執筆しました。

参考になった方がいれば、シェアしていただけると幸いです!

Rank


ブログランキング・にほんブログ村へ このエントリーをはてなブックマークに追加
よかったらシェアしてね!

この記事を書いた人

ベトナムのハノイに住んでいるアラサー。
九州大学卒業。M銀行で勤務した後に、ベトナム移住。

旅行・カメラ・犬・猫が趣味です。

コメント

コメントする

目次
閉じる