We can add custom parameters on the fly to a redirect URL through the Wisepops' JS callbacks feature.
Let's say we want to redirect our visitors that click on a CTA to https://example.com/ with a dynamic GET parameter year. For example, during the year 2020, the CTA should redirect to https://example.com/?year=2020.
Popup creation
We will start by creating a CTA block in our popup, as shown below.
The CTA is configured to redirect the visitor to https://example.com. This should contain only the static part of the URL, without the dynamic parameters. It can contain static parameters, like https://example.com?static=ok.
Also, note that the "Track clicks" option is checked. This is important for our custom behavior to be enabled.
After-tracked-click callback
Now, let's write a callback that is triggered on the After tracked click event:
// Support for IE11: Polyfill closest()
// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
var el = this;
do {
if (Element.prototype.matches.call(el, s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}
// Add the current year as CTA URL parameter
var year = (new Date).getFullYear();
var link = event.target.closest('a');
if (link) {
link.href += (link.href.indexOf('?') === -1 ? '?' : '&')
+ 'year=' + encodeURIComponent(year);
}
The first lines only aim to support Internet Explorer 11. Then, we add the current year in the event target URL (the CTA).
Here we used the Wisepops interface to add the JS callbacks. You might want to write this code on your own website instead (to make it work on multiple popups or to inject backend variables). Please refer to this article to learn how to do so.
Forward current URL parameters
Another simple use case is to copy some parameters of the current URL into the targeted destination of the CTA.
The JS callback would look like this:
// List of parameters to forward
var parametersToForward = [
'utm_source',
'utm_content'
];
// Parse URL
var vars = document.location.search.substr(1).split("&");
var queryString = {};
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
try {
queryString[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
} catch (error) {
console.warn('Failed to parse parameter ' + pair[0]);
}
}
// Support for IE11: Polyfill closest()
// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
var el = this;
do {
if (Element.prototype.matches.call(el, s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}
// Update the CTA link with current params to forward
var params = [];
parametersToForward.forEach(function (paramName) {
if (typeof queryString[paramName] !== 'undefined') {
params.push(encodeURIComponent(paramName) + '=' + encodeURIComponent(queryString[paramName]));
}
});
var link = event.target.closest('a');
if (params.length && link) {
link.href += (link.href.indexOf('?') === -1 ? '?' : '&') + params.join('&');
}
You must adapt the parametersToForward variable to include the parameters to forward.