Skip to main content

Redirect users to new URL based on current URL


I'll be using JavaScript and the new feature called URLSearchParams for creating a new url out of the current URL and forward the user to it.
Why?
My use case was to forward my users to Google Play Store on Android using a link shared through Unity Android application. Now the Play Store link or Market link will not be detected as a browser request but regular text.
Market link looks like this: market://details?id=com.shiftescape.meowity&referrer=EFFX



This link when opened in computer web browser will lead to nothing. When opened in Google Chrome it would rather make a search.

Only other solution is to force the user's browser to open link and not do a search.

For this we'll be making a little website which will forward any visitor to our modified link retaining their referral code.

Initial Setup
XAMPP server installed and Apache module running.

For running our JavaScript code let's make a new web page index.html

<!DOCTYPE html>
<html>
<body>

<h2>Click the button</h2>
<p>Upon clicking you'll be forwarded to shiftescape.com</p>

<button onclick="forward()">Click me!</button>

<script>
var newUrl = "https://www.shiftescape.com";
function forward() {
  location.replace(newUrl)
}
</script>

</body>
</html> 


Now we need to grab the parameters from current url and add them to newUrl. For example if I open http://localhost/referid/?referrer=RX098787 it will still open the same page.
But I can use these get parameters to modify the newUrl I have to forward my users to.

To grab the parameters in url we will use URLSearchParams supported by Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ and Chrome 49+.

<!DOCTYPE html>
<html>
<body>

<h2>Click the button</h2>
<p>Upon clicking you'll be forwarded to shiftescape.com</p>

<button onclick="forward()">Click me!</button>

<script>

let params = new URLSearchParams(location.search);

var referralID = params.get('referrer');

//var newUrl = "market://details?id=com.shiftescape.meowity&referrer=" + referralID;
var newUrl = "http://www.shiftescape.com/referredBy=" + referralID;

function forward() {
  location.replace(newUrl)
}
</script>

</body>
</html> 


Now we also add a timeout for this method instead of clicking the button.

<!DOCTYPE html>
<html>
<body>

<p>You'll be redirected in a sec..</p>

<script>
setTimeout(function(){
           let params = new URLSearchParams(location.search);

var referralID = params.get('referrer');

//var newUrl = "market://details?id=com.shiftescape.meowity&referrer=" + referralID;
var newUrl = "http://www.shiftescape.com/referredBy=" + referralID;

location.replace(newUrl);

         }, 1000);
</script>

</body>
</html> 




That's it.
I commented out the newUrl part for forwarding users to Google Play Store as this cannot be tested on Chrome on PC.

For context and search visibility.
Redirect users to Google Playstore or App Store.
Custom redirect using JavaScript.
Change URL from current URL.
How to use URLSearchParams.




Comments

Popular posts from this blog

Unity Mobile Game Optimization Checklist

- On Image and Text components that aren’t interacted with you can uncheck “Raycast Target” on it, as it will remove them from any Raycast calculus. - Click on your textures in your “Project” window. Click on the “Advanced” arrow, and now check “Generate Mip Maps”, Unity especially recommends it for faster texture loading time and a lower rendering time. - Set the “Shadow Cascades” to “No Cascades” (Quality settings) - If you have dynamic UI elements like a Scroll Rect with a lot of elements to visualize, a good practice is to turn off the pixel perfect check box on the canvas that contains the list and disable the items that aren’t visible on the screen. - Set all non moving objects to "Static" - Above Unity3d 2017.2 you should turn off "autoSyncTransforms" on the Physics tab - Always use Crunch Compression Low on textures - Try to keep the “Collision Detection Mode” on “Discrete” if possible, as “Dynamic” demands more performance. - You can go to the TimeManager w...

How to make download file button in react js

To create a download file button in React.js, follow these steps: Import the necessary dependencies: javascript Copy code import React from 'react' ; import { saveAs } from 'file-saver' ; Create a function that handles the download action: javascript Copy code const handleDownload = ( ) => { // Create a new Blob object with the desired content const fileContent = 'This is the content of the file you want to download.' ; const blob = new Blob ([fileContent], { type : 'text/plain;charset=utf-8' }); // Use the saveAs function from the file-saver library to initiate the download saveAs (blob, 'download.txt' ); }; Create a button component and attach the handleDownload function to the button's onClick event: javascript Copy code const DownloadButton = ( ) => { return ( < button onClick = {handleDownload} > Download File </ button > ); }; Use the DownloadButton component wherever ...

How to Convert Unreal Engine 5.1 Blueprint Project to C++ Project

To begin, open your project in the Unreal Engine 5 or a newer version of the editor.  Next, access the New C++ Class Dialog by selecting Tools and then New C++ Class .  From there, create a new "None" class and press "Create Class."  You might receive a warning message regarding the game module compilation, but you can disregard it and choose "No."  After closing any pop-ups, warnings, or success notifications, exit the Editor.  Proceed to your project's folder, right-click on the .uproject file, and select "Generate Visual Studio project files."  Double-click your project's .sln file to open it in Visual Studio.  In Visual Studio's Solution Explorer, find and choose your project.  Select "Development Editor" in the build configuration drop-down menu.  Right-click on your project and select "Build" to compile it without any errors.  Afterward, set the build configuration drop-down menu to "Development" ...