There is, as we say, an "impedance mismatch" between variables and editable areas.
And in a theoretical way it makes sense, because a variable is expected to be used in a context where it can't be just deleted by the user, i.e. a fixed part of the page. But in reality we sometimes want to use them as if they're tokens (and on the flipside, Marketo doesn't let us place enough restrictions on the use of tokens).
What we do is use the ${variable} as if it's a token and also include the ${variable} in a fixed JS block.
Something like this:
var urlVariables = {
"TwitterURL" : "${TwitterURL}"
};
[].forEach.call(document.links,function(link){
var lastPathSegment = link.pathname.split('/').pop(),
lastPathSegDecoded = decodeURIComponent(lastPathSegment),
mktoVariableRE = /^\$\{(.*)\}$/; // syntax like ${myvar}
if ( mktoVariableRE.test(lastPathSegDecoded) ) {
var variableName = lastPathSegDecoded.replace(mktoVariableRE,'$1');
link.href = urlVariables[variableName];
}
});
In a nutshell, replacing the token-like syntax "${TwitterURL}" with the variable's real value, whenever it's present in a link. The user is none the wiser about how the variable actually gets interpolated into the link, it just works.
, which significantly reduces the risk of errors..png)