Create Journeys Banners or Interstitials

Prerequisites

• Integrate the Branch SDK into your app and configure deep link routing for deferred deep linking and attribution before implementing Journeys.
• Journeys uses your alternate domain for Universal Links. Make sure you include your xxxx-alternate.app.link domain in your Associated Domains. If you use a custom domain or subdomain for your Branch links, you should instead add entries for applinks:[mycustomdomainorsubdomain] and XXXX-alternate.app.link.
• Add the Branch Web SDK to your site. Additionally, include your alternate domain for Universal Links.

📘

GDPR Considerations

In order to help our customers comply with GDPR, and other laws that restrict data collection from certain users, we’ve updated our Web SDK with a Do Not Track mode.

This way, if a user indicates that they want to remain private on your website, or if you otherwise determine that a particular user should not be tracked, you can continue to make use of the Branch Web SDK (e.g. for creating Branch links) while not tracking that user.

This setting can also be enabled across all users for a particular link, or across your Branch links. Click here for information on how this mode impacts Journeys.

Create Banner or Interstitial

When you click to create a new Journey, there are 3 phases you will go through:

• Select Audience
• Configure Views
• Validate & Test

1. Select Audience

Customize the audience that will see your Journey by completing the following fields:

1. Name Your Journey: This name is how your Journey will appear in the dashboard view (it will never display to your users). Try to stick to a naming convention so that you can easily find Journeys later. For example: Date - Template - OS - Target.

2. What campaign is it part of?: Campaign will automatically populate to match the Name of the Journey.

3. What channel is it part of?: Channel is not commonly used, but will help you analyze your Journey’s later.

4. Select the audience you want to target: Customize the audience that will see your Journey by choosing target platforms and device types. Keep in mind, these conditions are exclusive, meaning all conditions must be true for the Journey to show. Note: Only Branch Standard Banner Bottom is supported on AMP because Google requires that banners cannot show in the top 75% of an AMP page.

