人気ワード

Copy Title & URL

Bookmark

Feed

Share

BASE(ベイス)とアフィリコード・システムの連携方法

BASE(ベイス)とアフィリコード・システムの連携方法

Attention
本マニュアルの内容は、記事更新日時点での情報です。
2021年9月以降、BASE側の仕様により、ショップドメインが「thebase.in」以外はCookieでの成果計測ができないようになっております。
※現在、ショップ新規開設時に「thebase.in」のドメイン選択はできなくなっております。

BASEに関してはすでにショップの開設が完了し、ショップドメインが「thebase.in」を使用している前提の解説となります。
https://thebase.in/

BASEとアフィリコード・システムの連携フローは図1-1の通りとなります。

BASEとアフィリコード・システムの連携フロー
図1-1:BASEとアフィリコード・システムの連携フロー

BASEとの連携に関して、以下の注意点があります。

  • https//○○○○.thebase.in というドメインの場合に限り連携可能。
    ※BASE側で提供しているショップドメインは連携不可になります。
  • Cookie発行ファイルのアップロードができないため、JavaScriptでCookieを発行
  • ITP制限がかかっている場合、広告クリックから「1週間」以内での購入が必要
    ※参考:Cookie保持期間

アフィリコード・システム側の設定

まず、アフィリコード・システム側の設定を解説します。

「https//○○○○.thebase.in」のショップドメインの場合、商品ページとカートページのドメインがサブドメインで遷移する仕様となっています。そのため、着地点タグに対してドメイン指定を行う必要があります。
サブドメイン運用時のトラッキングタグ設定方法

当該の広告詳細画面から「着地点タグ」を取得し、ドメイン属性の追加を行います。

▼編集後の着地点タグ

<script>
(function acsKeep(){
var PK = "p";
var IMK = "im";
var LKEYS = {cid : ["cid", "CL_", "ACT_"], gclid : ["plid", "PL_", "APT_"]};
var DKEYS = ["gclid"];
var PDIR = "./";
var durl = "https://php74.lwsandbox.com/package/ac3_v380/business/direct.php";
function saveCookies(data){ var p = data[PK]; var out = Object.keys(LKEYS).reduce(function(ret, k){ if(k in data && data[k]) ret[k] = data[k]; return ret; }, {}); if(!p || !Object.keys(out).length) return;
var purl = PDIR + "lptag.php?p=" + p; Object.keys(out).forEach(function(k){ purl += "&" + LKEYS[k][0] + "=" + out[k]; localStorage.setItem(LKEYS[k][1] + p, out[k]); });
var xhr = new XMLHttpRequest(); var args = "; expires=" + new Date(new Date().getTime() + 63072000000).toUTCString() + "; path=/; domain=thebase.in; SameSite=None; Secure"; xhr.open("GET", purl);
xhr.onloadend = function(){ if(xhr.status === 200) return; Object.keys(out).forEach(function(k){ document.cookie = LKEYS[k][1] + p + "=" + decodeURIComponent(out[k]) + args; if(LKEYS[k][2]) document.cookie = LKEYS[k][2] + p + "=js" + args; }); }; xhr.send(); }
var data = location.search.substring(1).split("&").reduce(function(ret, s){ var kv = s.split("="); if(kv[1]) ret[kv[0]] = kv[1]; return ret; }, {}); if(!(IMK in data)){ saveCookies(data); return; }
durl += "?im=" + data[IMK] + "&navi=" + performance.navigation.type; DKEYS.forEach(function(k){ if(!(k in data)) return; durl += "&" + k + "=" + data[k]; });
var xhr = new XMLHttpRequest(); xhr.open("GET", durl); function merge(a, b){ return Object.keys(LKEYS).reduce(function(ret, k){ if(k in b && !(k in a)) ret[k] = b[k]; return ret; }, a); }
xhr.onloadend = function(){ if(xhr.status !== 200) return; try{ saveCookies(merge(JSON.parse(xhr.responseText), data)); }catch(_){ } }; xhr.send(); })();
</script>

