shopifyへのトラッキングコードの設置方法
広告機能のCV計測をするときに、shpify側のトラッキングコード設置方法についての説明です。
ECAI側の設定方法につきましては下記ガイドを参照ください。
商品購入のLPクリック数、CV計測の設定方法はこちら＞
■LPページへの設置
（１）テーマ ＞ アクション ＞ コード編集
↓
（２）theme.liquid
</body>の直上にトラッキングコードとjquery本体を設置し保存
〈jquery本体〉
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
■サンクス（完了）ページへの設置
（１）設定
↓
（２）チェックアウト
↓
（３）注文状況ページ
追加スクリプトにjquery本体、トラッキングコード、CVタグを設置し保存
■キャンペーン用のURLを生成
LPページ計測するにはECAIの管理画面よりキャンペーン用のURLを生成して使用してください。
広告リスト ＞ 設定方法 ＞ LPからの計測タブ
①計測するLPのURLを入力
②クリック、CVを計測する際はこちらで生成されたURLを使用する
Googleアナリティクスでオリジナルフォーム内のボタンをクリック計測する方法
オリジナルフォーム（LIFF）で回答ボタンなどのクリックを計測したいときに活用できます。
ガイドはGoogleアナリティクスのGA4バージョンでの設定方法となります。
計測設定には、Googleアカウントの取得（GA4）、トラッキングタグの設置が必要になります。
上記がまだの方は、先にお済ませください。
Googleアカウントの取得、トラッキングタグの設置について＞
（1）対象のオリジナルフォームをダウンロードし、index.htmlを編集します。
編集方法についてはこちら＞
↓
（2）クリック計測したいinputタグに下記を記述
①～③は質問内容に合わせて変更してください。
onclick="gtag('event', '①クリック（解約）',
{'event_category': '②質問2',
'event_label': '③解約'
});"
↓
（3）正常に計測されますと、Googleアナリティクスのレポートのイベント表示で確認ができます。
また、探索メニューでより詳しく解析することも可能です。
詳しい解析にはディメンションの設定も必要なので、詳細につきましてはグーグルのサポートページをご確認下さい。
[GA4] ディメンションと指標はこちら＞
広告のCV計測をオリジナルフォーム（LIFF）に使用する方法
CV計測の設定方法につきましては下記ご確認ください。
CV計測の設定方法はこちら＞
（1）計測したいオリジナルフォームの表示URLをコピペします。
↓
（2）広告 ＞ 広告リスト ＞ 対象のコード編集
（1）のURLを設定し、保存
↓
（3）対象のオリジナルフォームにトラッキングコードを追加
※ＣＶ計測するページ（complete.html）にjqueryの本体が読み込まれていない場合は<head>内に下記も追加
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
↓
（4）計測したいオリジナルフォームのLIFF呼び出しURLをコピペします。
↓
（5）広告 ＞ 広告リスト ＞ 対象のコード設定方法 ＞ LPからの計測 ＞ ③
（4）のLIFF呼び出しURLを使用して、キャンペーンURLを生成する。
計測にはこちらのキャンペーンURLを使用して下さい。
↓
（6）LPクリック、CVが計測できていれば完成です
トラッキングコードとは？
広告メニューで「LPからの計測」、「CVを計測」を行うときに使用するコードです。
（1）広告リスト ＞ 設定方法
↓
（2）LPからの計測
②をコピーしてご使用ください。
計測タグに使用しているjqueryが使用できない時の回避策
■目的
広告運用において計測タグに使用しているjqueryが原因で広告の審査に影響が出てしまうことを回避できます
■セット所要時間
10分
■セットの流れ
LP計測の際に設置するトラッキングコードは使用せず、以下のトラッキングコードを使用します。
こちらはjqueryを使用せずに作られたコードになります。
設置方法につきましては下記を参照してください。
広告リストのLPクリック数、LCV（友だち登録数）の設定＞
★①には管理画面に使用されているURLのサブドメイン部分を指定して下さい。
例）https://demo.ecai.jp/ですとdemoの部分
★②にはLPからの計測に記載されている友だち登録のURLを指定して下さい。
〈設置するトラッキングコード〉
※</body>の閉じタグの直上に設置
<script>
var cookiedomain = getDomain(document.domain);
var paramobj = {};
// クエリパラメータから `ecaiad` を取得し、Cookieに設定
if (typeof getParam('ecaiad') !== 'undefined') {
document.cookie = 'ecaiad=' + getParam('ecaiad');
}
// Cookieを配列として取得
var arr = getCookieArray();
document.addEventListener('DOMContentLoaded', function () {
// クエリパラメータのチェックとオブジェクトの作成
if (getParam('ecaiad')) paramobj['ecaiad'] = getParam('ecaiad');
if (getParam('tcd')) paramobj['tcd'] = getParam('tcd');
if (getParam('ccid')) paramobj['ccid'] = getParam('ccid');
if (getParam('coid')) paramobj['coid'] = getParam('coid');
if (getParam('csid')) paramobj['csid'] = getParam('csid');
// HTML要素 #cv の値を取得
var cvElement = document.getElementById('cv');
if (cvElement) {
paramobj['cv'] = cvElement.getAttribute('value');
}
// 現在のURLを取得
if (window.location.href) {
paramobj['url'] = window.location.href;
}
// パラメータオブジェクトが存在する場合、クエリ文字列を作成
if (Object.keys(paramobj).length > 0) {
var query = '?' + Object.entries(paramobj).map(function (e) {
return `${e[0]}=${e[1]}`;
}).join('&');
// 外部スクリプトの読み込み
var script = document.createElement('script');
script.src = "https://★①.ecai.jp/aclog" + query;
document.head.appendChild(script);
}
});
// URLから指定されたクエリパラメータを取得
function getParam(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// ドメイン名を抽出
function getDomain(url) {
var arr_uri = url.match(/^(.*?)([a-z0-9][a-z0-9\-]{1,63}\.[a-z\.]{2,6})[\:[0-9]*]?([\/].*?)?$/i);
return arr_uri[2];
}
// Cookieを配列形式で取得
function getCookieArray() {
var arr = {};
if (document.cookie !== '') {
var tmp = document.cookie.split('; ');
for (var i = 0; i < tmp.length; i++) {
var data = tmp[i].split('=');
arr[data[0]] = decodeURIComponent(data[1]);
}
}
return arr;
}
// URLSearchParams を使ってクエリパラメータを取得
var params = (new URL(document.location)).searchParams;
var adCode = params.get("ecaiad");
var url = "★②";
// adCode が存在する場合、リンクを更新
if (adCode) {
// 指定された href を持つすべての <a> 要素を取得
var targets = document.querySelectorAll("a[href='" + url + "']");
for (var i = 0; i < targets.length; i++) {
targets[i].href = url + adCode; // href を更新
}
}
</script>