5. This Journey will show if user: Using the following options add additional user targeting filters.

   Has completed event

   If you have a custom event tracking set up, you can target users based on events that you define. For instance, you might want to show a Journey to users who have completed a purchase within the last week. These events are events tracked through the Branch SDK

   Came directly from a url

   You can target a user based on the last touchpoint before they entered your website. For example, if you want to target users that found you through Google Search, you can select “whose domain matches” and fill in “google.com”.

   Is located

   Use this filter to target (or exclude) users viewing your website in different regions. You can target by country, state/province, or even by city.

   Is viewing a page URL

   You can define which subsets of your website the Journey will appear in. For example, maybe you have a page `yoursite.com/settings` and `yoursite.com/products/1234`. You could fill in products here so only users visiting a URL with that substring present would see the Journey.

   Has visited web

   Here, you can use website visits to determine who to target. For instance, you might decide that someone who visits your site five times is ready to see a Journey with an incentive to open the app.

   Has visited app

   Similar to visited web, you can target users by number of app visits. If someone has visited the app twice and opens up the mobile web, they could be lured back into the app with a Journey.

   Note that this audience filter relies on has_app, which has [limitations as defined here](https://help.branch.io/faq/docs/what-are-the-limitations-to-has_app).

   Has the app installed

   You can target users based on whether or not they have the app installed. You might choose to only show a Journey that asks users to open the app to those that already have it installed.

   Note that this audience filter relies on has_app, which has [limitations as defined here](https://help.branch.io/faq/docs/what-are-the-limitations-to-has_app).

   Has clicked on ad

   A user is grouped into "Has clicked on Ad" when they've clicked a link from Deep Linked Feeds. You’ll need to consider the way the link is created through Deep Linked Feeds. You can use this to target users who have been part of an ad campaign to improve your ROI, maybe with a specific call to action to open the app.

   Has clicked on email

   A user is grouped into "Has clicked on Email" when they've clicked a link from Universal Email. You’ll need to consider the way the link is created through a Universal Email integration. You can use this to target users who have been part of an email campaign. One example could be a specific call to action to get them to download the app if they have landed on mobile web and don’t already have it.

   Is viewing a page with metadata key

   This filter is for targeting users viewing web pages with certain metadata specified. This data can be specified in HTML tags on a webpage, passed in as options in the init() call, or passed in using the track() call. If you opt to use HTML tags, your tags should be formatted as [Branch hosted deep link data](https://help.branch.io/developers-hub/docs/web-advanced-features#host-deep-link-data).

   <p>For example, you could target users on pages containing the metadata key “foo” and value “bar” by adding this tag to the page’s HTML...</p>
   
     <p>  `<meta name="branch:deeplink:foo" content="bar" />` </p>
   
      <p>...or by initializing Branch’s web SDK with the following options object:</p>
   

   ```javascript branch.init( 'BRANCH_KEY', { metadata : { 'foo' : 'bar' } } ); ```

     <p>Finally, you could accomplish this by using the track() call to programmatically trigger a Journey to show:  </p>
   

   ```javascript branch.track(‘pageview’, { ‘foo’ : ‘bar’ } ); ```

    <p>Once metadata has been specified on a page in any or all of the three locations specified above, you can target users on that page using the “Is viewing a page with metadata key” audience filter. If metadata with the same key has been specified in either init() or track() and in an HTML meta tag, the metadata passed into either init() or track() will take precedence.
   

   Has interacted with Journey

   You can use this filter to target users who have interacted with a specific Journey before by choosing the Journey, the type of interaction, and the window in which it occurred. For example, you could use this filter to display a Journey (Journey A) only to users who had dismissed a different Journey (Journey B) in the past 7 days.

📘

Tips on Filtering

• Using multiple filters creates an “and” condition. Meaning, this Journey will only show if all of the conditions are true.
• You may add additional options for each filter
  • ex. Adding different URLs for the exactly matching clause.
• The URL entered must match the page URL exactly. We recommend that you copy the desired URL directly from your browser’s URL input box. Multiple entries within a filter (for example, entering 2 URLs) creates an “or” condition. In other words, the journey will show if a user is visiting either URL A or B.
• Avoid adding too many targets, as this will limit the number of individuals who see your journey, restricting opportunities for downstream conversion and engagement.
• If your web page ends with a "?", the question mark character will be treated as an optional expression quantifier for the "viewing a page URL starting with" filter. For example, when you set "yoursite.com/?" for this filter, the Journey will appear on "yoursite.com/?", "yoursite.com/settings" or "yoursite.com/".
• For certain filters (ex. is viewing page url exactly matching...), you can paste multiple values by clicking the Edit All button. This will effectively make that filter meet OR condition.

6. Click Save and Continue when you're ready to move on to the next phase.

2. Configure Views

In this phase, you will design the view your audience will see, or add multiple view variations to A/B test the experience across your audience. To do this:

1. Add Variation: This feature allows you to run A/B test by designing multiple templates and assigning a percentage of your audience to each one to compare Journey performance. This will allow for rapid iteration as you track performance data. Click the + to add a new Journey banner/interstitial, and use the percentage fields to control the ratio of your audience that will see each variation.

📘

Variation Display Limitations

• Your total percentage allocation must not equal more than 100%. Your total percentage allocation may be less than 100%. In this situation, the remainder of your audience will be shown your standard website without a Journey. This allows you to A/B test against your non-Journeys website experience.

2. Click Select a Template to design your banner.

3. You will be taken to the banners page to select a template. Click the Create button on the template you want to work with. You will see the following options:

   1. Top/Bottom Banners
   2. Interstitials
   3. Buttons - Note: When A/B testing, we recommend you start with the Floating Button template as a baseline to benchmark your performance metrics.

4. After selecting your template, you can customize the elements of the design on the View Editor tab.
   i. View Name: This should reflect the banner type and any additional information to help track performance when testing. Note: Try to stick to a naming convention so that you can easily find Journeys later. For example, Date - Design - OD - Target

   ii. Hover over the banner shown and click to select the element you would like to customize. Some of the customization options are as follows:

   • App Icon
   • App Title
   • App Description
   • Star Rating
   • Open in App
   • Text
   • Background Image

📘

Journey Redirect Options

If you are running a generic download campaign or a site-wide discount offer, your users would go to the same place inside your app regardless of where they originated on your website.

You can configure this destination by setting Deep Link Data for the Button element when you customize your template options.

Learn about our Journeys Website Redirects Options.

5. Use the CSS Editor to customize the elements further

6. Click to Page Placement for further customizations.

7. Click to Dismissal Settings tab. In some cases, rather than simply ignoring your Journeys, your users may want to dismiss them (by clicking either the “X” or the dismissal text on the Journey). In order to make sure that your users are having the best possible experience while also converting at the highest rate, you can adjust your Journeys’ dismissal settings while you’re setting up your templates.

   i. Dismissal Behavior: Choose what happens when a user dismisses a Journey. “Close Journey” will simply cause the Journey to close upon being dismissed; “Redirect to a web page” will cause the Journey to close and redirect to the webpage of your choice.

   ii. Dismissal Period: First, use the dropdown to choose how long the Journey should be dismissed for. Next, decide whether dismissing this Journey should cause only this Journey or all Journeys to be dismissed for the chosen period.

8. Click Save & Close when you’re done customizing your Journey template.

9. After you’re done creating your Journey template, you will be brought to the Configure Views step. You will see the name of the Journey template you created. You can create another Journey here, or click Save and Continue to move on to the last phase.

3. Validate & Test

1. Under Validation, you should see a green checkmark that validates if everything is set up properly for the Journey to work. If you see any errors, go back to that step to complete the configuration. You can access a list of the errors and what they mean under Troubleshooting.
2. You can preview the variations of your Journey by using the dropdown menu.
3. If everything is validated and working, you can test the Journey in a live environment by:
   a. Input the URL to your website.
   b. We will generate a link for you. Take that link and open it where you plan to run that Journey.

👍

How Does Testing Work?

The Branch SDK integrated into your website listens for a unique, one-time URL parameter that is generated by the preview tool. It looks something like _branch_view_id=296449069883323397. When this parameter is detected, the SDK loads a temporary preview of that specific Journey. This parameter is only valid for your Branch Key, and will not work on any other website even if the Branch SDK is integrated. Targeting is not taken into consideration when testing.

4. When you’re ready to start running your Journey, click the Schedule button. A Schedule box will appear, where you can select the following and you can enter in the following details and click Save when you're done:

   • Start/Stop Time and Date
   • Repeat Settings (Daily/Weekly)
   • Time Zone

   Example Use Cases for Scheduling:

   • Friday Weekly Sales - Promote app downloads with a weekly (repeat) promotion/sale
   • August App Promo - For the month of August, promote a full-page interstitial that auto-stops at the end of the month

5. If you’re ready to start running your Journey now, click Start Journey. Otherwise, click Save & Close to come back and start it later.

📘

Example on Scheduling a Journey

Imagine you want to show your users a Journey during the month of November that advertises a 25% sale if they download your app. You can set it to start at 12 AM on November 1st, and end at 12 AM on December 1st.

You’re all set up with a new Journey! From here, you can add advanced configurations to meet your needs, review some example Journeys to get ideas, track performance, and manage your existing Journeys. If you have any questions, check out our FAQ guide!