如何充分利用 Journeys:高级用户第 1 部分

James Boone

2022-03-03

Journeys(网站向 App 引流解决方案)能够为客户提供自定义的定向浏览器条幅广告、插屏广告和弹窗广告,从而通过 web 推动 app 安装。与原生 iOS 和 Android 浏览器 app 条幅广告不同的是,Journeys 能够关联用户意图。典型的场景包括在用户访问网站达到一定次数、在购物车中添加了商品或用户来自特定网站的情况下,显示可编辑的 Journeys 条幅广告。您可以在 Branch 操作后台使用我们的筛选器创建数百种不同的配置。 

这是系列博客的第一部分(共五部分),其中介绍了如何对条幅广告进行高级自定义。在本系列博客中,我们将介绍使用 Journeys 创建高级解决方案的不同示例。

在这篇博客中,我们将介绍如何构建 Journeys 解决方案,使条幅广告只在用户在主页内容中下翻时才会显示,并且会在用户返回到网站顶部时消失。我们将介绍为什么您需要使用这样的解决方案,不过如果您想要直接跳到代码示例部分,则可以跳到文章的末尾,直接开始为您的网站添加代码。

我们先来介绍一些背景信息

为具体的使用场景选择 Journey 解决方案可能不太容易。整页插屏广告可能会过于突兀,会吓到用户,但是较小的浮动按钮可能不一定能够吸引用户的注意力。此外,Google 还在指南中指出,使用条幅式广告或插屏广告可能影响 SEO 排名,这进一步增加了选择的难度。下面的一些示例分别说明了哪些用例是干扰用户体验且不能接受,哪些不会干扰用户体验且可以接受的,取决于覆盖的内容量。

为什么 Journeys 有助于改善表现指标

对于这一点,您可以问自己三个问题,以判断是否适合使用 Journeys 的“向下滚动到不明显位置”解决方案。

  • 如何改善网页的 SEO 排名?

只在用户向下滚动到不明显位置时才显示条幅广告可以提高 SEO 排名和网站的 Google 网页推荐排名。这样,用户有时间不受打扰地阅读网页内容,还可以在适当的时机向用户展示相关的信息。 

  • 为什么我的条幅广告的点击率偏低?

造成点击率偏低的原因有很多,包括用户并非有意访问您的页面或访问的意图很低。如果您在页面加载时就显示条幅广告,可能导致条幅广告表现很差,因为这种情况下用户会直接离开。这种情况还会导致查看点击转化率下降,从而影响条幅广告的表现。 

在解读网页表现时,关键在于分别分析潜在的原因。 

  • 为什么我的网站的跳出率会偏高?

如果您知道用户是感兴趣的,但是并没有在网页上长时间停留,也就没有发生互动,会发生什么情况?首先需要了解是否在用户进入着陆页时是否存在过多的互动。研究表明,互动过多会降低用户在页面上的停留时间。 

只在用户在页面上向下滚动后才显示 Journeys 条幅广告,可以避免页面上出现杂乱的内容,从而有助于用户找到自己要找的内容。 

Journeys 用例:不明显位置

在开始前,我们要注意一个问题:下面的用例假设您正在使用 Journeys 产品且设置正确。如果还没有使用或进行设置,只需要前往我们的支持门户,开始使用或设置。设置不需要花费多长时间。

准备好体验这款解决方案了吗?马上开始!只需要按照下面的三个示例步骤操作:我们在每行代码中添加了备注,详细解释了代码的实际作用。

第 1 步

确保您已经安装了 Branch Web SDK

第 2 步

将以下 Javascript 片段添加到您的网站:

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

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

前三行可以创建一个要在这款解决方案中使用的全局变量:

var scrollDistance = 400;            // how far (in px) to scroll before showing Journey
var scrolledPastThreshold = false;   // true/false value to track if user scrolled
                                     // past scrollDistance value or not
var journeyShowing = false;          // true/false value to track if the journey is  
                                     // showing or not

下一段是两部分功能的前半部分,这一部分可以在用户的滚动距离超过配置的距离后向用户显示 Journey 条幅广告。

window.onscroll = function() {       // built in Javascript event function that fires each 
                                     // time a page is scrolled down or up by a pixel
  var distanceScrolled = document.documentElement.scrollTop;// when user is at the 
                                                                // top of page the value is zero
  if ((distanceScrolled - scrollDistance) > 1) {     // When user is at the top of the 
                             // page: 0 - 400 = -400 → if statement evaluates false
                             // page: 402 - 400 = 2  → if statement evaluates true
    scrolledPastThreshold = true;
    if (scrolledPastThreshold && !journeyShowing) {
      document.getElementById("branch-banner-iframe").style.height = "100vh";
                                     // modify the Journey’s css to show it on the site
      journeyShowing = true;         // Journey is now showing, save state
    }

片段的其他部分是两步功能的后半部分,这一部分能够在用户向上滚动的距离达到配置的距离后隐藏 Journey 条幅广告。

  } else if ((distanceScrolled - scrollDistance) < 1) {    // if the statement on line 7 
                     // isn’t true, code then checks this if statement
                     // Below fold: 500 - 400 = 100 → if statement evaluates false
                     // Above fold: 398 - 400 = -2  → if statement evaluates true
    scrolledPastThreshold = false;    // user scrolled past threshold, save state
    if (!scrolledPastThreshold && journeyShowing) {    // user scrolled above fold and
                                                       // Journey is showing
      document.getElementById("branch-banner-iframe").style.height = "0vh";
                                // modify the Journey’s css to hide it from the site
      journeyShowing = false;   // Journey is now hiding, save state
    }
  }
}

第 3 步

解决方案的最后一部分在操作后台完成。导航到您为此解决方案创建的 Journey。接着将 “Height” 改为 ‘0vh’,如第 6 行所示。这样可以防止在页面加载过程中显示 Journey。要想使解决方案正常运作,这一步必不可少。

如果您需要 Journey 设置方面的帮助,请前往我们的 Branch 设置指南

现在一切设置就绪,您可以创建一个‘不明显位置’ Journeys 条幅广告。您可以在下面查看这种广告的运作方式!

部署 Journeys 示例后,请告知我们!我们为率先在网站上部署这款解决方案的前几位客户提供了特别惊喜。联系我们并向我们展示您的解决方案!

Branch 将随时为您提供帮助。

Branch 致力于为客户提供支持,帮助客户发展壮大。尽管我们开发了不少产品,但我们深知任重而道远。我们致力于提高灵活性,释放产品的全部潜力,帮助您打造适合自己的优秀解决方案!Journeys ‘Below-the-Fold’用例堪称完美。

详细了解如何利用此处的 Journeys 吸引网站访客,并将他们转化为忠实的 app 用户。

Get the latest mobile knowledge

To help you fuel cross-channel and cross-platform mobile growth, our team works hard to deliver the most current, relevant resources.

You are subscribed! 🚀