Blocking certain visitors based on their IP address.

In some scenarios, you may need to restrict or customize content for visitors based on their IP addresses or a range of IP addresses. To implement this, you'll require the services of a third-party provider to determine the IP addresses of your visitors. While many providers offer such services, we'll use https://ipapi.co/ as our example for demonstration purposes in this guide.

Setting Up IP-Based Filtering

1. Adding and Configuring the JavaScript Code

To begin, you need to insert the following JavaScript code into the Global JavaScript section of your project. Adjust the settings in the code as per your specific requirements:

// Configuration settings
const config = {
  singleIP: false,
  startIP: '187.189.49.60',
  endIP: '187.189.49.70',
  showExperiences: false,
};

// Function to convert IP address to a numerical value
function IPtoNum(ip) {
  return ip.split('.').reduce((acc, octet) = acc * 256 + parseInt(octet, 10), 0);
}

// Function to check and update experiences visibility
function updateExperiences(geoipdata) {
  const userIPNum = IPtoNum(geoipdata.ip);
  const startIPNum = IPtoNum(config.startIP);
  const endIPNum = IPtoNum(config.endIP);

  if (config.singleIP && geoipdata.ip === config.startIP) {
    config.showExperiences = true;
  } else if (!config.singleIP && userIPNum = startIPNum && userIPNum <= endipnum)="endIPNum)" {="{" config.showexperiences="false;" }="}" else="else" fetch="Fetch" user="user" s="s" ip="IP" data="data" and="and" update="update" experiences="experiences" based="based" on="on" function="function" fetchipdata()="fetchIPData()" fetch(="fetch(" https:="https:" ipapi.co="ipapi.co" json="json" )=")" .then(response=".then(response"> {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data = {
      updateExperiences(data);
      console.log('Experiences visibility set to:', config.showExperiences);
    })
    .catch(error = {
      console.error('Failed to fetch IP data:', error);
    });
}

// Initiate the process
fetchIPData();
</=>

2. Integrating the JavaScript Condition

Next, add the following JavaScript condition to the audience conditions of the experiences you wish to control. This condition should be combined with any other audience conditions using an AND logic:

(function() {
  // Make sure to include a reference to the configuration and functions defined earlier

  // Initiates fetching IP data and updates the visibility of experiences accordingly
  fetchIPData();

  // Function to recheck the experiment if needed, placeholder for actual functionality
  function convert_recheck_experiment() {
    console.log("Rechecking experiment due to missing IP data.");
    // Additional logic to recheck or retry fetching IP data could be added here
  }

  // Check if the IP data has been set and is not undefined or null
  function checkIPDataAvailability() {
    if (typeof geoipdata === "undefined" || geoipdata.ip === null) {
      convert_recheck_experiment();
      return false;
    } else {
      return config.showExperiences; // Refer to the showExperiences within the config object
    }
  }

  // Execute the check
  return checkIPDataAvailability();
})();  

The JS condition needs to be configured in the following way:

With this setup, your specified content will be blocked or displayed for users within the designated IP or range configured in the JavaScript code.

Debugging Tips

To verify the functionality, type config.showExperiences in your browser's console. This will indicate whether the script correctly identified if a visitor's IP matches the designated single IP or falls within the configured range