Crafting a Seamless Experience: The Impact of Redirect Popups on Search Traffic

In today's highly competitive digital landscape, one key concern is the capture and retention of search traffic. One relatively new technique that has come up recently is the redirect popup for controlling the flow of traffic on websites, particularly when content is limited to only certain referrers such as Google search. We will discuss the purpose and advantages associated with redirect popups, alongside some potential drawbacks, and take you step-by-step through a customized implementation of a redirect popup that supports user experience while helping to reach specific SEO goals.

Why Use Google Search Redirect Popups?

Redirect popups, sometimes a very powerful feature in guiding the navigation user to your site. Applying them will enable you:

1. Direct Traffic from Specific Sources: this way, they only allow visitors from one particular referrer, let's say Google search. A great tool for when not to allow direct visits towards specific content.

2. Enhancing User Experience: A good design of redirect pop up will lead users exactly of where they have to be navigated to.

3. Engage the Audience Further: Redirecting a person who has arrived on the wrong page could bring more users to prioritize actions and content.

4. Boost Search Traffic: This leads to organic search traffic along with reducing direct traffic accident, which will ultimately contribute to better search rankings for the website.

Disadvantages of using redirect google search popups?

While the redirect pop-ups may be helpful, it has its disadvantages.

1. Frustration with users: Probably one of the primary reasons you may worry is frustration; users might think that it creates a hindrance to what they wish to view or to the content they were about to see.

2. Impact on SEO: Too many and heavy redirects as well as popup blockers will significantly impact your SEO.

3. Performance: This mostly occurs when the popups become too heavy or poorly optimized and it tends to slow down the user's experience on the page.

Careful planning and thoughtful design can alleviate the downsides, so redirect popups support your site's goals rather than undermining them.

Step-by-Step Guide: Adding a Google Search Redirect Popup in Blogger

Let's attempt to create the redirect popup in Blogger. With this code, it is only triggered on specific pages, like post pages, whereby people who directly navigate to the pages without clicking from Google will be redirected to a given page.

Demo

Stape 1> go to your blogger dashboard

Stape 2> copy tha below css code And paste tha css code in your blogger theme before closing </b:skin> tag, and click on save button.

#customMessage{
  display: none ;
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom: 0;
  z-index: 1000;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: #FFFFFF00;
  backdrop-filter: blur(1px);
}

#redirectButton{
  padding: 10px 20px; 
  background-color: #244FFF;
  color: #fff;
  border: none; 
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

#rediPopuo{
  background: white;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  padding: 30px;
border-radius: 25px;
max-width: 800px;
}

#Mobile_png_redi{
  display: none
}

#Dextop_png_redi {
  display: flex
}

@media screen and (max-width: 400px) {
  #rediPopuo {
  background: white;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  padding: 30px;
  border-radius: 25px;
  max-width: 200px;
}

#Mobile_png_redi{
  display: flex;
  height: 100%;
  width:100%;
}

#Dextop_png_redi{
  display: none
}
}

Stape 2> choice your one index post, but If the post you want to put this code on is not indexed in Google search, this code will work. Click on any post>go to edit html section and past tha html and javascript code in end your post code

<div id="customMessage">
<div id="rediPopuo">
  <img id="Dextop_png_redi" src="/Dextop_png.png" alt="">
  <img id="Mobile_png_redi" src="/Mobile.png" alt="">
    <p>You are directly visiting this page, but you cannot directly access this page. To come from Google search, please click the button below.</p>
  <button id="redirectButton">To come from Google search</button>
</div>
</div>

<script>
  // Function to identify if the URL came from Google
  function checkReferrerAndShowMessage() {
    const referrer = document.referrer;
    const googleLink = "https://www.google.com/search?q=Create+a+Stylish+Top+Header+Scroll+Progress+Bar+for+Your+Blog%3A+A+Step-by-Step+Guide&oq=Create+a+Stylish+Top+Header+Scroll+Progress+Bar+for+Your+Blog%3A+A+Step-by-Step+Guide&gs_lcrp=EgZjaHJvbWUqBggAEEUYOzIGCAAQRRg7MgYIARBFGDsyBggCEEUYPNIBCDMxNTVqMGo5qAIOsAIB&client=ms-android-vivo&sourceid=chrome-mobile&ie=UTF-8"; // Add your Google search link here

    // If the referrer is not Google, display the custom message
    if (!referrer.includes("google.com")) {
      document.getElementById("customMessage").style.display = "flex";
    }

    // Redirect on button click
    document.getElementById("redirectButton").onclick = function() {
      window.location.href = googleLink;
    };
  }

  // Call the function on page load
  window.onload = checkReferrerAndShowMessage;
</script>

Code Breakdown: Implementing the Redirect Popup in Blogger

This is an enhanced version of the redirect popup code, which will work only on specific pages, such as blog posts. The popup is set so that users know they are required to access the page through Google search and have any session cleared when accessed through the homepage.

How It's Works From This Javascript Code:

1. Initializing a Function

(checkReferrerAndShowMessage):

