Moments API implementation guide
This article describes how to implement the Moments API into your Tealium iQ Tag Management workflow.
How it works
Moments API creates a unique endpoint that you can integrate into your websites or applications.
Complete the following steps to implement Moments API into your Tealium workflow using the Tealium iQ Advanced JavaScript Code Extension. The following example uses Fetch API to request the visitor’s data from the Moments API, but other JavaScript options, such as XMLHttpRequest
, are also supported.
Step 1: Get the visitor ID
Parse the v_id
from the Tealium utag_main
cookie.
Copy the following code, depending on your version of utag.js
, into the extension.
Skip this step if ignoreTapid
is set to false
.
- Title: Parse identifier from utag.js cookie [Moments API]
- Scope: Pre Loader
- Type: Advanced JavaScript
utag.js
4.50+
If you use the split_cookie=false
option, use the utag.js
4.49 and below code examples.
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();
//save the Tealium Visitor ID in memory
var moments_identifier = utag_cookies["v_id"] || null
utag.js
4.49 and below
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 "";
}
// Extracting the visitor ID from the utag_main cookie
var utag_cookie = getCookie("utag_main");
//save the Tealium Visitor ID in memory
var moments_identifier = utag_cookie.split("v_id:")[1].split("$")[0] || "";
Step 2: Call Moments API
Request the Moments API endpoint and store the response data in local storage to be used for onsite marketing activities and personalization.
Add the following template code to another Advanced JavaScript extension and update it according to your account and target engine. The code maps the moments_identifier
variable assigned in the previous extension to the identifier parameter of the API’s URL endpoint.
Ensure this code loads after the previous JavaScript extension according to the Order of Operations.
- Title: [Moments API]
- Scope: Pre Loader
- Type: Advanced JavaScript
// Assign the engine ID you want to request
var engine_id = "your_engine_id";
// ignoreTapid and suppressNotFound are optional parameters
// Assign to true if you're using a first-party domain for your Tealium implementation
// var ignoreTapid = true ;
// Set to false for HTTP 404 when visitor is not found
// var suppressNotFound = true;
// Construct the API URL
// This example does not include optional parameters
// Add optional parameters, if required
var apiUrl = "MOMENTS_API_ENDPOINT_URL" + moments_identifier;
// Example: "https://personalization-api.us-west.prod.tealiumapis.com/personalization/accounts/example/profiles/main/engines/abc123/visitors/" + "0123456789"
// Add function for writing the Moments API response to localStorage
function writeToLocalStorage(obj, engineId) {
// Prefix for localStorage keys
const prefix = 'moments_' + engineId + '_';
// Function to save an object property to localStorage
const saveToLocalStorage = (key, value) => {
localStorage.setItem(prefix + key, JSON.stringify(value));
};
// Loop through each top-level property in the object
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
saveToLocalStorage(key, obj[key]);
}
}
}
// Fetch the API
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Handle the response data
if (data) {
// set the data to localStorage, categorised by grouping. For example, attributes, badges, and audiences.
writeToLocalStorage(data, engine_id)
}
})
.catch(error => console.error('Moments API error:', error));
//
Step 3: Integrate into your workflow
Integrate the data with an onsite performance or personalization vendor according to your use case.
To optimize the DNS request process, consider using DNS prefetching. For more information, see The Chromium Projects > DNS Prefetching.
This page was last updated: July 10, 2024