Browser tab animation

Use case description

The Browser tab animation re-engages customers who leave your website by displaying dynamic notifications, emojis, or flashing text in their browser tab. This attention-grabbing weblayer drives customers back to complete interrupted purchases or browsing sessions, boosting conversion rates through customizable messages like "Please come back" or "(1) Finish your purchase."

Key features

• Automatic triggering: Activates when customers leave your website after a configurable timeout period.
• Dynamic content options: Display custom text, emojis, notifications, or icons in the browser tab.
• Flashing animation: Alternates between favicon and text to maximize attention-grabbing impact.
• Fully customizable: Parametric design allows complete control over messaging and timing.
• A/B testing ready: Built-in control group for testing effectiveness against baseline performance.
• Flexible duration: Configurable animation length and display persistence options.

Use case items

With this use case, you’ll get an:

• Functional weblayer for browser tab: Ready-to-deploy animation component with customizable parameters.

• Evaluation dashboard: A comprehensive dashboard provides insights into user behavior, campaign performance, and overall engagement metrics. The dashboard allows you to evaluate the effectiveness of your marketing strategies and make data-driven decisions.

How to deploy the use case

After downloading the use case, follow these steps.

Meet the requirements

Check if the data in your project meets the requirements. The Use Case Center lists requirements for each use case during the deployment process.

Understand the use case logic

The Browser tab animation operates on the following logic:

• Trigger timing: The animation displays 5 seconds after customers leave your site (configurable via timeout field).
• Animation duration: Runs for 7 seconds with alternating favicon and text display.
• Display persistence: Continues until customer interaction occurs.
• Content rotation: Alternates between custom text and visual elements to maximize impact.

Adjust the use case

Follow these steps to set up the use case according to your needs:

1. Configure timeout settings

• Set your preferred delay before animation triggers (default: 5 seconds).
• When you modify the Timeout in seconds parameter, update the corresponding value in the Control Group to maintain fair A/B testing. Open the Control Group and ensure line 2 reflects your timeout value converted to milliseconds.

2. Customize messaging

• Define your browser tab text, emojis, or notification content.
• For example, use messages like "Please, come back" or "(1) Finish your purchase."

3. Set animation duration

Adjust how long the flashing animation runs (default: 7 seconds).

4. Choose traffic distribution

This use case's A/B test traffic distribution is set to variant A at 80 % and the control group at 20 %. This means 80% of customers will see the banner (variant A), while 20% (the control group) will not. We recommend keeping this distribution as it brings quick and statistically significant results.

Learn more about the dos and don'ts of modifying A/B test.

6. Deploy and monitor

• Test a use case before deploying it. Testing ensures you don't send unfinished or imperfect campaigns to your customer base.
• After testing, run the use case. Open the banner and click Start to launch the campaign.
• Remember to run the use case for a few days to see the impact.
• After this initial period, use the prebuilt evaluation dashboard to measure and analyze relevant data.
  1. Open the evaluation dashboard.
  2. Enter the banner's name. For example, Browser tab animation.
  3. Set the attribution window for revenue in hours, for example, 24.
  4. Click Refresh to see the results.
• Check campaign results regularly to optimize performance.

Other resources

Learn how to enhance and optimize the banner performance with different tips and tricks from Bloomreach experts.