https://ek-tracker.ekitan.com/tracker/static/js/ek-tracker-v1.js

1/**
2 * ek-tracker tracker js v1
3 *
4 * ek-tracker apiの呼び出しを行う
5 * ES5 + XMLHttpRequest で実装されており、jQueryなど外部ライブラリ依存なく利用可能
6 *
7 * Google gtag.jsを参考にgtag関数の代わりにekTrackerTag関数を定義している
8 *
9 * 1. 初期化前
10 * 配列をキューとして扱い、ekTrackerTag呼び出し、ekTracker.pushでキュー追加を行う
11 *
12 * 2. 初期化
13 * 非同期(script async属性)で ek-tracker-v1.js が実行され
14 * キュー内の初期化パラメータを利用して初期化を行い、
15 * それまでに追加されていたキューのイベントを処理する
16 * キューのpush関数を上書きし、即時イベント処理を行えるようにする
17 *
18 * 3. 初期化後
19 * ekTrackerTag呼び出し、ekTracker.pushタイミングで即時イベント処理が行われる
20 *
21 * 利用方法:
22 * headタグに以下を追加する
23 *
24 * ```html
25 * <script>
26 *     window.ekTracker = window.ekTracker || [];
27 *     function ekTrackerTag() {
28 *         ekTracker.push(arguments);
29 *     }
30 *     ekTrackerTag('initialize', {
31 *         appId: '必須',
32 *         lkey: '必須', // サーバーサイドで生成する
33 *         // 必要に応じて指定
34 *         // baseUrl: 'https://localhost:8080',
35 *         // debug: true, // ログ出力
36 *         // トラッキングデータをプリセットしたい場合
37 *         // trans_id: 'xxxx',
38 *         // kiseki: 'wwwww',
39 *         // svgid: 'transit',
40 *     });
41 * </script>
42 * <script src="https://ek-tracker.ekitan.com/tracker/static/js/ek-tracker-v1.js" async></script>
43 *
44 * // インプレッション計測
45 * <script>
46 *     ekTrackerTag('track', {event_type: 'imp', kiseki: 'xxxx'});
47 * </script>
48 *
49 * // クリック計測
50 * <a href="https://ekitan.com/" onclick="ekTrackerTag('track', {event_type: 'clk', kiseki: 'xxxx'})">ekitan</a>
51 *
52 * <button class="btn">test</button>
53 *
54 * <script>
55 *     $('.btn').on('click', function () {
56 *         ekTrackerTag('track', {event_type: 'clk', kiseki: 'xxxx'})
57 *     });
58 * </script>
59 * ```
60 */
61(function (window) {
62    /**
63     * 初期化パラメータ
64     *
65     * @typedef {Object} Settings
66     * @property {string} [baseUrl] APIエンドポイント
67     * @property {boolean} [debug] デバッグフラグ
68     * @property {string} appId アプリID (X-Ekitan-Auth-App-Id ヘッダー)
69     * @property {string} lkey 認証キー (X-Ekitan-Auth-Lkey)
70     */
71
72    /**
73     * track, tracksでトラッキングするパラメータ
74     *
75     * @typedef {Object} TrackingData
76     * @property {number} [payment]
77     * @property {string} [eid]
78     * @property {string} [aid]
79     * @property {string} [trans_id]
80     * @property {string} event_type
81     * @property {string} [event_id]
82     * @property {string} kiseki
83     * @property {string} [frame_id]
84     * @property {string} [banner_id]
85     * @property {string} [svid]
86     * @property {string} [svgid]
87     * @property {Array} [tags]
88     * @property {string} [cust1_n]
89     * @property {string} [cust1_v]
90     * @property {string} [cust2_n]
91     * @property {string} [cust2_v]
92     * @property {string} [cust3_n]
93     * @property {string} [cust3_v]
94     * @property {string} [cust4_n]
95     * @property {string} [cust4_v]
96     * @property {string} [cust5_n]
97     * @property {string} [cust5_v]
98     * @property {string} [ab_test_id]
99     * @property {string} [ab_test_variant]
100     */
101
102    /**
103     * 初期化パラメータ + トラッキングデータプリセット値
104     * svgid, trans_idなど画面内で共通のトラッキングパラメータを初期化時に指定できる
105     *
106     * @typedef {Settings & Partial<TrackingData>} FullSettings
107     */
108
109    /**
110     * グローバルなEkTrackerの型定義
111     *
112     * @type {Array}
113     */
114    window.ekTracker = window.ekTracker || [];
115    var trackerInstance = null;
116    var debug = false;
117
118    var handleArgs = function (args) {
119        if (Object.prototype.toString.call(args) === "[object Arguments]") {
120            if (trackerInstance[args[0]]) {
121                var argsArray = Array.prototype.slice.call(args);
122                trackerInstance[args[0]].apply(trackerInstance, argsArray.slice(1));
123                return;
124            } else {
125                debug && console.error("Invalid method: ", args[0]);
126            }
127        }
128        debug && console.error("Invalid arguments: ", args);
129    };
130
131    var createTrackerHandler = function () {
132        var baseUrl = "https://ek-tracker.ekitan.com";
133        var appId;
134        var lkey;
135        var isInitialized = false;

136        var presetSettings = {};
137
138        var allowedFields = [
139            "payment",
140            "eid",
141            "aid",
142            "trans_id",
143            "event_type",
144            "event_id",
145            "kiseki",
146            "frame_id",
147            "banner_id",
148            "svid",
149            "svgid",
150            "tags",
151            "cust1_n",
152            "cust1_v",
153            "cust2_n",
154            "cust2_v",
155            "cust3_n",
156            "cust3_v",
157            "cust4_n",
158            "cust4_v",
159            "cust5_n",
160            "cust5_v",
161            "ab_test_id",
162            "ab_test_variant"
163        ];
164
165        // 初期化後はpush時に即時イベント処理を行うように
166        window.ekTracker.push = function (args) {
167            debug && console.log("Processing pushed arguments:", args);
168            handleArgs(args);
169        };
170
171        /**
172         * @param {FullSettings} settings
173         */
174        var initialize = function (settings) {
175            baseUrl = settings.baseUrl || baseUrl;
176            debug = settings.debug || false;
177
178            if (!settings.appId || !settings.lkey) {
179                debug && console.error("Required configuration 'appId' and 'lkey' are missing")
180            }
181            appId = settings.appId;
182            lkey = settings.lkey;
183
184            presetSettings = allowedFields.reduce(function (result, key) {
185                if (settings[key] != null) {
186                    result[key] = settings[key];
187                }
188                return result;
189            }, {});
190            debug && console.log("presetSettings: ", presetSettings)
191            isInitialized = true;
192        };
193
194        /**
195         * @param {Array<TrackingData>} data
196         */
197        var tracks = function (data) {
198            if (!isInitialized) {
199                debug && console.error("Not initialized");
200                return;
201            }
202
203            var payload = [];
204            for (var i = 0; i < data.length; i++) {
205                // presetSettingsをマージ
206                var item = data[i];
207                payload.push((function () {
208                    var merged = {};
209                    var key;
210                    for (key in presetSettings) {
211                        if (presetSettings.hasOwnProperty(key)) {
212                            merged[key] = presetSettings[key];
213                        }
214                    }
215                    for (key in item) {
216                        if (item.hasOwnProperty(key)) {
217                            merged[key] = item[key];
218                        }
219                    }
220                    return merged;
221                })());
222            }
223
224            debug && console.info("Request tracks: ", payload);
225
226            // トラッキングデータを送信
227            var xhr = new XMLHttpRequest();
228            xhr.open("POST", baseUrl + "/tracker/tracks", true);
229            xhr.setRequestHeader("Content-Type", "application/json");
230            xhr.setRequestHeader("X-Ekitan-Auth-App-Id", appId);
231            xhr.setRequestHeader("X-Ekitan-Auth-Lkey", lkey);
232
233            xhr.onreadystatechange = function () {
234                if (xhr.readyState === 4) { // 完了
235                    if (xhr.status >= 200 && xhr.status < 300) {
236                        var jsonResponse = JSON.parse(xhr.responseText);
237                        debug && console.info("Response tracks: ", jsonResponse);
238                    } else {
239                        debug && console.error("Error: ", xhr.statusText);
240                    }
241                }
242            };
243
244            xhr.onerror = function () {
245                debug && console.error("Error: ", xhr.statusText);
246            };
247
248            xhr.send(JSON.stringify(payload));
249        };
250
251        /**
252         * @param {TrackingData} data
253         */
254        var track = function (data) {
255            tracks([data]);
256        };
257
258        debug && console.log("trackerInstance initialized: ", trackerInstance);
259
260        return {initialize: initialize, track: track, tracks: tracks};
261    };
262
263    // キューを処理する関数
264    var processQueue = function () {
265        if (!trackerInstance) {
266            // 初回のみインスタンス生成
267            trackerInstance = createTrackerHandler();
268        }
269        while (window.ekTracker.length > 0) {
270            handleArgs(window.ekTracker.shift());
271        }
272    };
273
274    processQueue();
275})(window);