true if accepted, false otherwise.
* @return collection {array} contains all accepted elements
*/
var _traverse = function (el, collection) {
collection = collection || [];
// el.children is only available for ie and ff3.5, but ff2 and ff3 does not have it
// el.childNodes is available to all browsers but includes text nodes
var nodes = el.children || el.childNodes;
if(nodes && nodes.length > 0) {
for(var i = 0, len = nodes.length; i < len; i++) {
_traverse(nodes[i], collection);
}
}
// no not pass to filterFn if el is document
// since document has not an html element (no attribute and tagName)
if(_isValidElement(el) && filterFn(el)) {
collection.push(el);
}
return collection;
};
/**
* Start collecting accepted HTML Elements starting from the document, if startEl is not defined.
* @private
* @method collect
* @param filterFn {function} the function should return true if accepted, false otherwise.
* @param startEl {element} (optional) start html element, document otherwise.
* @return the array of all accepted elements
*/
this.collect = function(filterFunc, startEl) {
startEl = startEl || document;
filterFn = filterFunc;
return _traverse(startEl);
};
};
//////////////////////////////////////////////////////////////////////////////////////////
/**
* The main class to use to update content with alps variations.
* The functions made available by this class are the only ones intended for end programmer
* use.
*
* The general approach for using this class is to add some Adchemy-specific attributes * to html elements that will have dynamic content, then to call this class to retrieve * the dynamic content. This class automatically populates tagged HTML elements with * their content. * *
A simple example fragment is shown below: *
* <script language="JavaScript" type="text/javascript">
*
* function callVariationService() {
* adchemyVariationFetcher.setAccountId(myacctnumber);
* adchemyVariationFetcher.getVariations("mypagegroup", null, null, null);
* }
* window.onload = callVariationService;
* <script>
*
*
* <p alps-component-name="mycomp" alps-variation-target="text"></p>
*
*
* @class adchemyVariationFetcher
*/
var adchemyVariationFetcher = new function() {
var defaultComponentServerHost = "alps.adchemy.com";
var defaultTimeout = 800;
var defaultRestrictToMappedParms = false;
var alpsSessionClearStr = "alps-session=new";
var defaultAlpsTracking = true;
var lastResponse = null;
/**
* Identifies the default div to make visible on error in a multiple-div page.
*
* If the library fails to load variations because of timeout or other error, * the div whose id is specified by this variable is made visible. * *
Note that calling the setMultiDiv() method is preferred to setting this variable * directly. * */ this.defaultDiv = ""; /** * Map of div id's to Variation Service template aliases. See setMultiDiv for * more information. * *
This variable should not be set directly by the programmer. */ this.divMap = null; /** * Boolean that indicates whether the current page uses Multi Div page mapping. * See setMultiDiv for more information. */ this.isMultiDiv = false; /** * In some template groups, one or more of the templates can be a redirect to some other url. This is * often the case when routing some traffic to an existing control page. * *
This property allows the programmer to identify a particular component name which, if present in the response, * indicates that the page should redirect to the value returned for that component. * *
Assume there exists a template group with two templates in it, one of which contains real components with content * that should be shown to users, and the other of which contains only a single component whose value is an url * to which to redirect the user. The value of this property is the name of that redirect component. * */ this.redirectComponentName = ""; /** * The account id to use when fetching the variations */ this.accountId = -1; /** * The host name to contact when fetching variations. If this variable is not * set then it defaults to alps.adchemy.com */ this.componentServerHost = defaultComponentServerHost; /** * The number in milliseconds that the API should wait after calling the componentServerHost before timing out. * After this period, the variationFetcher displays any specified default variation values, and ignores any * subsequent response from the server. * *
The default is 800 ms. */ this.timeout = defaultTimeout; /** * Specifies whether the variationFetcher should pass along all url parameters to the server, or whether it * should pass only those that are specified by a call to setVisitorContextMapping. * *
The default behavior is to forward all url parameters to the variation service. */ this.restrictToMappedParms = defaultRestrictToMappedParms; /** * A boolean property that appends a debugging log display at the bottom of the page */ this.isDebug = false; this.alpsTracking = defaultAlpsTracking; this.urlParams2VisitorContext = null; /** * A map of default variations for use if the server request fails or times out. * For more information, see setDefaultComponentVariations. */ this.defaultComponentVariations = null; /** * A boolean setting that determines whether to force a new session or not. If true, a call to getVariations will * start a new session, regardless of whether one already exists. If false, then if an existing session id exists * locally, it will be used. * *
Starting a new session forces the server to make new variation decisions.
*/
this.startNewSession = false;
this.sessionId = null;
this.userCallback = this.variationHandler;
this.sessionUrl = null;
this.sessionParams = {};
this.cookieDays;
this.cookieDomain;
this.cookieName;
this.useCookies = false;
/**
* A map that associates a particular component to a success and an error handler to be run
* before or after the default handler
*/
this.variationComponentHandlers = {};
/**
* Indicates whether the component handler type is to be run before or after the default handler. The value of this
* should be either 'BEFORE' or 'AFTER'
*/
this.componentHandlerType = '';
var createCookie = function(name,value,params) {
if (params !== undefined && params.days !== undefined) {
var date = new Date();
date.setTime(date.getTime()+(params.days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
var cookieVal = "";
if (value.constructor.name === "Object") {
for (var key in value) {
if (cookieVal !== "") {
cookieVal += '&' + key + '=' + escape(value[key]);
}
else {
cookieVal = key + '=' + escape(value[key]);
}
}
}
else {
cookieVal = escape(value);
}
var val = name+"="+cookieVal+expires+"; path=" + ((params !== undefined && params.path !== undefined) ? params.path : "/") + ((params !== undefined && params.domain !== undefined) ? ("; domain=" + params.domain) : "");
document.cookie = val;
};
var readCookie = function(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0, len=ca.length;i < len;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return unescape(c.substring(nameEQ.length,c.length));
}
return null;
};
var eraseCookie = function(name) {
createCookie(name,"",{days: -1});
};
var queryStrToObjLiteral = function(str) {
//check if there are anchors in the end and trash it
str = str.split('#')[0];
var paramArr = str.split('&');
var objLiteral = {};
for (var i=0, len=paramArr.length; i Say the user goes to the page
* foo.html, with parameter of baz='bee' and this is their first visit. They get a new session.
*
* Now they happen to see the same ad again, and navigate again to foo.html with parameter baz='bee'. If the
* account is tracking unique ad impressions, then the user should
* use the same session, not create a new one.
*
* Now they see a different ad that happens to point to the same page. They navigate to foo.html with parameter
* baz='bop'. They are navigating to the same landing page, but they saw a different ad, so if the account is tracking
* ad impressions, then they should start a new session.
*
* @param {String} url The url to match to determine if a new session is to be created. If the url for a new visit
* matches this one, the existing session is used if it exists.
* @param {Object} params A map of url parameters and their values.
* This object literal represents the query string to match in the url. For example, an parameter value
* of {'foo' : 'bar'} matches a query string of http:// If you don't want to make the div id's the same as the template aliases, then you can pass a map to this function,
* specifying the relationships between div id's and tempalte aliases. Something like the following:
*
* The usage of these properties are follows:
* The method checks whether a component name associated with a redirect is present in the response. If it is, then the user is redirected
* to the value returned for that component.
*
* This method also performs multiple div template logic to determine which
* div should be displayed for multiDiv pages. See setMultiDiv for more information.
* If a mapping is set then the specified values are used to display the proper div. If the mapping is not set then the
* page reference id of the response from requesting the variations is used as the div id.
*
* If a callbackHandler is specified in the call to getVariations, then this method is not called. Instead, the
* specified callback is called. If you need a custom callback handler but still desire to use the population behavior
* of this method, you can call variationHandler from within your custom callback. You may also define a callback that
* can be called before or after this default handler. These handlers maybe defined using setBeforeVariationComponentHandlers
* and setAfterVariationComponentHandlers.
*
* @param {Object} csResponse the response object from the variation service
*/
this.variationHandler = function(csResponse) {
if (adchemyVariationFetcher.isDebug) {
adchemyDebugInfo.append("Variation Handler - begin updating elements on the page");
if (typeof csResponse.toSource !== "undefined") {
adchemyDebugInfo.append("Response object: " + csResponse.toSource());
}
}
// We get called with an object returned from the server in JSON format, so it's now a javascript object
// This object has the same structure as the CsResponseType structure in XML. We may want to simplify this
// for the Javascript environment. It's probably more information and more nesting than we need here.
// Check if we got a parameter. Should always be there.
if(csResponse) {
// Check if there is a page instance returned, and whether it has components. Should always be there.
if(csResponse.pageInstance && csResponse.pageInstance.components) {
var components = csResponse.pageInstance.components;
var afterComponentVals = {}
//run component handlers defined to run before the default handler
if (this.componentHandlerType === 'BEFORE') {
for(var i=0, len = components.length; i < len; i++) {
var componentName = components[i].referenceId;
if (this.variationComponentHandlers[componentName] !== undefined) {
this.variationComponentHandlers[componentName].success.call(window, csResponse.pageInstance.pageReferenceId, componentName, components[i].value);
}
}
}
var afterComponentVals = {}
// Loop through the components we got back
for(var i=0, len = components.length; i < len; i++) {
var componentName = components[i].referenceId;
if (componentName === this.redirectComponentName) {
adchemyDebugInfo.append("Variation Handler - found redirect url. Redirecting.");
window.location = components[i].value;
return false;
}
else {
//check if this component needs to be processed after
if (this.componentHandlerType === 'AFTER' && this.variationComponentHandlers[componentName] !== undefined) {
afterComponentVals[componentName] = components[i].value;
}
//make sure this component hasn't already been processed before
else if(this.variationComponentHandlers[componentName] === undefined) {
var cur = this.getElementsToReplace(componentName);
this.replaceElements(cur, componentName, components[i].value);
}
}
}
//run component handlers defined to run after the default handler
if (this.componentHandlerType === 'AFTER') {
for (var key in this.variationComponentHandlers) {
if (this.variationComponentHandlers.hasOwnProperty(key) === true) {
this.variationComponentHandlers[key].success.call(window, csResponse.pageInstance.pageReferenceId, key, afterComponentVals[key])
}
}
}
//Do multi div logic if needed
if (this.isMultiDiv === true) {
var pageRefId = csResponse.pageInstance.pageReferenceId;
if (this.divMap === null) {
document.getElementById(pageRefId).style.display = 'block';
}
else {
document.getElementById(this.divMap[pageRefId]).style.display = 'block';
}
}
}
}
if (adchemyVariationFetcher.isDebug) {
adchemyDebugInfo.print();
}
return true;
};
this.defaultVariationHandler = function() {
if (this.isDebug) {
adchemyDebugInfo.append("Applying default Variations");
}
if (this.componentHandlerType === 'BEFORE') {
for (var key in this.defaultComponentVariations) {
if (this.variationComponentHandlers[key] !== undefined && this.variationComponentHandlers.hasOwnProperty(key) === true) {
this.variationComponentHandlers[key].error.call(window, key, this.defaultComponentVariations[key]);
}
}
}
var afterComponentVals = {}
// Loop through the components we got back
for (var key in this.defaultComponentVariations) {
var value = this.defaultComponentVariations[key];
if (adchemyVariationFetcher.isDebug) {
adchemyDebugInfo.append("Default variation for " + key + " is " + value);
}
//check if this component needs to be processed after
if (this.componentHandlerType === 'AFTER' && this.variationComponentHandlers[key] !== undefined) {
afterComponentVals[key] = value;
}
//make sure this component hasn't already been processed before
else if(this.variationComponentHandlers[key] === undefined) {
var cur = this.getElementsToReplace(key);
this.replaceElements(cur, key, value);
}
}
if (this.componentHandlerType === 'AFTER') {
for (var key in this.variationComponentHandlers) {
if (this.variationComponentHandlers.hasOwnProperty(key) === true) {
this.variationComponentHandlers[key].error.call(window, key, afterComponentVals[key])
}
}
}
//Do multi div logic if needed
if (this.isMultiDiv === true) {
if (this.defaultDiv === "") {
// Nothing to do. Log an error.
adchemyDebugInfo.append("Can't enable display in error case for multi-div without a default div id");
}
else {
//defaultDiv will always be set at this point now, either through the map or as a passed in value
document.getElementById(this.defaultDiv).style.display = 'block';
}
}
};
/**
* Retrieves all the elements to replace given the component name mapped
* @param componentName the Component name mapping
* @private
*/
this.getElementsToReplace = function(componentName) {
var filterFn = function(el) {
return el.getAttribute("alps-component-name") == componentName;
};
//return new GetElementByFilter(filterFn).collect();
return ElementFilter.collect(filterFn);
};
/**
* Replace the element attribute value with the component value mapped
* @private
* @param elements the element to be replace
* @param component the Component mapping
* @private
*/
this.replaceElements = function(elements, componentId, componentValue) {
if (!elements) {
adchemyDebugInfo.append("No matching DOM element name or id found for componentid: " + componentId)
return;
}
for (var i=0, len = elements.length; i < len; i++) {
var replacementType = elements[i].getAttribute("alps-variation-target");
this.doSingleReplacement(replacementType, componentId, componentValue, elements[i]);
}
};
this.doSingleReplacement = function(replacementType, componentId, componentValue, htmlElement) {
if(replacementType) {
replacementType = replacementType.toLowerCase();
}
var success = true;
switch (replacementType) {
case "text":
// Change some text
if (htmlElement.nodeName !== 'TITLE') {
htmlElement.innerHTML = componentValue;
}
else {
document.title = componentValue;
}
break;
case "class":
// Set a named style
htmlElement.className = componentValue;
break;
case "eval":
// evaluate some javascript and set a javascript component name variable to the result.
try {
window[componentId] = eval('(' + componentValue + ')');
} catch(err) {
adchemyDebugInfo.append("Unable to evaluate javascript component value. ComponentID: " + componentId);
}
break;
case "load":
//dynamic loading of a js file
loadScript(componentValue);
break
case null:
adchemyDebugInfo.append("Cannot populate DOM element: no adchemy-variation-target attribute on "
+ " element with name/id '" + componentId + "' and type " + htmlElement.tagName);
success = false;
break;
default:
htmlElement.setAttribute(replacementType, componentValue);
break;
}
if (adchemyVariationFetcher.isDebug && success) {
adchemyDebugInfo.append("Populated " + replacementType + " variation for component " + componentId + " on element of type " + htmlElement.tagName);
}
};
/**
* Private function to build the url string we'll pass to component server
* @private
* @param baseUrl
* @param accountId
* @param pagegroup
* @param page
* @param explicitVisitorContext
*/
this.buildUrl = function(accountId, pagegroup, page, explicitVisitorContext) {
// validation
if(!accountId) {
throw new Error("Null AccountID");
}
if(accountId <= 0) {
throw new Error("AccountId must be set");
}
if(!pagegroup) {
throw new Error("Null PageGroup");
}
// check to ensure no protocol on host name
if(!this.componentServerHost || this.componentServerHost.indexOf("://") != -1) {
throw new Error("Illegal host name: " + this.componentServerHost);
}
var urlParamsStr = adchemyVisitorContext.getUrlParametersAsString(this.urlParams2VisitorContext, this.restrictToMappedParms);
var url = this.componentServerHost + "/alps-cs/content/" + accountId + "/groups/" + pagegroup;
if (page && page.length > 0) {
url += "/pages/" + page;
}
url += "/pi?alps-output=json&jstracking=" + this.alpsTracking;
//add host url and referrer
url += "&hostURL=" + encodeURIComponent(window.location.href) + ((document.referrer !== "") ? ("&REFERER=" + encodeURIComponent(document.referrer)) : "");
var isNewSession = checkSessionConfig.call(this);
if (isNewSession === true) {
url += "&" + alpsSessionClearStr;
}
if (urlParamsStr !== null && urlParamsStr.length > 1) {
url += "&" + urlParamsStr;
}
// Now any extra vc they gave us
if(explicitVisitorContext) {
for (var key in explicitVisitorContext) {
var value = explicitVisitorContext[key];
if(key !== null && key !== "" && key !== undefined && value !== null && value !== undefined && value !== "") {
url += "&" + key + "=" + (value + '');
}
}
}
if (this.isDebug) {
adchemyDebugInfo.append("Variations url with visitor context: " + url);
}
return url;
};
this.buildEventUrl = function(accountId, eventName, explicitVisitorContext) {
if(!accountId) {
throw new Error("Null AccountID");
}
if(accountId < 0) {
throw new Error("AccountId must be set");
}
if(!eventName) {
throw new Error("Null EventName");
}
// check to ensure no protocol on host name
if(!this.componentServerHost || this.componentServerHost.indexOf("://") != -1) {
throw new Error("Illegal host name: " + this.componentServerHost);
}
var urlParamsStr = adchemyVisitorContext.getUrlParametersAsString(this.urlParams2VisitorContext, this.restrictToMappedParms);
var url = this.componentServerHost + "/alps-cs/event/" + accountId + "/" + eventName + "?alps-output=json&jstracking=" + this.alpsTracking;
if(!this.sessionId) {
adchemyDebugInfo.append("Null Session ID found when building event posting URL.");
}
else {
url += "&alps-session=" + this.sessionId;
}
if (urlParamsStr !== null && urlParamsStr.length > 1) {
url += "&" + urlParamsStr;
}
// Now any extra vc they gave us
if(explicitVisitorContext) {
for (var key in explicitVisitorContext) {
var value = explicitVisitorContext[key];
if(key !== null && key !== "" && key !== undefined && value !== null && value !== undefined && value !== "") {
url += "&" + key + "=" + (value + '');
}
}
}
if (this.isDebug) {
adchemyDebugInfo.append("Event url with visitor context: " + url);
}
return url;
}
};
* var customHandlerMap = {
* 'component1' : {
* success: successHandler,
* error: errorHandler
* },
* 'component2' : {
* success: successHandler,
* error: errorHandler
* }
* };
*
*/
this.setVariationComponentHandlers = function(handlerType, componentHandlerMap) {
this.componentHandlerType = handlerType;
this.variationComponentHandlers = componentHandlerMap;
};
/**
* Sets the configuration for context-sensitive session management. A page can specify the conditions under which
* a new session should be established, based on url and/or on request parameters. For example, a single account
* may have several pages, each of which may be arrived at with various parameters.
*
* setMultiDiv({'myDiv1' : 'temp1', 'myDivB' : 'temp2', 'myDivFoo' : 'temp3'}, 'myDiv1');
*
* @param {Object} divMapping An object literal that represents a mapping between page template aliases and div id's.
* @param {String} defDiv The id of the default div id that should be displayed if a load error occurs. If this parameter
* is not set then the variationFetcher uses the div Id specified by the first element of the divMapping parameter.
*/
this.setMultiDiv = function(divMapping, defDiv) {
this.divMap = divMapping;
if (defDiv === undefined) {
//create a default div
for (var key in this.divMap) {
this.defaultDiv = this.divMap[key];
break;
}
}
else {
this.defaultDiv = defDiv;
}
this.isMultiDiv = true;
};
/**
* Sets the mapping between the url parameters and visitor context attributes. If restrictToMappedParams is false then the
* entire query string of the url is passed, but if it is true then only the mapped parameters specified to
* this method are forwarded on when fetching the variations.
*
* @param {Object} urlParams2VisitorContext An map of parameter names to visitor context attribute names that is
* matched against the url and sent with variation request. For example:
* setVisitorContextMapping({'urlParam1': 'VC1', 'urlParam2':'VC2'});
*/
this.setVisitorContextMapping = function(urlParams2VisitorContext) {
// Should we do some error checking here?
this.urlParams2VisitorContext = urlParams2VisitorContext;
};
/**
* Sets the default variations to be used when an error occurs fetching
* variations
*
* @param {Object} defaultVariations A map of component names and the default value for each. For example:
* setDefaultComponentVariations({'c1' : 'This is the default Text for c1', 'c2' : 'This is the default Text for c2' });
*/
this.setDefaultComponentVariations = function(defaultVariations) {
this.defaultComponentVariations = defaultVariations;
};
/**
* Sets the hostname to be called when requesting variations
*
* @param {String} compenentServerHost The component server host
*/
this.setComponentServerHost = function(componentServerHost) {
// Should we do some error checking here?
this.componentServerHost = componentServerHost;
};
/**
* Sets the account id to be used when fetching variations
*
* @param {Number} accountId The account id
*/
this.setAccountId = function(accountId) {
// validation
if(!accountId) {
throw new Error("Null AccountID");
}
if(accountId <= 0) {
throw new Error("Invalid AccountId");
}
this.accountId = accountId;
};
this.findResponseElementValue = function (components, referenceId) {
if(components == null) return null;
for(var i=0, len = components.length; i < len; i++) {
if (components[i].referenceId == referenceId) {
return components[i].value;
}
}
return null;
};
/**
* Retrieves Variations from the server and call the client's callback function. Depending on the values specified
* for startNewSession and setSessionHandlingConfig, this call may start a new session. Starting a new session
* forces the server to make new variation decisions.
*
* adchemyVariationFetcher.getVariations(<page group>, <page>, explicitVisitorContext, cb_variations});
*
* @param {String} pagegroup The page group for which this page is the landing page
* @param {String} page The page alias of a specific page in the page group. This parameter is optional.
* @param {Object} explicitVisitorContext A map of visitor context name/value pairs. This parameter is optional.
* @param {Function} cb_variations The callback function to be called after the variations have been fetched.
* This parameter is optional and should only be used if the page requires custom variation handling/population.
*/
this.getVariations = function(pagegroup, page, explicitVisitorContext, cb_variations) {
//check if debugging is on through the url
if (/_avf_debug=true/.test(window.location.href) === true) {
this.isDebug = true;
}
adchemyJsonHelper.timeout = this.timeout;
if (cb_variations) {
this.userCallback = cb_variations;
} else {
// default variation handler
this.userCallback = this.variationHandler;
}
try {
adchemyJsonHelper.sendData(this.buildUrl(this.accountId, pagegroup, page, explicitVisitorContext), null, this.completionHandler, this.errorHandler);
} catch(e) {
if (adchemyVariationFetcher.isDebug) {
adchemyDebugInfo.append("ERROR: Exception detected while sending request to variation service: " + e.message);
adchemyDebugInfo.print();
}
}
};
/**
* Sends a request which represents a conversion or other specific event
* @param {String} eventName The name of the event
* @param {Object} explicitVisitorContext A map of visitor context name/value pairs. This parameter is optional.
*/
this.postEvent = function(eventName, explicitVisitorContext) {
try {
adchemyJsonHelper.sendData(this.buildEventUrl(this.accountId, eventName, explicitVisitorContext), null, this.statusHandler, this.errorHandler);
} catch(e) {
if (adchemyVariationFetcher.isDebug) {
adchemyDebugInfo.append("ERROR: Exception detected while sending request to variation service: " + e.message);
adchemyDebugInfo.print();
}
}
};
/**
* This function is called when retrieving variations fails for some reason. Upon failure the default variations are used
* to populate the page. In the case of a multiple div template the default div id is used to display
* the proper div. This method can be overridden.
*/
this.errorHandler = function() {
// Call the default variation handler so that the page will show the default variations
adchemyVariationFetcher.defaultVariationHandler();
if (adchemyVariationFetcher.isDebug) {
adchemyDebugInfo.print();
}
};
this.completionHandler = function(CsResponse) {
// There really shouldn't be any response. We're just keeping the signature consistent.
if (adchemyVariationFetcher.isDebug) {
adchemyDebugInfo.append("Successful post to component server.");
adchemyDebugInfo.print();
}
// Set the session ID so we always have it
if(CsResponse) {
adchemyVariationFetcher.sessionId = CsResponse.sessionId;
adchemyVariationFetcher.lastResponse = CsResponse;
}
if(adchemyVariationFetcher.userCallback) {
adchemyVariationFetcher.userCallback(CsResponse);
}
};
this.statusHandler = function(CsResponse) {
// There really shouldn't be any response. We're just keeping the signature consistent.
if (adchemyVariationFetcher.isDebug) {
adchemyDebugInfo.append("Successful post to component server.");
adchemyDebugInfo.print();
}
};
/**
* Called upon return of the variations from the server, this function performs auto-population of content.
* The following types of auto-population are supported:
*
* <p id='myparagraph' alps-component-name='textcomponent' alps-variation-target='text'>default content</p>
* <img id='myimage' alps-component-name='imageComponent' alps-variation-target='src' src='defaultimagelocation'/>
* <div id='stylediv' alps-component-name='styleComponent' alps-variation-target='class' class='defaultstylename'>Foo</div>
* <a id='myanchor' alps-component-name='linkComponent' alps-variation-target='href' href='defaultlinklocation'>foo</a>
* <script type='text/javascript' alps-component-name='myVar' alps-variation-target='eval'></script>
* <script type='text/javascript' alps-component-name='myScript' alps-variation-target='load'></script>
*
*
*