Display Different Banner Based on Visitor Country Using JavaScript

Displaying country-specific banners can greatly improve user engagement by showing relevant content tailored to the user's location. In this article, we will guide you through setting up a JavaScript solution to display different clickable banners based on the visitor's country. If the country doesn't match any specified, a default banner will be displayed.

Step-by-Step Guide

1. Setting Up the Endpoint

We'll continue using the endpoint https://apip.cc/json to fetch the visitor's country code based on their IP address.

2. Writing the JavaScript

Below is the JavaScript code that changes the banner based on the visitor's country code.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Country Specific Banner</title>
    <script>
        var endpoint = 'https://apip.cc/json';
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var response = JSON.parse(this.responseText);
                if(response.status !== 'success') {
                    console.log('Query failed: ' + response.message);
                    return;
                }
                var banner = document.getElementById('banner');
                // Change banner based on the country code
                switch(response.CountryCode) {
                    case "GB":
                        banner.innerHTML = '<a href="https://apip.cc"><img src="https://apip.cc/banner-gb.png" alt="UK Banner"></a>';
                        break;
                    case "US":
                        banner.innerHTML = '<a href="https://apip.cc"><img src="https://apip.cc/banner-us.png" alt="US Banner"></a>';
                        break;
                    default:
                        banner.innerHTML = '<a href="https://apip.cc"><img src="https://apip.cc/banner-default.png" alt="Default Banner"></a>';
                }
            }
        };
        xhr.open('GET', endpoint, true);
        xhr.send();
    </script>
</head>
<body>
    <div id="banner">
        <!-- Default content if JavaScript fails or is disabled -->
        <a href="https://apip.cc"><img src="https://apip.cc/banner-default.png" alt="Default Banner"></a>
    </div>
</body>
</html>

Explanation of the Script

  1. Endpoint Declaration: The endpoint variable holds the URL to the service that returns the visitor's country information.

  2. XMLHttpRequest Setup: An XMLHttpRequest object (xhr) is created to send a request to the endpoint.

  3. Handling the Response:

    • The onreadystatechange function is triggered every time the state of the xhr object changes.
    • When the request is complete (readyState == 4) and successful (status == 200), the response is parsed as JSON.
    • If the response status is not 'success', an error message is logged.

  4. Country Code Banner Display:

    • A switch statement checks the CountryCode in the response.
    • Depending on the CountryCode, the script changes the inner HTML of the banner element to display the appropriate banner.
    • If the CountryCode does not match any specified case, the script sets a default banner.

  5. Fallback Content:

    • A default banner is provided in the div with the ID banner to ensure that users see a banner even if JavaScript fails or is disabled.

Testing the Script

To test the script:

  1. Place the entire HTML code in an HTML file.
  2. Ensure the endpoint https://apip.cc/json is accessible and returns the correct data.
  3. Open the HTML file in a browser. Depending on your IP address, the appropriate banner should be displayed.

Demo: Click here

Conclusion

By following this guide, you can implement a mechanism to display country-specific clickable banners on your website using JavaScript. This approach ensures that visitors see the most relevant promotional content, enhancing user experience and potentially increasing engagement and conversions.