Moments APIの実装ガイド
この記事では、Moments APIをTealium iQタグ管理ワークフローに実装する方法について説明します。
仕組み
Moments APIは、あなたのウェブサイトやアプリケーションに統合できるユニークなエンドポイントを作成します。
以下の手順を完了して、Tealium iQ Advanced JavaScript Code Extensionを使用してTealiumワークフローにMoments APIを実装します。次の例では、Fetch APIを使用してMoments APIから訪問者のデータをリクエストしますが、XMLHttpRequest
などの他のJavaScriptオプションもサポートされています。
ステップ1: 訪問者IDを取得する
Tealiumのutag_main
クッキーからv_id
を解析します。
以下のコードを、utag.js
のバージョンに応じて拡張機能にコピーします。
ignoreTapid
がfalse
に設定されている場合は、このステップをスキップします。
- タイトル: utag.jsクッキーから識別子を解析 [Moments API]
- スコープ: プレローダー
- タイプ: Advanced JavaScript
utag.js
4.50+
split_cookie=false
オプションを使用している場合は、utag.js
4.49以下のコード例を使用してください。
read_utag_cookies = function() {
if(!document.cookie || document.cookie === "") {
return {};
}
var cookies = document.cookie.split("; ");
return cookies.reduce(function(result, cookie) {
var kv = cookie.split("=");
if(kv[0].startsWith("utag_")) {
var cookie_name = kv[0].split("_")[1];
var cookie_name_with_tag = "utag_" + cookie_name;
var name_trimmed = kv[0].replace(cookie_name_with_tag+"_", "");
result[name_trimmed] = String(kv[1]).replace(/%3b/g, ';')
}
return result;
}, {});
}
var utag_cookies = read_utag_cookies();
//Tealium Visitor IDをメモリに保存
var moments_identifier = utag.cookies[‘v_id’] || null
utag.js
4.49以下
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// utag_mainクッキーから訪問者IDを抽出
var utag_cookie = getCookie("utag_main");
//Tealium Visitor IDをメモリに保存
var moments_identifer = utag_cookie.split("v_id:")[1].split("$")[0] || "";
ステップ2: Moments APIを呼び出す
Moments APIエンドポイントをリクエストし、レスポンスデータをローカルストレージに保存して、オンサイトマーケティング活動やパーソナライゼーションに使用します。
以下のテンプレートコードを別のAdvanced JavaScript拡張機能に追加し、あなたのアカウントとターゲットエンジンに合わせて更新します。このコードは、前の拡張機能で割り当てられたmoments_identifier
変数をAPIのURLエンドポイントの識別子パラメータにマッピングします。
このコードが前のJavaScript拡張機能の後にロードされるように、Order of Operationsに従ってください。
- タイトル: [Moments API]
- スコープ: プレローダー
- タイプ: Advanced JavaScript
var region = "your_region"; // 例: "us"
var account = "your_account"; // Tealiumアカウントの名前
var profile = "your_profile"; // あなたのTealiumプロファイルの名前
var engine_id = "your_engine_id"; // リクエストするエンジンID
// Tealiumの実装にファーストパーティドメインを使用している場合はtrueに設定
var ignoreTapid = false ;
// 訪問者が見つからない場合のHTTP 404をfalseに設定
var suppressNotFound = true;
// API URLを構築
var apiUrl =`https://personalization-api.${region}.prod.tealiumapis.com/personalization/accounts/${account}/profiles/${profile}/engines/${engine_id}/visitors/${moments_identifer}?ignoreTapid=${ignoreTapid}&suppressNotFound=${suppressNotFound}`;
// Moments APIのレスポンスをlocalStorageに書き込む関数を追加
function writeToLocalStorage(obj, engineId) {
// localStorageのキーのプレフィックス
const prefix = `moments_${engineId}_`;
// オブジェクトのプロパティをlocalStorageに保存する関数
const saveToLocalStorage = (key, value) => {
localStorage.setItem(prefix + key, JSON.stringify(value));
};
// オブジェクトの各トップレベルのプロパティをループ
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
writeToLocalStorage(key, obj[key]);
}
}
}
// APIをフェッチ
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// レスポンスデータを処理
if (data && data.length) {
// 例: データをlocalStorageに保存
saveToLocalStorage(data, engine_id)
}
})
.catch(error => console.error('There has been a problem with your fetch operation:', error));
//
ステップ3: ワークフローに統合する
データを、あなたのユースケースに応じたオンサイトパフォーマンスまたはパーソナライゼーションベンダーと統合します。
DNSリクエストプロセスを最適化するために、DNSプリフェッチを検討してみてください。詳細については、The Chromium Projects > DNS Prefetchingを参照してください。
最終更新日 :: 2024年April月25日