The JavaScript function (checkReferrerAndShowMessage): is defined to determine if a user has accessed the page from a Google search link.
Within the function, const referrer = document.referrer; stores the URL of the previous page that led the user to the current page into a constant named referrer.
This declare googleLink as a variable in which is assigned with well-known Google search url and link used in this condition during redirection to users for sure if they are not originated by Google.

2. Checking the Referrer:

The code checks if the referrer URL does not include "google.com" .
If the referrer is not from Google (meaning the user didn't come from a Google search), then document.getElementById("customMessage").style.display = "flex"; is executed.

This line changes the display style of an HTML element with the ID customMessage to flex, making the message visible to the user. This message might prompt the user to click a button to continue.

3. Redirect on Button Click:

The code then selects an HTML element with the ID redirectButton .

It adds a click event listener to this button, which will redirect the user to the Google search link defined in googleLink when clicked. This allows users who did not come from Google to reach the intended Google search page.

4. Autoredirect after the program runs when the page has been loaded

window.onload = checkReferrerAndShowMessage; automatically executes the checkReferrerAndShowMessage function after the page has loaded. This way, it checks the referrer at the precise time when the page has loaded and then shows the message if the user didn't come from Google.

Summary

This script verifies if a visitor accessed the page from a Google search.
If they did not, it shows a custom message ( customMessage ) asking the visitor to use the Google link.
When they click the button, they are redirected to the specified Google search link, ensuring the page visit originates from a Google search.

How To Customize Google Search Redirect popup Box

To customize this code, I’ll guide you through some improvements and changes using only JavaScript and CSS.

1. Increase or Decrease Blur Effect

The blur effect on the background is controlled by backdrop-filter in the CSS. You can increase or decrease it to make the background more or less blurry when the popup is visible.

Example:

#customMessage {
  backdrop-filter: blur(3px); /* Increase blur effect */
}

2. Customize the Redirect Button's Style in JavaScript

Add JavaScript to dynamically change the button’s color, text, or any other CSS style.

Example:

document.getElementById("redirectButton").style.backgroundColor = "#FF5733"; // Change to orange color
document.getElementById("redirectButton").style.padding = "15px 25px"; // Increase padding

Update the JavaScript to add this effect when showing the popup:

if (!referrer.includes("google.com")) {
  const messageBox = document.getElementById("customMessage");
  messageBox.classList.add("show"); // Add the show class to trigger fade-in
  messageBox.style.display = "flex";
}

3. Updating Image Links

In your code, there are two image tags:

<img id="Dextop_png_redi" src="/Dextop_png.png" alt="">
<img id="Mobile_png_redi" src="/Mobile.png" alt="">

You need to update the src attribute with the correct image link. Here’s how you can do it:

Local Images: If the images are hosted on your server or Blogger assets, use the relative path or the full URL. Example:

<img id="Dextop_png_redi" src="https://your-domain.com/path/to/Dextop_png.png" alt="Desktop Image">
<img id="Mobile_png_redi" src="https://your-domain.com/path/to/Mobile.png" alt="Mobile Image">

External URLs: If the images are hosted on another website, you can directly use that URL in src .

Note: You can also add descriptions in the alt attribute for SEO and accessibility.

4. Changing the Text

The <p> tag contains the message shown when a user accesses this page without coming from Google. You can easily customize it:

<p>You are directly visiting this page, but you cannot directly access this page. To come from Google search, please click the button below.</p>

You can change this message as needed. For example, to make it more concise:

<p>You are directly visiting this page. To access it, please visit through Google search by clicking the button below.</p>

5. Changing Button Text and Link

Changing Button Text: The button currently says To come from Google search . You can update it as needed. For example:

<button id="redirectButton" onclick="redirectToGoogle()">Visit via Google</button>

Changing Button Link: In the redirectToGoogle() function, window.location.href = "https://www.google.com"; is set to take users to Google.com when they click the button. If you want to redirect them to your website’s homepage, update this URL as follows:

Benefits of This Implementation

Applying this code would only allow you to gain access on the blogger post page only for visitors coming from Google search results, and this could help you regulate the traffic flow. It works this way:

1. Traffic Control : Only true organic search traffic gets into your blog posts, avoiding any visit that may seem pointless.

2. SEO Boost : The process of filtering organic traffic could benefit you by gaining an increased time in the search relevance of your page.

3. Better UX: The code will ensure users will get the experience in case they arrive from Google and will not be forwarded unnecesarily within their session.

Practical Tips for Using Redirect Popups Effectively

1. Simple Popup: Make your message as simple and relevant as possible. The user should come to know immediately why and to where they are redirected.

2. Minimal use of Redirects: Use these things very judiciously so that the overusage makes users irritated and thereby is not good for your website in terms of SEO perspective

3. Test on Different Platforms: The popup should work perfect for both desktop and the version of mobile.

Final Thoughts

This can be an extremely helpful tool in helping guide search traffic on your Blogger site. But, however, you need to use them wisely. This altered code filters the traffic by referrer and provides for a seamless experience to your readers and will increase the performance of search for your content.

If you are optimizing your site for search traffic, then implement this type of popup selectively across the key posts and pages on your site. The balance between usability and search optimization will ultimately be a win-win for you and your visitors.

Blog with Raj