bubbleと組み合わせたアフィリエイトシステムを作りたいです。

Webflow
1

お世話になっております。白鼠です。

アフィリエイトシステムを簡易的に自身で実装したくて、ご相談させていただきました。
実装したい機能は下記です。

（0. bubbleでアフィリエイターのunique idを作成し、それをクエリパラメータとしてLPのリンクに載せる。）

  1. webflowで作成しているLPに訪れた人の、URLからクエリパラメーターの中身を取得する。
  2. 取得したアフィリエイターの識別idを元に、bubbleのDBにレコード操作を行う
  3. 申し込みボタン等がクリックされた際に、2で追加したレコードに、申込みがあったと編集を行う

例) Example Domain
というリンクが開かれた際に、123456の部分をwebflow側で取得したいです。そしてそのデータをbubbleのDBに返したいです。

どの様な実装が可能か、ご意見お伺いしたいです。
尚、別でDBを使用した方がいい場合、そのご意見もいただけますと幸いです。

簡素な共有になり、恐縮ですが、
何卒宜しくお願い申し上げます。

2

@shironezumi

1意見としてですが、
Webflow の機能だけでの実装はできないと思うので、Custom code JSを書く感じになると思います。

実装としては、大まかには
Bubbleへ飛ぶ指定要素を定義する。
選択された要素をjavascriptで取得
パラメータ付きのURLを作成して、ボタンのhrefを作成し、Webflowへ。

になると思います。詳細なやり方はフォーラムに書いてました。

Dropdown picker as URL

Custom code in head and body tags

別でDB立てても実装の工程は、変わらないと思うので、（AWS使えば、仕組み化はできそう？）程度かなーと思います。

「いいね！」 3
3

別案（というか自分はこうしたという例）ですが、LP側のページにGTMでJSを設置。
このJSでBubble側のドメインのCookie（またはWebstrage）にパラメータを書き込む。
Bubble側に入ってきた時にCookie情報から値を取得し対象ユーザー情報としてDBへ書き込み。

この方法の利点としてはパラメータのキーさえわかれば、GTMのJS定義次第でどんなパラメータでも取得できるところです。
また、Cookieに書き込む時のキーも自由に設定できるため管理上都合の良い形式として受け渡しできます。

ご参考になれば！

「いいね！」 3
4

つばささん、yukikunさん
ご回答いただきまして、ありがとうございます！！

本日、いただきましたヒントを元に実装を試みてみます。

また、結果ご報告させていただきます。

「いいね！」 2
5

yukikunさん
すみません。

yukikunさんの方法を使わせていただいているのですが、webflowのLP側に埋め込むJSコードが中々うまくいかず。

サンプルコードなどご教示いただけないでしょうか。

現状、webflowのpageのbody tagに下記のコードを埋め込んでおります。idの取得自体はできているようですが、cookieに書き込むところの作法が間違っているのかと思います。

<script>

// URLを取得
var url = new URL(window.location.href);

// URLSearchParamsオブジェクトを取得
var params = url.searchParams;

// getメソッド
console.log(params.get('id')); 

document.cookie = 'test_cookie=params.get('id')';

</script>
「いいね！」 1
6

タグですがこのような形です。
例はgoogleの測定タグのうちutm_sourceとutm_campaignを取得するケース

パラメータキーがないと書き込みでエラーが出るケースがあったため、キーがあるかを確認した上で「書き込み先ドメイン」に設定した先へ書き込みを行っています。

<script type="text/javascript">
var url = window.location.href;
var keyToFind = 'utm_source';
if(url.indexOf(keyToFind + '=') > -1) {
  var valueFound = url.substr(url.indexOf(keyToFind + '=') + keyToFind.length + 1).split('&')[0];
  {{JS-SetCookie}}('utm_source', valueFound, 2592000000,  undefined, '書き込み先ドメイン');
}

var keyToFind = 'utm_campaign';
if(url.indexOf(keyToFind + '=') > -1) {
  var valueFound = url.substr(url.indexOf(keyToFind + '=') + keyToFind.length + 1).split('&')[0];
  {{JS-SetCookie}}('utm_campaign', valueFound, 2592000000,  undefined, '書き込み先ドメイン');
}

</script>

GTMで使用する場合、ユーザー定義変数にJSを設定した方が効率が良いため、上記の中で{{JS-SetCookie}}の中身は次の通りです。
これによって、Cookieの有効期間をミリ秒単位で制御しています。

function() {
  return function(name, value, ms, path, domain) {
    if (!name || !value) {
      return;
    }
    var d;
    var cpath = path ? '; path=' + path : '';
    var cdomain = domain ? '; domain=' + domain : '';
    var expires = '';
    if (ms) {
      d = new Date();
      d.setTime(d.getTime() + ms);
      expires = '; expires=' + d.toUTCString();
    }
    document.cookie = name + "=" + value + expires + cpath + cdomain;
  }
}

Cookie書き込みの時にドメインを正しく指定しないと、書き込みができないまたは読み込めない事象が発生します。

以上、ご参考になれば！

「いいね！」 3
7

ありがとうございます。
大変勉強になります！

挑戦してみます。

「いいね！」 1