Services

HTML Offer Builder

Offer Builder Default Template

<script>
!(function (w, d) {
w.Flickerlessly = w.Flickerlessly || {}, function (t) { "use strict"; var i = function (t, n, a, o) { var i = "atNodeInserted" + t, r = [], e = ["", "-moz-", "-webkit-", "-ms-", "-o-"]; e.forEach(function (t, e) { r.push("@" + t + "keyframes " + i + " {from {opacity:0.99} to {opacity:1}}") }), r.push(n + "{"), e.forEach(function (t, e) { r.push(t + "animation-duration:0.001s;" + t + "animation-name:" + i + ";") }), r.push("}"); var s = d.getElementsByTagName("head")[0]; if (s) { var c = d.createElement("style"); c.setAttribute("type", "text/css"), c.styleSheet ? c.styleSheet.cssText = r.join("\n") : c.appendChild(d.createTextNode(r.join("\n"))), s.insertBefore(c, s.firstChild) } var l = function (t) { if (t.animationName === i && "object" == typeof t.target) { var e = !0 === o || !1 === o && null === t.target.getAttribute("data-flk-success"); u("('" + n + "') ready! Execute: " + e, t.target), "function" == typeof a && e ? (t.target.setAttribute("data-flk-success", i), a(t.target)) : u("Won't Callback", e, a) } };["animationstart", "MSAnimationStart", "webkitAnimationStart"].forEach(function (t, e) { d.addEventListener(t, l, !1) }) }, u = function () { Array.prototype.unshift.call(arguments, "FLK:"), console.info.apply(this, arguments) }, r = Math.floor(1e3 * Math.random() + 1); t.onReady = function () { for (var t = 0; t < arguments.length; t++) { var e = arguments[t], n = e.selector, a = e.success || null, o = e.persist || !1; i(r++, n, a, o) } } }(Flickerlessly);
Flickerlessly.onReady({
 selector: ".a",
 success: function (el) {
  console.log("Element found!", el)
 }
}
);
})(window, document);
</script>

Notifications for at.js

document.addEventListener("at-library-loaded", function(e) { console.log("atNotification at-library-loaded",e.detail);
}, false),
document.addEventListener("at-request-start", function(e) {
 console.log("atNotification at-request-start",e.detail);
}, false),
document.addEventListener("at-request-succeeded", function(e) {
 console.log("atNotification at-request-succeeded",e.detail);
}, false),
document.addEventListener("at-request-failed", function(e) {
 console.log("atNotification at-request-failed",e.detail);
}, false),
document.addEventListener("at-content-rendering-start", function(e) {
 console.log("atNotification at-content-rendering-start",e.detail);
}, false),
document.addEventListener("at-content-rendering-succeeded", function(e) {
 console.log("atNotification at-content-rendering-succeeded",e.detail);
}, false),
document.addEventListener("at-content-rendering-redirect", function(e) {
 console.log("atNotification at-content-rendering-redirect",e.detail);
}, false),
document.addEventListener("at-content-rendering-no-offers", function(e) {
 console.log("atNotification at-content-rendering-no-offers",e.detail);
}, false),
document.addEventListener("at-content-rendering-failed", function(e) {
 console.log("atNotification at-content-rendering-failed",e.detail);
}, false)

Replace a Node

var replaceNodes = function(refNode, newNode){
 refNode.parentNode.replaceChild(newNode, refNode);
};

Insert a Node

