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_identifer = 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
var region = "your_region"; // e.g., "us"
var account = "your_account"; // the name of Tealium account
var profile = "your_profile"; // the name of your Tealium profile
var engine_id = "your_engine_id"; // The Engine ID you are requesting
// assign to true if you're using a first-party domain for your Tealium implementation
var ignoreTapid = false ;
// set to false for HTTP 404 when visitor is not found
var suppressNotFound = true;
// Construct the API URL
var apiUrl =`https://personalization-api.${region}.prod.tealiumapis.com/personalization/accounts/${account}/profiles/${profile}/engines/${engine_id}/visitors/${moments_identifier}?ignoreTapid=${ignoreTapid}&suppressNotFound=${suppressNotFound}`;
// 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)) {
writeToLocalStorage(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 && data.length) {
// Example: Store data in localStorage
saveToLocalStorage(data, engine_id)
}
})
.catch(error => console.error('There has been a problem with your fetch operation:', 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: April 29, 2024