Home Programming [2023] Best practices for Page Redirect in JavaScript !

[2023] Best practices for Page Redirect in JavaScript !

by Yasir Aslam
0 comment

Redirection by JavaScript seems to be simple, however there are typical mistakes users tend to make. They make it difficult to access analysis in Google Analytics. It is my intention now to explain the kinds of defects and measures to prevent them in this article.

touch screen 1023966 640

Assumptions

We see a case you are redirected using JavaScript, not using server side redirect such as .htaccess, in redirect between mobile website and desktop website. In this case, you would think they correctly work. However, in fact, you have access analysys on the serious problem.

In this article, I present problems that occur when you implement the redirect in JavaScript. Besides, I introduce that the correct implementation method for solving these problems. However, if you can use 301/302 redirects on the server side, you should use them. This post is written for a reference when you CAN’T use them.

How to redirect using simple JavaScript and typical problems. How to confirm that they correctly work.

How to implement a simple JavaScript Redirect

Implementation of simple redirect between mobile website and desktop website using JavaScript is following.

// JavaScript of desktop website side
if ( isMobileDevice() ) {
  location.href = "http://example.com/sp/index.html";
}

This implementation is used often because it is very simple. However it has the following two problems in web access analysis.

What problems do we have?

Case 1: The referrer is set as own website, so, it is regarded direct traffic in Google Analytics

Apparently it has no problem from user side, but the referrer is set as own domain. Besides in the latest universal analytics, Google Analytics interprets own domain referrer traffic as direct one. So, when you open your website from search engine or other websites, your traffic is regarded as direct traffic by Google Analytics.

Case 2: Query Parameter (such as Custom Campaign or adwords gclid) is less counted

When redirect, above implementation discardsquery parameters of custom campaign which are assiened intentionally and that of gclid granted automatically when Adwords and Google Analytics are linked. Because of this, traffic with a custom campaign will be measured less than the actual amount in Google Analytics.

For above reasons, we will not be able to correctly measure the traffic of via custom campaign.

How can we confirm that ower website have no problem then?

You can confirm that your website implementation is correct or not by following methods. If a problem occures in the following way, let’s talk to someone professional.

How to confirm the case 1

Please search for website that have links to your website and ones to redirect occurs from Googe/Yahoo search result and other website. When you click on the links, can you check the traffic from the website on real-time reports of Google Analytics? If not, it is likely that you have wrong implementation on your website.

How to confirm the case 2

Please open a page that occurs redirect. Use a little trick on URL when you do this. To distinguish your inflow, please grant the custom parameter to the URL (ex: utmsource=Manual, utmmedium=Manual, utm_campaign=RedirectTest).

Please check the URL after redirect. Does it include custom parameter? Then, it has no problem. Can you find the custom parameter traffic in Google Analytics?. Then, no problem too. If both of them are not happening, it is very likely that your website have inappropriate implementation.

How to correct inappropriate redirect and Google Analytics implementation of redirected page

How to correct inappropriate redirect

The important point is to deliver correct information required by the redirect. The information that required redirected site to solve above problem is redirect before the referrer and the query parameter.

Use the correct code bellow:

if ( isMobileDevice()) {
  var redirect_url = "http://example.com/sp/index.html" + location.search;
  if (document.referrer) {
    var referrer = "referrer=" + encodeURIComponent(document.referrer);
    redirect_url = redirect_url + (location.search ? '&' : '?') + referrer;
  }
  location.href = redirect_url;
}

In this method, you can maintain parameter information used when accessing a page before direct and add referrer information to parameter. You will be able to pass right referrer information to redirect page. If you can access the same storage before and after the redirect, you should store the referrer to storage but not add to a query parameter.

Google Analytics implementation of redirected page

Parameters such as Custom Campaign and gcdid for AdWords works correctly with the code above. However please note that referrer data does not work correctly with it. To avoid this, you need to customize the tracking code of Google Analytics in redirect page as below.

Sample: customize the tracking code of Google Analytics in redirect page.

ga('create', 'UA-0123456-1');
if (location.search.indexOf('referrer=') >= 0) {
  var params = location.search.replace('?', '').split('&');
  for (var i = 0; i < params.length; i++) {
    var kv = params[i].split('=');
    if (kv.length == 2 && kv[0] == 'referrer') {
      ga('set', 'referrer', decodeURIComponent(kv[1]));
      break;
    }
  }
}
ga('send', 'pageview');

I write code fragments that tracker creation, to set referrer from parameters, and to send pageviews. This JavaScript program is perform that if contain referrer information in the URL, overwritten with the value of the referrer data that Google Analytics sends.

One more thing to add, in this method you will have trouble to analyze website page-by-page because the URL measured by Google Analytics have referrer parameter and they are dispersed. Remove the Google Analytics report to referrer parameter is not displayed.

The way to solve this is very simple. You only need to put the “referrer” to “Exclude URL Query Parameters” field that is in the “View Settings” of the “Google Analytics Admin” page (if it already has something, put a comma separat). By doing this, the same page but different referrer won’t be dispersed when viewing pages such as “Behavior > Site Content > All Pages”.

If you store referrer to storage (not parameter) when redirect, you should get it from the storage and execute following code to delete the value from storage. In the case, you don’t need to set Query Parameter Exclusion.

ga('set', 'referrer', 'The stored referrer value');
// add code that delete the value from storage in here.

Conclusion

This article is written to explain problems and how to solve them on “Redirect by JavaScript”. However same things can occur in other occasions (example: refresh command of meta tag, page redirect in server side). Normally, website creators have to understand operating specification of an access analysis tool and how to implement it properly. However why don’t you check website once again and confirm it is implemented correctly, if you do web advertising/web marketing?

Thank you for reading through the article and hope this gives you insight.

You may also like

Leave a Comment