var insertNode = function(refNode, newNode){
 refNode.parentNode.insertBefore(newNode, refNode);

Insert After a Node

var insertAfterNode = function(refNode, newNode){
 refNode.parentNode.insertBefore(newNode, refNode.nextSibling);
};

Append a Node

var appendNode = function(refNode, newNode){
 refNode.appendChild(newNode);
};

Prepend a Node

var prependNode = function(refNode, newNode){
 refNode.insertBefore(newNode, refNode.childNodes[0]);
};

Inject CSS Dynamically

var cssRules = [];
cssRules.push(".at-hidden{visibility:hidden}");
var applyCSS = function(css){
var head = document.getElementsByTagName("head")[0];
if (head) {
 var style = document.createElement("style");
 style.setAttribute("type", "text/css");
 if (style.styleSheet)
  style.styleSheet.cssText = css.join("\n");
 else
  style.appendChild(document.createTextNode(css.join("\n")));
 head.insertBefore(style, head.firstChild)
};
}
applyCSS(cssRules);

Custom Log

const atlog = (window.location.href.indexOf("Debug=1")!==-1) ? 
 function () { Array.prototype.unshift.call(arguments, "AT-LOG:"); console.info.apply(this, arguments); } :
 function () {};

Legacy getOffer

adobe.target.getOffer({
 "mbox": "target-global-mbox",
 "params": {
 "a": 1,
 "b": 2,
 "profile.age": 27,
 "profile.gender": "male"
},
"success": function(offer) {
 adobe.target.applyOffer({
  "mbox": "target-global-mbox",
  "offer": offer 
 });
},
"error": function(status, error){
 console.log("Error", status, error);
}
});

getOffer ES6-Style

adobe.target.getOffer({
mbox: "target-global-mbox",
params: { a: 1, b: 2 },
success: (response) => {
adobe.target.applyOffer({ 
 mbox: "target-global-mbox",
 offer: offer 
});
},
error: (status, error) => {
console.log("Error", status, error);
}
});

Custom Event - Dispatching

var evt=new CustomEvent("event-view-start", {"detail":{
 mbox: "target-global-mbox",
 params: {param1: "string", param2: 123}
}});
document.body.dispatchEvent(evt);

Custom Event - Listening

document.body.addEventListener("event-view-start", function(e) {
var mbox = e.detail.mbox || "target-global-mbox";
var params = e.detail.params || {};

Get Element Top Position

var getElementPositionCoords = function(el){
 var bodyRect = document.body.getBoundingClientRect(),
 elemRect = el.getBoundingClientRect(),
 offsetY  = elemRect.top - bodyRect.top,
 offsetX  = elemRect.left - bodyRect.left;
 return {left:offsetX, top:offsetY};
}

Page Load Request (aka TGM)

adobe.target.getOffers({
 request: {
  execute: {
   pageLoad : {}
  }
 }
}).then(function(response) {
 //console && console.log("Target Page Load Response", response);
 adobe.target.applyOffers({ 
  response: response 
 });
});

Visitor resetState()

var visitor = Visitor.getInstance("EB9CAE8B56E003697F000101@AdobeOrg");
if(typeof visitor.resetState === "function"){
 visitor.resetState();
}

AT.JS to ALLOY.JS Functions Mapping

Configuration in at.js

window.adobe.target.init(window, document, {
 "clientCode": "demo",
 "imsOrgId": "",
 "serverDomain": "localhost:5000",
 "timeout": 2000,
 "globalMboxName": "target-global-mbox",
 "version": "2.0.0",
 "defaultContentHiddenStyle": "visibility: hidden;",
 "defaultContentVisibleStyle": "visibility: visible;",
 "bodyHiddenStyle": "body {opacity: 0 !important}",
 "bodyHidingEnabled": true,
 "deviceIdLifetime": 63244800000,
 "sessionIdLifetime": 1860000,
 "selectorsPollingTimeout": 5000,
 "visitorApiTimeout": 2000,
 "overrideMboxEdgeServer": false,
 "overrideMboxEdgeServerTimeout": 1860000,
 "optoutEnabled": false,
 "optinEnabled": false,
 "secureOnly": false,
 "supplementalDataIdParamTimeout": 30,
 "authoringScriptUrl": "//cdn.tt.omtrdc.net/cdn/target-vec.js",
 "urlSizeLimit": 2048,
 "endpoint": "/rest/v1/delivery",
 "pageLoadEnabled": true,
 "viewsEnabled": true,
 "analyticsLogging": "server_side",
 "serverState": {},
 "decisioningMethod": "server-side",
 "legacyBrowserSupport":  false
}

Configuration in alloy.js

alloy("configure", {
 edgeDomain: undefined,
 edgeConfigId: "7f256d21-f4ee-473e-8e66-1fb57f32c0c4:prod",
 orgId: "97D1F3F459CE0AD80A495CBE@AdobeOrg",
 debugEnabled: true,
 prehidingStyle: "body { opacity: 0 !important }"
});

Page Load Event in at.js

adobe.target.getOffer({
 mbox: "target-global-mbox",
 success: console.log,
 error: console.error
});
adobe.target.getOffers({
 request: {
  execute: {
   pageLoad: {}
  }
 }
})
.then(console.log)
.catch(console.error);

Page Load Event in alloy.js

alloy("sendEvent", {
 renderDecisions: true, // this will enable auto rendering of the Target VEC activities
 xdm: ...,
 data: ...
})
.then(console.log)
.catch(console.error);

Regional Mbox in at.js

adobe.target.getOffer({
 mbox: "hero-banner",
 success: console.log,
 error: console.error
});
adobe.target.getOffers({
 request: {
  execute: {
   mboxes: [
   {
    index: 0,
    name: "hero-banner"
   }]
  }
 }
})
.then(console.log)
.catch(console.error);

Decision Scope in alloy.js

alloy("sendEvent", {
 decisionScopes: ["hero-banner"],
 data: ...,
 xdm: ...
})
.then(console.log)
.catch(console.error);

Track Event in at.js

adobe.target.trackEvent({ 
 "type": "click",
 "mbox": "some-mbox"
});
adobe.target.sendNotifications({ 
 request: {
  notifications: [{
   ...
   mbox: {
    name: "some-mbox"
   },
   type: "click",
   ...
  }]
 }
});

Track Event in alloy.js

alloy("sendEvent", {
 xdm:{
  eventType: "display",
  _experience: {
   decisioning: {
    propositions: [
     {
       id: "AT:eyJhY3Rpdml0eUlkIjoiMzY3NzAyIiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
       scope: "__view__",
       scopeDetails: ...
     }
    ]
   }
  }
})
.then(console.log)
.catch(console.error)

Prefetch Views in at.js

adobe.target.getOffers({
 request: {
  prefetch: {
   views: [{}]
  }
 }
})
.then(console.log)
.catch(console.error);

Prefetch Views in alloy.js

alloy("sendEvent", {
 renderDecisions: false,
 decisionScopes: ["__view__"],
 data: ...,
 xdm: ...
})
.then(console.log)
.catch(console.error);

Trigger View in at.js

adobe.target.triggerView("homeView")

Trigger View in alloy.js

alloy("sendEvent", {
 renderDecisions: true,
 xdm:{
  web:{
	 webPageDetails:{
     viewName: viewName
    }
  }
 }
}).then(result => {
console.log("here are the decisions that were not rendered: ", result.decisions);
console.log("here are the propositions: ", result.propositions);
});