Shopify（ショッピファイ）とアフィリコード・システムの連携方法

Shopify（ショッピファイ）とアフィリコード・システムの連携方法

本記事では、簡単にネットショップが開設できる「Shopify」とアフィリコード・システムとの成果連携方法に関する解説を行います。

Shopifyに関しては、すでにショップの開設が完了していることを前提に進めていきますので、開設がまだの方は先にショップ設定を行ってください。

【Shopify】でオンラインストアを作る はこちら

Shopifyとアフィリコード・システムの連携フローは以下の通りとなります。

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

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

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

アフィリコード・システム管理画面より、当該広告詳細画面から以下2種類のトラッキングタグを取得し、メモ帳などに控えておきます。

着地点タグ
着地点タグに関しては、そのまま使用します。

成果地点タグ
成果地点タグに関しては、以下のパラメータを含めたトラッキングタグに変換して使用します。

「変換」をクリックし、成果識別子と購入金額が追加されたトラッキングタグを控えておきます。

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

Shopify側の設定

着地点タグの設置方法

まずは着地点タグを設置します。Shopifyストアにログイン後、メニューからテーマ > カスタマイズ と移ります。

次に、テンプレートのカスタマイズ画面のメニュー最下部より、テーマアクション > コードを編集する でコード編集画面に移ります。

コードの編集画面に遷移したら、「Layout」から「{ / } theme.liquid」をクリックし、theme.liquidファイルを開きます。
ソースコードの「</head>」タグ上部に着地点タグを貼り付けてください。

貼り付けたら必ず保存を忘れずに行ってください。

成果地点タグの設置方法

次に成果地点タグを設置します。成果地点は「チェックアウト」に設定します。
※先のコード編集画面にいる場合は画面を閉じ、テンプレートのカスタマイズ画面左上アイコン「閉じる」で画面を閉じてください。

ホームに戻ったら、メニュー「設定」から「チェックアウト」をクリックします。

チェックアウト設定画面の「注文処理」設定項目の追加スクリプトに成果地点タグを貼り付けます。

次に「成果識別子」と「購入金額」をShopify専用の「変数」に書き換えます。対応する変数は以下の通りです。

<script>
(function(){
var _CIDN = "cid";
var _PLIDN = "plid";
var _ACTN = "cid_auth_get_type";
var _APTN = "plid_auth_get_type";
var _PMTV = "pfwsron0zkwe";
var _ARGSV = "{{ order_number }}";
var _PRICEV = "{{ total_price | money_without_currency }}";
var _TRKU = "https://demo.leafworks.jp/package/affilicode/system/track.php?p=" + _PMTV + "&args=" + _ARGSV + "&price=" + _PRICEV;
var _cks = document.cookie.split("; ");
var _cidv = "", _plidv = "", _actv = "", _aptv = "";
for(var i = 0; i < _cks.length; i++){ var _ckd = _cks[i].split("="); if(_ckd[0] == "CL_" + _PMTV && _ckd[1].length > 1){ _cidv = _ckd[1]; } if(_ckd[0] == "PL_" + _PMTV && _ckd[1].length > 1){ _plidv = _ckd[1]; } if(_ckd[0] == "ACT_" + _PMTV && _ckd[1].length > 1){ _actv = _ckd[1]; } if(_ckd[0] == "APT_" + _PMTV && _ckd[1].length > 1){ _aptv = _ckd[1]; } if(_cidv && _plidv && _actv && _aptv) break; }
if(!_cidv && localStorage.getItem("CL_" + _PMTV)){ _cidv = localStorage.getItem("CL_" + _PMTV); _actv = "ls"; }
if(_cidv){ _TRKU += "&" + _CIDN + "=" + _cidv; }
if(!_plidv && localStorage.getItem("PL_" + _PMTV)){ _plidv = localStorage.getItem("PL_" + _PMTV); _aptv = "ls"; }
if(_plidv){ _TRKU += "&" + _PLIDN + "=" + _plidv; }
if(_actv){ _TRKU += "&" + _ACTN + "=" + _actv; }
if(_aptv){ _TRKU += "&" + _APTN + "=" + _aptv; }
img = document.body.appendChild(document.createElement("img"));
img.src = _TRKU + "&t=5bdaddd7";
}());
</script>

※変換する変数に関してはShopifyのサポートページも合わせてご確認ください。

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