In this article, you’ll learn the following:
Overview
By implementing the Wingify SmartCode on your website, you grant Wingify access to track the visitors’ actions on your website. Through this, Wingify collects the attributes of your visitors and their interactions with your web pages that are involved in the campaigns that you have created in Wingify. These data will be directly sent to Wingify's visitor data server, where they are classified and stored. Wingify uses these data for your analysis and report generation.
However, if you wish to take control over the data that is transferred to the Wingify servers, you can opt for the reverse proxy methodology, which makes your server act as a middleware, placing it in between the data collector (your website) and the receiver (Wingify). This actually makes the data collected from your website be sent to your server, where you can inspect the collected data before passing it over to the Wingify server.
Wingify, in general, classifies information and anonymizes any personally identifiable information (PII), such as email addresses, passwords, etc. Using the reverse proxy method, you will be able to restrict the flow of such information to the Wingify server.
Pros of Reverse Proxy Methodology
The reverse proxy methodology primarily aims at routing the calls to your server from your website before reaching Wingify. Besides this, the process also rewards you with the following benefits:
- The power to control and classify which type of data can be sent to the Wingify servers.
- Restricting the transfer of any data that you regard critical or confidential.
- Obviating the trouble of Wingify server calls being blocked by an ad blocker application.
NOTE: Since the information is not routed directly to the Wingify server, visitors’ IP addresses cannot be tracked. Due to this, you will not be able to segment visitors using their geographical location, device type, device OS, or device IP address.
Implementing Reverse Proxy
Implementing the reverse proxy setup is pretty straightforward. Once you have installed the Wingify SmartCode into the <head> tag of your website’s source code, you just need to replace https://edge.wingify.net in the SmartCode in the following two ways:
Via an Independent Domain or a Subdomain
If your main domain is already loaded enough, you can choose to use a different domain or a subdomain to deploy the Wingify SmartCode in it. This requires you to maintain both servers for your website.
Using this approach, you can create a subdomain under your main domain or a domain independent of the main domain and use it to replace the Wingify server with it. For example, let’s say, you’ve created a subdomain, say, https://sub.mydomain.com, then in the SmartCode, you need to replace https://edge.wingify.net with https://sub.mydomain.com. You can apply the same procedure for an independent domain, as well.
For the proxy setup at the server side for the subdomain / independent domain approach, follow this example:
const express = require("express");
const fs = require("fs"),
https = require("https"),
http = require("http");
const { createProxyMiddleware } = require("http-proxy-middleware");
const dacdnDomain = "sub.mydomain.com", dacdnPath = ""
const ancdnDomain = "sub.mydomain.com", ancdnPath = ""
const yourWebsite = "mydomain.com"
/*
Here we have used sub.mydomain.com as a subdomain to proxy the requests. It can be anything, be it a subdomain or a different domain altogether. In this example, VWO JS code will start proxying the requests to https://sub.mydomain.com/
dacdnDomain → This is used to proxy all the A/B test/goals/funnels/surveys related requests.
ancdnDomain → This is used to proxy all the recordings/heatmaps/form-analytics related requests.
Unless you wish to have a different server to proxy the recordings/heatmaps/form-analytics related requests, keep the values of dacdnDomain & ancdnDomain the same.
*/
const app = express();
const options = {
changeOrigin: true,
router: {
// "mydomain.com": "proxyto",
[`${ancdnDomain}${ancdnPath}/r1/`]: "https://r1.visualwebsiteoptimizer.com",
[`${ancdnDomain}${ancdnPath}/r2/`]: "https://r2.visualwebsiteoptimizer.com",
[`${ancdnDomain}${ancdnPath}/r3/`]: "https://r3.visualwebsiteoptimizer.com",
[`${dacdnDomain}${dacdnPath}/`]: "https://dev.visualwebsiteoptimizer.com",
[`${yourWebsite}/`]: "https://yourwebsite.com",
"local.com/": "http://localhost:8000",
},
//If your account is configured with a non-US data center, replace 'r1', 'r2', 'r3',... with ‘r1eu01’, ‘r2eu01’, ‘r3eu01’,... for Europe and ‘r1as01’, ‘r2as01’, ‘r3as01’,... for India.//
onProxyReq: function (proxyReq, req, res) {
proxyReq.setHeader("X-Forwarded-VWO", dacdnDomain + dacdnPath);
proxyReq.setHeader("X-Forwarded-VWOInsights", ancdnDomain + ancdnPath); // this need not be be same as X-Forwarded-Host
},
pathRewrite: {
[`^${ancdnPath}/r1/`]: '',
[`^${ancdnPath}/r2/`]: '',
[`^${ancdnPath}/r3/`]: '',
[`^${dacdnPath}/`]: '',
},
};
//If your account is configured with a non-US data center, replace 'r1', 'r2', 'r3',... with ‘r1eu01’, ‘r2eu01’, ‘r3eu01’,... for Europe and ‘r1as01’, ‘r2as01’, ‘r3as01’,... for India.//
app.use("/", createProxyMiddleware(options));
https
.createServer(
{
key: fs.readFileSync("/Users/username/localhost.key"),
cert: fs.readFileSync("/Users/username/localhost.crt"),
},
app
)
.listen(443, () => {
console.log("Listening at :443...");
});const express = require("express");
const fs = require("fs"),
https = require("https"),
http = require("http");
const { createProxyMiddleware } = require("http-proxy-middleware");
const dacdnDomain = "sub.mydomain.com", dacdnPath = ""
const yourWebsite = "mydomain.com"
/*
Here we have used sub.mydomain.com as a subdomain to proxy the requests. It can be anything, be it a subdomain or a different domain altogether. In this example, Wingify JS code will start proxying the requests to https://sub.mydomain.com/
dacdnDomain → This is used to proxy all requests.
*/
const app = express();
const options = {
changeOrigin: true,
router: {
// "mydomain.com": "proxyto",
[`${dacdnDomain}${dacdnPath}/`]: "https://edge.wingify.net",
[`${yourWebsite}/`]: "https://yourwebsite.com",
"local.com/": "http://localhost:8000",
},
onProxyReq: function (proxyReq, req, res) {
proxyReq.setHeader("X-Forwarded-Wingify", dacdnDomain + dacdnPath);
// this need not be be same as X-Forwarded-Host
},
pathRewrite: {
[`^${dacdnPath}/`]: '',
},
};
app.use("/", createProxyMiddleware(options));
https
.createServer(
{
key: fs.readFileSync("/Users/username/localhost.key"),
cert: fs.readFileSync("/Users/username/localhost.crt"),
},
app
)
.listen(443, () => {
console.log("Listening at :443...");
});
Via the Main Domain (Path-Based)
If your main domain is capable of handling the load, you can use this method to deploy the Wingify SmartCode in it. In this approach, you will have to include a separate route for Wingify in the main domain. Let’s say your main domain is https://mydomain.com, then you need to replace https://edge.wingify.net with https://mydomain.com/wingify.
For the proxy setup at the server side for the main domain (path-based) approach, follow this example:
const express = require("express");
const fs = require("fs"),
https = require("https"),
http = require("http");
const { createProxyMiddleware } = require("http-proxy-middleware");
const dacdnDomain = "mydomain.com", dacdnPath = "/vwo"
const ancdnDomain = "mydomain.com", ancdnPath = ""
const yourWebsite = "mydomain.com"
/*
In this example, we have given the value of dacdnPath as "/vwo". This simply means VWO JS code will start proxying the requests to https://mydomain.com/vwo/
*/
/*
Here we have used vwo.yourWebsite.com as a subdomain to proxy the requests. It can be anything, be it a subdomain or a different domain altogether.
dacdnDomain → This is used to proxy all the A/B test/goals/funnels/surveys related requests.
ancdnDomain → This is used to proxy all the recordings/heatmaps/form-analytics related requests.
Unless you wish to have a different server to proxy the recordings/heatmaps/form-analytics related requests, keep the values of dacdnDomain & ancdnDomain the same.
*/
const app = express();
const options = {
changeOrigin: true,
router: {
// "yourDomain": "proxyto",
[`${ancdnDomain}${ancdnPath}/r1/`]: "https://r1.visualwebsiteoptimizer.com",
[`${ancdnDomain}${ancdnPath}/r2/`]: "https://r2.visualwebsiteoptimizer.com",
[`${ancdnDomain}${ancdnPath}/r3/`]: "https://r3.visualwebsiteoptimizer.com",
[`${dacdnDomain}${dacdnPath}/`]: "https://dev.visualwebsiteoptimizer.com",
[`${yourWebsite}/`]: "https:///yourwebsite.com",
"local.com/": "http://localhost:8000",
},
//If your account is configured with a non-US data center, replace 'r1', 'r2', 'r3',... with ‘r1eu01’, ‘r2eu01’, ‘r3eu01’,... for Europe and ‘r1as01’, ‘r2as01’, ‘r3as01’,... for India.//
onProxyReq: function (proxyReq, req, res) {
proxyReq.setHeader("X-Forwarded-VWO", dacdnDomain + dacdnPath);
proxyReq.setHeader("X-Forwarded-VWOInsights", ancdnDomain + ancdnPath); // this need not be be same as X-Forwarded-Host
},
pathRewrite: {
[`^${ancdnPath}/r1/`]: '',
[`^${ancdnPath}/r2/`]: '',
[`^${ancdnPath}/r3/`]: '',
[`^${dacdnPath}/`]: '',
},
};
//If your account is configured with a non-US data center, replace 'r1', 'r2', 'r3',... with ‘r1eu01’, ‘r2eu01’, ‘r3eu01’,... for Europe and ‘r1as01’, ‘r2as01’, ‘r3as01’,... for India.//
app.use("/", createProxyMiddleware(options));
https
.createServer(
{
key: fs.readFileSync("/Users/username/localhost.key"),
cert: fs.readFileSync("/Users/username/localhost.crt"),
},
app
)
.listen(443, () => {
console.log("Listening at :443...");
});const express = require("express");
const fs = require("fs"),
https = require("https"),
http = require("http");
const { createProxyMiddleware } = require("http-proxy-middleware");
const dacdnDomain = "mydomain.com", dacdnPath = "/wingify"
const yourWebsite = "mydomain.com"
/*
In this example, we have given the value of dacdnPath as "/wingify". This simply means Wingify JS code will start proxying the requests to https://mydomain.com/wingify/
*/
/*
dacdnDomain → This is used to proxy all the requests to our servers.
*/
const app = express();
const options = {
changeOrigin: true,
router: {
[`${dacdnDomain}${dacdnPath}/`]: "https://edge.wingify.net",
[`${yourWebsite}/`]: "https:///yourwebsite.com",
["local.com/"]: "http://localhost:8000",
},
onProxyReq: function (proxyReq, req, res) {
proxyReq.setHeader("X-Forwarded-Wingify", dacdnDomain + dacdnPath);
// this need not be be same as X-Forwarded-Host
},
pathRewrite: {
[`^${dacdnPath}/`]: ''
},
};
app.use("/", createProxyMiddleware(options));
https
.createServer(
{
key: fs.readFileSync("/Users/username/localhost.key"),
cert: fs.readFileSync("/Users/username/localhost.crt"),
},
app
)
.listen(443, () => {
console.log("Listening at :443...");
});