Moments APIの実装ガイド
この記事では、Tealium iQタグ管理ワークフローにMoments APIを実装する方法について説明します。
仕組み
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
のバージョンに応じて拡張機能にコピーします。
- タイトル: 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_identifier = 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
// リクエストしたいエンジンIDを指定します
var engine_id = "your_engine_id";
// suppressNotFoundはオプションのパラメータです
// 訪問が見つからない場合はHTTP 404に構成します
// var suppressNotFound = true;
// APIのURLを構築します
// この例ではオプションのパラメータは含まれていません
// 必要に応じてオプションのパラメータを追加します
var apiUrl = "MOMENTS_API_ENDPOINT_URL" + moments_identifier;
// 例: "https://personalization-api.us-west.prod.tealiumapis.com/personalization/accounts/example/profiles/main/engines/abc123/visitors/" + "0123456789"
// 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)) {
saveToLocalStorage(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) {
// データをlocalStorageに保存します。例えば、属性、バッジ、オーディエンスなどのグループに分けて保存します。
writeToLocalStorage(data, engine_id)
}
})
.catch(error => console.error('Moments API error:', error));
//
ステップ3: ワークフローに統合する
データを、使用ケースに応じてオンサイトパフォーマンスまたはパーソナライゼーションベンダーと統合します。
DNSリクエストプロセスを最適化するために、DNSプリフェッチを検討してみてください。詳細については、The Chromium Projects > DNS Prefetchingを参照してください。
最終更新日 :: 2024年July月24日