Tealium インテグレーション for Ecommerce
このガイドでは、Tealium を使用して Rokt と統合するプロセスを説明します。Tealium でデータ層に基づいて変数を作成する方法、Rokt SDK を初期化し、配置を挿入するためのタグを作成する方法を学びます。
データ層を理解する
データ層は、開発者によってウェブページに実装されているはずです。
データ層は、Tealium と共有したい情報をすべて含むオブジェクトです。変数は、データ層またはその後のビュー変更宣言で Tealium に共有できます。
データ層の動作に関する詳細は、Tealium 開発者ガイド を参照してください。
データ層の例:
window.utag_data = window.utag_data || {}
utag_data['email_address'] = 'test@test.com'
utag_data['first_name'] = 'john'
utag_data['last_name'] = 'doe'
ビュートリガーの設定
適切なイベントをトリガーするためには、購入イベントが発生した際にアプリで以下のコードを使用します。:
utag.view({tealium_event : 'purchase', email_address : 'john.doe@example.com', amount:'20.00', currency:'USD', confirmationref:'123456789'})
"purchase" イベントは「マップされた変数」で設定した宛先、例えば Purchase、Bag、Checkout などに解決されます。
Rokt SDKの初期化
- Tealiumアカウントにログイ ンします。
- 左側のナビゲーションでタグをクリックします。
- 右側の新しいタグボタンをクリックし、Tealiumカスタムコンテナを選択します。
- タグの説明名を、例えば「Rokt SDK」と入力します。
- テンプレートを編集の下で、以下に提供されるSDK初期化スニペットを貼り付けます。
u.data内のapi_keyを、Roktのアカウントマネージャーから提供されたRokt APIキーに置き換えます。- 保存をクリックします。
SDK初期化スニペット
//~~tv:20010.20230630
//~~tc: Tealium Custom Container
//~~tc: Updated Tealium loader to 4.35 version
/*
Tealium Custom Container Notes:
- "Start Tag Sending Code" と "End Tag Sending Code" の間に送信コードを追加します。
- "Start Tag Library Code" と "End Tag Library Code" の間にJavaScriptタグライブラリコードを追加します。
- HTMLコードはこのファイルに追加せず、JavaScriptコードのみを追加してください。
- このファイルに配置するコードから<script>タグを削除します。
外部JavaScriptファイルの読込 (ローダー):
- 追加の外部JavaScriptファイルを読み込む必要がある場合は、このファイルの下部にあるローダーセクションの JavaScript の1行コメント (//) をコメント解除します:
- "Start Loader Function Call"
- "End Loader Function Call"
- "Start Loader Callback Function"
- "End Loader Callback Function"
- コメント解除後、読み込みたい外部JavaScriptファイルのパスを挿入します。
- 最後に、ローダーコールバック関数内で、外部JavaScriptファイルの読み込み後に実行するJavaScriptコードを挿入します。
*/
/* Start Tag Library Code */
window.mParticle = window.mParticle || {};
window.mParticle.EventType = { Unknown: 0, Navigation: 1, Location: 2, Search: 3, Transaction: 4, UserContent: 5, UserPreference: 6, Social: 7, Other: 8, Media: 9 };
window.mParticle.eCommerce = { Cart: {} };
window.mParticle.Identity = {};
window.mParticle.Rokt = {};
window.mParticle.config = window.mParticle.config || {};
```javascript
window.mParticle.config.rq = [];
window.mParticle.config.snippetVersion = 2.7;
window.mParticle.ready = function(e) { window.mParticle.config.rq.push(e); };
["endSession", "logError", "logBaseEvent", "logEvent", "logForm", "logLink", "logPageView", "setSessionAttribute", "setAppName", "setAppVersion", "setOptOut", "setPosition", "startNewSession", "startTrackingLocation", "stopTrackingLocation"].forEach(function(e) { window.mParticle[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift(e); window.mParticle.config.rq.push(t); }; });
["setCurrencyCode", "logCheckout"].forEach(function(e) { window.mParticle.eCommerce[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("eCommerce." + e); window.mParticle.config.rq.push(t); }; });
["identify", "login", "logout", "modify"].forEach(function(e) { window.mParticle.Identity[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Identity." + e); window.mParticle.config.rq.push(t); }; });
["selectPlacements","hashAttributes","setExtensionData","use","getVersion","terminate"].forEach(function(e) { window.mParticle.Rokt[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Rokt." + e); window.mParticle.config.rq.push(t); }; });
/* Tag ライブラリコードの終了 */
/*
//tealium ユニバーサルタグ - utag.sender.custom_container ut4.0.##UTVERSION##, 著作権 ##UTYEAR## Tealium.com Inc. 全著作権所有。
try {
(function (id, loader) {
var u = {};
var src;
utag.o[loader].sender[id] = u;
// 変更しないでください
if (utag.ut === undefined) { utag.ut = {}; }
// Tealium ローダー開始 4.35
if (utag.ut.loader === undefined) {
u.loader = function (o) {
var b, c, l, a = document;
if (o.type === "iframe") {
b = a.createElement("iframe");
o.attrs = o.attrs || { "height" : "1", "width" : "1", "style" : "display:none" };
for (l in utag.loader.GV(o.attrs)) { b.setAttribute( l, o.attrs[l] ); }
b.setAttribute("src", o.src);
} else if (o.type=="img") {
utag.DB("Attach img: "+o.src);
b=new Image();
b.src=o.src;
return;
} else {
b = a.createElement("script");
b.language="javascript";
b.type="text/javascript";
b.async=1;
b.charset="utf-8";
for( l in utag.loader.GV(o.attrs) ){ b[l] = o.attrs[l]; }
``````javascript
b.src = o.src;
}
if(o.id){b.id=o.id};
if (typeof o.cb=="function") {
if(b.addEventListener) { b.addEventListener("load",function(){o.cb()},false); }
else { /* old IE support */ b.onreadystatechange=function(){if(this.readyState=='complete'||this.readyState=='loaded'){this.onreadystatechange=null;o.cb()}}; }
}
l = o.loc || "head";
c = a.getElementsByTagName(l)[0];
if (c) {
utag.DB("Attach to "+l+": "+o.src);
if (l == "script") { c.parentNode.insertBefore(b, c); }
else { c.appendChild(b) }
}
}
} else { u.loader = utag.ut.loader; }
// Tealium ローダーの終了
u.ev = {view: 1, link:1};
u.initialized = false;
u.mapFunc = function(arr, obj, item) {
var i = arr.shift();
obj[i] = obj[i] || {};
if (arr.length > 0) {
u.mapFunc(arr,obj[i], item);
} else {
obj[i] = item;
}
};
##UTGEN##
u.send = function(utag_event, data_layer) {
if (u.ev[utag_event] || u.ev.all !== undefined) {
//##UTENABLEDEBUG##utag.DB("send:##UTID##");
var a ,b ,c, d, e, f, i;
a = utag_event
b = data_layer
u.data = {
/* ここでデフォルトのタグパラメータ値を初期化 */
/* 例: */
api_key : "YOUR_API_KEY",
rokt_domain : "https://apps.rokt-api.com",
is_development_mode: true,
/* TiQで"api_key"または"rokt_domain"にマップされた値がこれらのデフォルト値を置き換えます。 */
"amount": "",
"billingaddress1": "",
"billingaddress2": "",
"billingzipcode": "",
"cardstatus": "",
"cartItems": {},
"confirmationref": "",
"conversionType": "conversion",
"currency": "",
"custom": {},
"customertype": "",
"email": "",
"emailEnc": "",
"eventtype": "",
"events": [],
"gender": "",
"hashedemail": "",
"locale": "",
"Loyaltymember": "",
"loyaltystatus": "",
"majorcat": [],
"majorcatid": [],
"minorcat": [],
"minorcatid": [],
"placementtype": "",
``````json
"price": [],
"productname": [],
"paymentserviceprovider": "",
"quantity": [],
"shippingtype": "",
"sku": []
};
/* Start Tag-Scoped Extensions Code */
/* Please Do Not Edit This Section */
##UTEXTEND##
/* End Tag-Scoped Extensions Code */
/* Start Mapping Code */
Object.keys(utag.loader.GV(u.map)).forEach(function(mapping_key) {
if (data_layer[mapping_key] !== undefined && data_layer[mapping_key] !== '') {
var destinations = u.map[mapping_key].split(',');
destinations.forEach( function(parameter) {
if (
!u.data.hasOwnProperty(parameter) &&
(parameter.indexOf('cartItems') !== 0)
) {
u.mapFunc(['custom'].concat(parameter.split('.')), u.data, data_layer[mapping_key]);
return;
}
u.mapFunc(parameter.split('.'), u.data, data_layer[mapping_key]);
});
} else {
var event_destinations = mapping_key.split(":");
if (
event_destinations.length === 2 &&
String(data_layer[event_destinations[0]]) === String(event_destinations[1])
) {
if (u.map[mapping_key]) {
u.data.events = u.data.events.concat(u.map[mapping_key].split(","));
}
}
}
});
// u.initECommerceFields(data_layer);
var attributes = {
"amount": u.data.amount,
"billingaddress1": u.data.billingaddress1,
"billingaddress2": u.data.billingaddress2,
"billingzipcode": u.data.billingzipcode,
"cardstatus": u.data.cardstatus,
"cartItems": [],
"ccbin": u.data.ccbin,
"confirmationref": u.data.confirmationref,
"conversionType": u.data.conversionType,
"country": u.data.country,
"currency": u.data.currency,
"customertype": u.data.customertype,
"email": u.data.email,
"emailEnc": u.data.emailEnc,
"eventtype": u.data.eventtype,
"firstname": u.data.firstname,
"gender": u.data.gender,
"hashedemail": u.data.hashedemail,
"language": u.data.language,
``````json
"lastname": u.data.lastname,
"locale": u.data.locale,
"Loyaltymember": u.data.Loyaltymember,
"loyaltystatus": u.data.loyaltystatus,
"mobile": u.data.mobile,
"paymentserviceprovider": u.data.paymentserviceprovider,
"paymenttype": u.data.paymenttype,
"placementtype": u.data.placementtype,
"shippingtype": u.data.shippingtype,
"zipcode": u.data.zipcode
}
utag.DB('send:##UTID##:MAPPINGS');
utag.DB(u.data);
/* End Mapping Code */
if (!u.data.api_key) {
utag.DB(u.id + ': タグが作動しませんでした: 必須属性 api_key が設定されていません');
return;
}
/* Start Tag Sending Code */
var t = u.data.is_development_mode ? 1 : 0, n = "?env=" + t, a = window.mParticle.config.dataPlan;
window.mParticle.config.isDevelopmentMode = u.data.is_development_mode;
if (a) { var o = a.planId, r = a.planVersion; o && (r && (r < 1 || r > 1e3) && (r = null), n += "&plan_id=" + o + (r ? "&plan_version=" + r : "")); }
var i = window.mParticle.config.versions, s = [];
i && Object.keys(i).forEach(function(e) { s.push(e + "=" + i[e]); });
src = u.data.rokt_domain + "/js/v2/" + u.data.api_key + "/app.js" + n + "&" + s.join("&");
/* End Tag Sending Code */
/* Start Loader Callback Function */
/* このローダーコールバック関数を使用するには、単一行のJavaScriptコメント ("//") のコメントを解除してください。 */
async function triggerPlacement(identifier) {
const selection = await window.mParticle.Rokt.selectPlacements({
identifier: identifier,
attributes: {
"age": attributes.age,
"amount": attributes.amount,
"billingaddress1": attributes.billingaddress1,
"billingaddress2": attributes.billingaddress2,
"billingzipcode": attributes.billingzipcode,
"cardstatus": attributes.cardstatus,
"cartItems": attributes.cartItems,
"ccbin": attributes.ccbin,
"confirmationref": attributes.confirmationref,
"country": attributes.country,
"currency": attributes.currency,
``````js
"customertype": attributes.customertype,
"email": attributes.email,
"emailEnc": attributes.emailEnc,
"eventtype": attributes.eventtype,
"firstname": attributes.firstname,
"gender": attributes.gender,
"hashedemail": attributes.hashedemail,
"language": attributes.language,
"lastname": attributes.lastname,
"locale": attributes.locale,
"Loyaltymember": attributes.Loyaltymember,
"loyaltystatus": attributes.loyaltystatus,
"mobile": attributes.mobile,
"paymentserviceprovider": attributes.paymentserviceprovider,
"paymenttype": attributes.paymenttype,
"placementtype": attributes.placementtype,
"shippingtype": attributes.shippingtype
}
});
}
u.loader_cb = function () {
/* Start Loader Callback Tag Sending Code */
u.data.events.forEach(function(event) {
if (["bag", "checkout", "confirmation"].includes(event)) {
if (attributes.email !== null || attributes.emailsha256 !== null) {
var userIdentities = {}
attributes.email && (userIdentities.email = attributes.email)
attributes.emailsha256 && (userIdentities.email = attributes.emailsha256)
var identifyRequest = {
userIdentities: userIdentities
};
mParticle.Identity.identify(identifyRequest);
}
}
if (event == "bag") {
window.mParticle.ready(
triggerPlacement("bag_page")
);
}
if (event == "checkout") {
window.mParticle.ready(
triggerPlacement("checkout_page")
);
}
if (event == "confirmation") {
window.mParticle.ready(
triggerPlacement("confirmation_page")
);
}
});
/* エンド ローダー コールバック タグ 送信 コード */
};
/* エンド ローダー コールバック 関数 */
/* スタート ローダー 関数 コール */
``````js
/* Loader を使用するには、単一行の JavaScript コメント ("//") のコメントを解除してください。 */
if (!u.initialized) {
u.loader({
"type" : "script",
"src" : src,
"cb" : u.loader_cb,
"loc" : "script",
"id" : 'utag_##UTID##'
});
u.initialized = true;
}
else {
u.loader_cb();
}
/* Loader function 呼び出しの終了 */
//##UTENABLEDEBUG##utag.DB("send:##UTID##:COMPLETE");
}
};
utag.o[loader].loader.LOAD(id);
})("##UTID##", "##UTLOADERID##");
} catch (error) {
utag.DB(error);
}
//tealium universal tag の終了
スクリプトの有効化
ルールとイベント の下で、すべてのページで新しいタグを発火するように設定します。
マッピングされた変数 の下で、購入イベントとデータレイヤー変数のために UDO 変数マッピングを設定します。
特定のデータレイヤーに応じて、Tealium 内で変数を設定し、それらを Rokt にマッピングする必要があります。変数の詳細については、Tealium Data Layer Variables を参照してください。