Journeys is a product which supplies our clients with customizable and focused browser banners, interstitials, and pop-ups to drive app installs from the net. In contrast to native iOS and Android browser app banners, Journeys connects with person intent. Some typical situations embrace displaying editable Journeys banners when a person has visited an internet site a specified variety of instances, if the person has added a product to their procuring cart, or if the person has come from a selected web site. There are lots of of different doable configurations you may create utilizing our filters, which can be found inside the Department dashboard. 

That is the primary in a five-part collection that may aid you convey superior customization to those banners. All through this collection, I’ll be displaying you totally different examples of tips on how to create superior options utilizing Journeys.

On this weblog we can be speaking about constructing a Journeys answer to solely show as soon as a person has scrolled beneath the principle web page content material, and disappear when the person scrolls again as much as the highest of the location. I’ll go over why you would possibly need to use an answer like this, however if you wish to bounce straight to the code instance, you may skip to the tip of the article to get began on including it to your website.

Let’s begin with some context

It is perhaps robust to resolve which Journey options to make use of in a given case. A full web page interstitial is perhaps too direct and scare the person away, however a smaller floating button won’t be sufficient to get the person’s consideration. To make the choice much more difficult, Google has added their very own tips for what they assume is right, going so far as mentioning that utilizing some banners or interstitials might end in search engine optimization penalties. Under are some examples they present for what is taken into account intrusive (and unacceptable) and what’s not intrusive (and acceptable), based mostly on the quantity of content material lined up.

Why Journeys might help with efficiency metrics

Listed below are three questions that, if you end up asking, would possibly justify you utilizing Journeys’ scroll-below-the-fold answer.

• How can I enhance my web site web page search engine optimization rank?

Exhibiting a banner solely as soon as a person has scrolled down beneath the fold can enhance search engine optimization and Google’s web page suggestion to your website. It provides the person time to learn the content material on the web page with out interruption and in addition exhibits the person related info on the proper time. 

• Why does my banner have a low click on through-rate?

Low click-through charges will be attributable to many issues together with customers that come to your web page accidentally, or with decrease intent. If you happen to present a banner proper when the web page hundreds it’d end in what looks as if a lower-performing banner as a result of customers are bouncing instantly. This bouncing will drive the view-to-click conversion charge down and could possibly be falsely related to the banner’s efficiency. 

It’s key to isolate potential causes when making an attempt to grasp web page efficiency. 

• Why does my web site have a excessive bounce charge?

What occurs when you already know your customers have an interest, however they don’t keep on the web page lengthy sufficient to grow to be engaged? First it’s essential ask if there’s an excessive amount of occurring when the person lands on the web page. Research have proven that too many interactions will scale back the time customers spend on a web page. 

Exhibiting a Journeys banner solely after they’ve scrolled partially down the web page can scale back muddle and assist the person get to the fitting content material. 

Journeys Use Case Instance: Under the Fold

Earlier than we get began, one factor to notice: the use case beneath assumes you’re at present utilizing our Journeys product and have it arrange correctly. If not, it’s straightforward to do — simply head over to our assist portal and get began. It shouldn’t take lengthy to arrange.

So, are you prepared to offer this answer a go? Let’s get began! Simply comply with the three easy steps beneath. We’ve even added commentary on every line of code to offer an in depth clarification of what it’s really doing.

Step 1

Ensure you have put in the Department Internet SDK.

Step 2

Add the Javascript snippet beneath onto your web site:

var scrollDistance = 400;
var scrolledPastThreshold = false;
var journeyShowing = false;

window.onscroll = perform() {
  var distanceScrolled = doc.documentElement.scrollTop;
  if ((distanceScrolled - scrollDistance) > 1) {
    scrolledPastThreshold = true;
    if (scrolledPastThreshold && !journeyShowing) {
      doc.getElementById("branch-banner-iframe").model.top = "100vh";
      journeyShowing = true;
    }
  } else if ((distanceScrolled - scrollDistance) < 1) {
    scrolledPastThreshold = false;
    if (!scrolledPastThreshold && journeyShowing) {
      doc.getElementById("branch-banner-iframe").model.top = "0vh";
      journeyShowing = false;
    }
  }
}

The primary three strains create the worldwide variables that get used on this answer:

var scrollDistance = 400;            // how far (in px) to scroll earlier than displaying Journey
var scrolledPastThreshold = false;   // true/false worth to trace if person scrolled
                                     // previous scrollDistance worth or not
var journeyShowing = false;          // true/false worth to trace if the journey is  
                                     // displaying or not

The following part is the primary half of the two-part perform which shows the Journey when the person travels previous the configured distance to be scrolled.

window.onscroll = perform() {       // in-built Javascript occasion perform that fires every 
                                     // time a web page is scrolled down or up by a pixel
  var distanceScrolled = doc.documentElement.scrollTop;    // when person is on the 
                                                                // high of web page the worth is zero
  if ((distanceScrolled - scrollDistance) > 1) {     // When person is on the high of the 
                             // web page: 0 - 400 = -400 → if assertion evaluates false
                             // web page: 402 - 400 = 2  → if assertion evaluates true
    scrolledPastThreshold = true;
    if (scrolledPastThreshold && !journeyShowing) {
      doc.getElementById("branch-banner-iframe").model.top = "100vh";
                                     // modify the Journey’s css to point out it on the location
      journeyShowing = true;         // Journey is now displaying, save state
    }

The remainder of the snippet is the ultimate half of the two-part perform which hides the Journey when the person scrolls again up above the configured distance to be scrolled.

  } else if ((distanceScrolled - scrollDistance) < 1) {    // if the assertion on line 7 
                     // isn’t true, code then checks this if assertion
                     // Under fold: 500 - 400 = 100 → if assertion evaluates false
                     // Above fold: 398 - 400 = -2  → if assertion evaluates true
    scrolledPastThreshold = false;    // person scrolled previous threshold, save state
    if (!scrolledPastThreshold && journeyShowing) {    // person scrolled above fold and
                                                       // Journey is displaying
      doc.getElementById("branch-banner-iframe").model.top = "0vh";
                                // modify the Journey’s css to cover it from the location
      journeyShowing = false;   // Journey is now hiding, save state
    }
  }
}

Step 3

The final piece to this answer is finished within the dashboard. Navigate to the Journey you’ve gotten created for this answer. Then change the “Top” to ‘0vh’, proven beneath on Line 6. This may forestall the Journey from displaying at web page load. It is a required step for the answer to work.

If you happen to need assistance organising your Journey, head on over to our Utilizing Department setup information

Now you need to be all set, you’ve simply created a ‘Under the Fold’ Journeys banner — you may see the way it works beneath!

When you’ve applied our Journeys instance, please tell us! Now we have a particular shock for the primary few clients who implement this on their web site. Attain out to us and present us your answer!

Department is right here to assist you

At Department, we like to assist and assist our clients develop. Regardless of how a lot we develop our merchandise, we all know we’re solely scratching the floor of what’s doable. We deliberately added flexibility to make sure the product’s full potential is unlocked, permitting you to give you your personal superior options! Our Journeys ‘Under-the-Fold’ use case is an ideal instance.

Study extra about tips on how to seize internet guests and convert them into loyal app customers with Journeys right here.