メインコンテンツまでスキップ

広告主向けTealium統合

このページでは、Tealiumを使用してRokt Adsを実装し、コンバージョンをキャンペーンにリンクさせてループを閉じる方法を説明します。コンバージョンをAdsのエンゲージメントにリンクさせることで、より正確なアトリビューション、リアルタイムの最適化、およびキャンペーンの測定が可能になります。

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'})

この統合には、confirmationref、amount、およびcurrencyが必要です。email_addressは、rclidを使用してループを閉じない場合はオプションです。

Rokt SDKの初期化

  1. Tealiumアカウントにログインします。
  2. 左側のナビゲーションでタグをクリックします。
  3. 右側の新しいタグボタンをクリックして、Tealiumカスタムコンテナを選択します。
  4. タグの説明名を「Rokt SDK」などとして入力します。
  5. テンプレートを編集の下に、以下に提供されているSDK初期化スニペットを貼り付けます。
  6. u.data内のapi_keyを、Roktアカウントマネージャーから提供されたRokt APIキーに置き換えます。
  7. ファーストパーティドメイン統合を設定する場合は、u.data内のrokt_domainの値を自分のドメインに変更します。
  8. 保存をクリックします。

SDK初期化スニペット

//~~tv:20010.20230630
//~~tc: Tealiumカスタムコンテナ
//~~tc: Tealiumローダーをバージョン4.35に更新

/*
Tealiumカスタムコンテナ注記:
- 「送信コード開始」と「送信コード終了」の間に送信コードを追加します。
- 「タグライブラリコード開始」と「タグライブラリコード終了」の間にJavaScriptタグライブラリコードを追加します。
- JavaScriptコードのみを追加し、このファイルにHTMLコードを追加しないでください。
- このファイルにコードを配置する際は、<script>と</script>タグを削除してください。

外部JavaScriptファイルの読み込み(ローダー):
- 追加の外部JavaScriptファイルを読み込む必要がある場合、このファイルの下部近くにある以下のローダーセクション内の一行コメント("//")を解除します:
- 「ローダー関数呼び出し開始」
- 「ローダー関数呼び出し終了」
- 「ローダーコールバック関数開始」
- 「ローダーコールバック関数終了」
- コメントアウトを解除した後、読み込みたい外部JavaScriptファイルのパスを挿入します。
- 最後に、ローダーコールバック関数内に、外部JavaScriptファイルの読み込み後に実行すべきJavaScriptコードを挿入します。
*/

/* タグライブラリコード開始 */
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 || {};
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); }; });

/* タグライブラリコード終了 */

//tealium ユニバーサルタグ - utag.sender.custom_container ut4.0.##UTVERSION##、Copyright ##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("画像を添付: "+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]; } 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 { /* 古いIEサポート */ 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("に添付 "+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("送信:##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: data_layer.tealium_environment == "prod" ? false : true,
/* TiQ で "api_key" または "rokt_domain" にマッピングされた値がこれらのデフォルト値を置き換えます。 */
email: '',
conversionType: "conversion",
confirmationref: "",
amount: "",
currency: "",
price: [],
quantity: [],
majorcat: [],
majorcatid: [],
minorcat: [],
minorcatid: [],
productname: [],
sku: [],
cartItems: {},
custom: {},
events: [],
};


/* タグスコープの拡張コード開始 */
/* このセクションは編集しないでください */
##UTEXTEND##
/* タグスコープの拡張コード終了 */


/* マッピングコード開始 */
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 = {
conversionType: u.data.conversionType,
email: u.data.email,
firstname: u.data.firstname,
lastname: u.data.lastname,
mobile: u.data.mobile,
confirmationref: u.data.confirmationref,
amount: u.data.amount,
currency: u.data.currency,
paymenttype: u.data.paymenttype,
zipcode: u.data.zipcode,
country: u.data.country,
language: u.data.language,
ccbin: u.data.ccbin,
cartItems: []
}

utag.DB('send:##UTID##:MAPPINGS');
utag.DB(u.data);
/* マッピングコード終了 */

if (!u.data.api_key) {
utag.DB(u.id + ': タグは発火しません: 必須属性 api_key が設定されていません');
return;
}

/* タグ送信コード開始 */


var t = u.data.is_development_mode ? 1 : 0, n = "?env=" + t, a = window.mParticle.config.dataPlan;
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("&");
/* タグ送信コード終了 */


/* ローダーコールバック関数開始 */
/* このローダーコールバック関数を使用するには、単一行のJavaScriptコメント("//")を解除してください。 */

u.loader_cb = function () {

/* ローダーコールバックタグ送信コード開始 */
u.data.events.forEach(function(event) {
if (event == "conversion"){
window.mParticle.ready(
function() {

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
};
```javascript
mParticle.Identity.identify(identifyRequest);
}

var currentUser = mParticle.Identity.getCurrentUser();

var transactionObject = {}
attributes.conversionType && (transactionObject.conversiontype = attributes.conversionType)
attributes.confirmationref && (transactionObject.confirmationref = attributes.confirmationref)
attributes.amount && (transactionObject.amount = attributes.amount)
attributes.currency && (transactionObject.currency = attributes.currency)

mParticle.logEvent(
"conversion", // イベントの名前
mParticle.EventType.Transaction, // イベントの種類
transactionObject

);
}
);
}

});

/* End Loader Callback Tag Sending Code */
};

/* End Loader Callback Function */


/* Start Loader Function Call */
/* 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();
}

/* End Loader Function Call */


//##UTENABLEDEBUG##utag.DB("send:##UTID##:COMPLETE");
}
};
utag.o[loader].loader.LOAD(id);
})("##UTID##", "##UTLOADERID##");
} catch (error) {
utag.DB(error);
}
//end tealium universal tag


### スクリプトの有効化

ルールとイベントの下で、新しいタグをすべてのページで発火するように設定します。

マッピングされた変数の下で、コンバージョンイベントとデータレイヤー変数のためのUDO変数マッピングを構成します。 Rules &amp; events

変数名のマッピング

Tealium変数を以下のRoktフィールドにマッピングする必要があります:

  • emailaddress
  • confirmationref
  • amount
  • currency

特定のデータレイヤーに従って、Tealium内で変数を構成し、それからRoktにマッピングする必要があります。変数の詳細については、Tealium Data Layer Variablesを参照してください。

この記事は役に立ちましたか?