How-To: Set Up COVID-19 Messaging via Adobe Experience Platform Launch on a Website

With all of the uncertainty during this pandemic, one of the easiest ways to consistently communicate with customers is through highly-visible messaging on a website. Keeping your customers in-the-know on your COVID-19 response can:

1. Show customers you care and are actively monitoring the situation.
2. Inform customers of shipping delays, staffing issues, etc, decreasing customer-initiated requests to customer service.
3. Increase brand confidence and loyalty through promotion of your brand’s contributions to the pandemic or related charities.

One of the most common ways to display important messaging on a website is through a site-wide banner across the top of the page. Nielsen Norman Group identified that users read websites pre-dominantly in an “F-shaped” pattern: starting at the top, moving left to right. Many e-commerce websites use these types of messages to communicate sales and promotions, while informational and media websites typically leverage this area for links to their social accounts or contact information.

So, how does one add one of these banners and how difficult is it? Let’s dig in!

Some notes before we get started:

- This tutorial is leveraging Adobe Experience Platform Launch (aka Adobe Launch) as a tag management/data unification tool, however the logic and code could be replicated in a similar environment such as Tealium or Google Tag Manager.

- Readers should have some basic HTML/CSS knowledge. We will touch on JavaScript a bit at a VERY elementary level, but you can copy/paste my code.

- Bonus: Have a set up Google Analytics extension in Adobe Launch. We will set up event tracking around our banner to track user engagement.

Part 1: Create your COVID-19 Banner and Position it.

Some background: “Rules” in Adobe Launch perform a specific action(s) on a specific event trigger(s) within a given condition(s).

For example, a rule could send details (action) about a form on form submission (event), but only if the form is on the contact page (conditions). We are going to set up one new rule for our banner content.

Step 1: Create a new rule in Adobe Launch.

First, open the “Rules” section in your Adobe Launch Property and click “Add Rule” to add a new rule.

Next, descriptively name your new rule. I chose to name mine “COVID-19 Banner - Set Content”.

Once the rule is named, we are going to set up the event trigger(s), applicable condition(s), and the resulting actions we want to run.

Step 2: Set up the rule’s event trigger

Add an event to the rule by clicking the “+” (plus) icon under the “Events”:

The banner is supposed to be loaded with the content of the page, so we’re going to use the Adobe Launch – Core Extension’s Library Loaded (Page Top) event. This event is included by default (Adobe Launch Core Extension is built into Adobe Launch) and triggers before the page content is displayed in the browser.

We want to minimize the risk of showing the page without the banner, so this is the perfect event for us. Note: If you have other rules using the same event trigger and want them to run before this rule, simply adjust the “order” number. Lower numbers run first.

Click Keep Changes to save your event configuration.

Step 3: Set up conditions

A common practice in many organizations is to eliminate the risk of a user navigating away from a conversion funnel by hiding links to pages outside of the funnel. Sometimes a company will opt to exclude the main menu entirely. These are conditions for hiding/displaying content.

Similarly, we will set up two conditions:

1. Show the banner only to new visitors

2. On all pages except the checkout page. (/checkout/)

Let’s start with the New Visitor-only segment. Add a new condition:

Next, we’ll leverage the Adobe Launch – Core Extension again. Select “New/Returning Visitor” as the Condition Type, then select “New Visitor”. Finally, descriptively name your condition and select Keep Changes to save your condition.

Add another condition: Click on the + icon under the Conditions section. The banner is supposed to display on every page except the checkout page (page URL contains “/checkout/”), so we’re going to change the Logic Type to “Exception” instead of “Regular”.

Our new condition will leverage the Core Extension again, but we are going to use “Value Comparison” as the Condition Type. Remember, the condition we are setting up is to show the banner on any page except pages that contain “/checkout/”. We already have the exception part handled, so how do we get the page URL?

