Display Different Banners Based on Visitor's Continent Using JavaScript

Displaying continent-specific banners can enhance user experience by showing content relevant to the user's region. In this article, we'll guide you through setting up a JavaScript solution to display different clickable banners based on the visitor's continent. If the continent 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 continent code based on their IP address.

2. Writing the JavaScript

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Continent 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 continent code
                switch(response.ContinentCode) {
                    case "EU":
                        banner.innerHTML = '<a href="https://apip.cc/?eu"><img src="https://apip.cc/banner-eu.png" alt="Europe Banner"></a>';
                        break;
                    case "NA":
                        banner.innerHTML = '<a href="https://apip.cc/?na"><img src="https://apip.cc/banner-na.png" alt="North America Banner"></a>';
                        break;
                    case "AS":
                        banner.innerHTML = '<a href="https://apip.cc/?as"><img src="https://apip.cc/banner-as.png" alt="Asia Banner"></a>';
                        break;
                    default:
                        banner.innerHTML = '<a href="https://apip.cc/?default"><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/?default"><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 continent 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. Continent Code Banner Display:

    • A switch statement checks the ContinentCode in the response.
    • Depending on the ContinentCode, the script changes the inner HTML of the banner element to display the appropriate banner.
    • If the ContinentCode 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.

Conclusion

By following this guide, you can implement a mechanism to display continent-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.

Demo: Click here