着地点タグ 追記箇所(1ヵ所)

var xhr = new XMLHttpRequest(); ~~~省略~~~ path=/; domain=thebase.in; SameSite=None; Secure";

※「domain=thebase.in;」を追記。

次に、「成果地点タグ」にBASE側の変数を追記編集していきます。

トラッキングタグに注文IDと合計金額をパラメータ付与したい場合は、「args」「price」にチェックを入れ、「変換」を行ってからタグを取得します。

アフィリコード・システムのパラメータ設定

成果地点タグ 追記箇所

①成果地点タグに付与した「args」と「price」パラメータにBASEの変数を挿入
var _ARGSV = "{%order_id%}";
var _PRICEV = "{%item_total%}";

②DOMツリーの構築完了後に読み込まれるようにする記述
▼<script>開始タグの後
【変更前】(function acsTrack(){
【変更後】document.addEventListener("DOMContentLoaded",function() {
▼</script>閉じタグの前
【変更前】var xhr = new XMLHttpRequest(); xhr.open("GET", turl); xhr.send(); })();
【変更後】var xhr = new XMLHttpRequest(); xhr.open("GET", turl); xhr.send(); });

▼編集後の成果地点タグ

<script>
document.addEventListener("DOMContentLoaded",function() {
var PV = "広告ID";
var _ARGSV = "{%order_id%}";
var _PRICEV = "{%item_total%}";
var KEYS = {cid : ["CL_", "ACT_", "cid_auth_get_type"], plid : ["PL_", "APT_", "plid_auth_get_type"]};
        ================= 省略 =================
var xhr = new XMLHttpRequest(); xhr.open("GET", turl); xhr.send(); });
</script>

アフィリコード・システム側の準備が完了したら、次にBASE側の設定に移ります。

BASE側の設定

BASE側での初期サイト開設時は「Apps」がインストールされていない状態です。以下の「Apps」ボタンをクリックし、BASEで使用できる「Apps」一覧画面に移ります。

Appsボタン

Appsの一覧画面から、以下のAppsをインストールします。(※無料でインストールできます。)

  • HTML編集
  • 広告効果測定
Appsのインストール

インストールが完了したら、アフィリコード・システム側で用意したタグを設定していきます。

まずは、「着地点タグ」の設定を行います。基本的にはアフィリエイターのメディア(BLOGなど)に張られている広告をクリックしてからの遷移先ページに着地点タグを設置します。

今回の例では、商品詳細ページに着地点タグを設置します。
※その他商品一覧ページなどにも設置は可能です。

まずはBASE管理画面の「デザイン」ボタンをクリックします。

デザインボタン

以下のように「新しいデザイン機能を使ってみる」ダイアログが表示されたら、新しいデザイン機能を適用してください。

新しいデザイン機能を使ってみる

テーマ編集画面に切り替わりますので、そのまま左メニュー「HTML編集」ボタンをクリックします。

デザイン編集画面

「新しいHTML編集 app」が開きます。

HTML編集画面

この編集画面の下部の</body>タグ直前に着地点タグを設置します。

着地点タグの設置

「プレビューの更新」ボタンから設定を更新し、最後にデザイン編集を「保存」して「終了」します。着地点タグの設置は以上です。

次に「成果地点タグ」を設置します。BASE管理画面の「Apps」ボタンから「広告効果測定」を無料でインストールします。

appsインストール

「インストール」から広告効果測定設定画面に遷移するので、「その他のタグを設定」エリアに先ほど編集した成果地点タグを貼り付けます。

成果地点タグの貼りつけ

貼り付けたら、「全ての変更を保存する」で終了です。

最後にテスト注文を行い、無事成果が上がればすべての設定が完了です。
パラメータを付与している場合は、正常にパラメータが付与されているかも確認してください。

関連記事