This next portion involves a bit of extra work: I have the current page’s URL set to be saved to a “Data Element” in Adobe Launch for easy repetitive use within the Launch platform. I view this as a key/value data store. To set up a Page URL data element that captures the current page URL, visit this tutorial.

Back to the value comparison: the first field is the “key” from the key|value association. Select your Page URL data element for this.

Next, choose the comparison operator: contains. Again, the logic is to exclude pages that contain “/checkout/” in the page URL from showing our banner, and the “Exception” logic type handles the exclusion.

Finally, choose the value to compare the Page URL data element to. In this scenario, it’s “/checkout”. Select Keep Changes to save your condition. There should now be one event and two conditions for your rule.

Step 4: Create the banner HTML

This is where basic HTML and CSS knowledge come in handy. Click the + icon under the Actions section.

This action is going to leverage the Core Extension again, and the Action Type is “Custom Code”. Using custom code in the action will insert custom HTML, CSS or JavaScript into the page. Select HTML as the Language and open the editor by clicking Open Editor.

Next, you can use your own HTML and CSS, or use mine as a template (provided below). This is the visible content of your banner. At minimum, highlighted code should be changed to reflect your own website/link and brand color scheme.

Save your code, descriptively name the action and Keep Changes to save your action.

Step 5: Position the banner

This is where the light JavaScript comes into play. Mimic step 4, but instead of using HTML as the Language, choose JavaScript and open the editor.

Next, use the code snippet below. In a nutshell, this short script injects the HTML we created in Step 4 as the first element on the page.

Save your code, descriptively name your action, and Keep Changes to save your action. Finally, Save to Library to save your new rule.

That’s it! Here is what your completed rule should look like:

Now, how can you measure if users are interacting with your banner? Simple. Let’s fire a Google Analytics event call from Adobe Launch when users click the banner:

Part 2 - BONUS: Send an event to Google Analytics on COVID-19 Banner Click

Note: This section assumes you have the Google Analytics extension set up and connected to a Google Analytics property.

Step 1: Create a new rule

Similar to creating our banner, we are going to set up an event and an action (Send data to GA on COVID-19 banner click). You will not need a condition for this rule.

Create a new rule and descriptively name it—I chose “COVID-19 Banner – Send Analytics Event”.

Step 2: Set up an Event Trigger

Set up a new event trigger using the Core Extension and Event Type of “Click”. In the “Elements matching CSS Selector:” text box, input the “class” from the <a> tag in the banner HTML. In the code above, it is “covid-19-banner-link”. Since this is a class, we need to preface it with a period: .covid-19-banner-link.

Finally, descriptively name your event trigger and Keep Changes to save your event trigger.

Step 3: Set up the Action

Add a new action to your rule and leverage the Google Universal Analytics extension.

Next, select Send Event as the Action Type. Input the data you want to pass to Google Analytics, including metrics and dimension on top of the standard click event data (Category, Action, label, Value).

Note: notice how you can set fields to a data element. If each form on your site has a specific identifier, you could capture it in a data element (view this tutorial) and bring that value into your field here to create a more dynamic approach.

Finally, descriptively name your action and Keep Changes to save it. Save to Library to save your rule.

That’s it! Now, when a user clicks the site-wide banner, an event is sent to Google Analytics with the specified data in your rule! Here is what the completed click event rule should look like:

Not a Google Analytics user? Adobe Analytics customers can follow almost the same rule setup process with the Adobe Analytics extension instead.

Wrapping It Up

Adobe Launch is free for all Adobe Experience Cloud customers and is a great tool to easily set up targeted actions and display content at a very granular level. For a limited time, Adobe is offering Adobe Launch for free to Non-Adobe Experience Cloud members. If you’re paying for tag management services and are not seeing the value or ROI, look into switching to Adobe Experience Platform Launch—we highly recommend it!

Need more guidance with Adobe Experience Platform Launch? Curious about the Adobe Experience Cloud stack and how it could benefit your company? Blend360’s Adobe Solutions Team is here to help! Get in touch with us and we can figure it out together