Build a Banner for Mobile Devices

To deliver the best customer experience for your site visitors, you may want to limit certain Monetate experiences to certain device types. This use case involves building an action to display a particular banner and adding it to experience so that the banner appears only when a visitor arrives on your site using a mobile device.

Inspect the Site with Device Emulator

To begin, browse to a page on your site and then launch Chrome's Developer tools. Use the keyboard shortcut Command+Option+I on a Mac or Ctrl+Shift+I on PC. Once Developer tools opens, click the Toggle device toolbar icon in the top navigation bar of Developer tools.

Chrome's Device Emulator is not 100% accurate. You can use it for reference, but Monetate recommends that you test experiences on specific devices.

Callout of the 'Toggle device' icon in the Developer tools toolbar

Click Dimensions at the top of the window, and then select iPhone 6/7/8.

Callout of the 'iPhone 6/7/8' option in the Dimensions menu in the top navigation bar of Chrome developer tools' Device Emulator

After you set up the mobile view, find a media screen on this page. In this use case, the left-hand navigation menu at the top of the page only appears on mobile devices, so this element can be used to locate the media screen. Switch to the element selector by using the keyboard shortcut Command+Shift+C on a Mac or Ctrl+Shift+C on a PC, and then click the menu icon.

Callout of the menu icon

Next, look at the CSS properties on the right side of the Developer tools window. Included in the CSS is the @media only screen and (max-width: 749px) property.

This property indicates that the cut-off point for mobile devices is 749 pixels. Anything greater than 749 pixels is considered a tablet or desktop device. Select and copy the @media only screen and (max-width: 749px) property to use in Action Builder.

Creating the Banner Action

Click COMPONENTS and then select Actions.

Callout of the Actions option in the COMPONENTS menu


Callout of the CREATE ACTION button

Click the Insert Content tab and then click Image.

Callout of the Insert Content tab and the Image link

Next, generate a placeholder image for the banner that is 750 pixels, which is 1 pixel larger than the width for mobile devices.

This use case employs placeholder images for the purpose of this demonstration. In a live experience on your site, you should use the appropriate creatives.

The 'Generate placeholder' modal, with fields to input height and width measured in pixels

Next, return to the navigation bar on the mobile site to find a selector that's persistent on both the mobile and desktop views. In this use case, the selector needed is header.

Callout of the header selector in the HTML code for an online retail site's mobile version

Return to Action Builder, select a placeholder element near the header, and then click the forward arrow.

View of Action Builder launched atop a client's site, with the site header selected by the Element Selector tool

On the Details tab, revise the selector as necessary (for this use case, the initial selector is revised to #shopify-section-header > header). Select Last Child from Insert Method.

View of the Details tab in Action Builder, with a callout of the Relative Element Selector field and the Insert Method selector

For this use case, the CSS input into Banner Div Inline Style centers the banner image.

width: 100%;
display: block;
padding: 0;
margin: 0;
position: relative;

View of the Details tab in Action Builder, with the required CSS added to the Banner Div Inline Style field

For this use case, the following CSS must be input into Image Element Inline Style:

display: block;
width: 100%;
max-width: 750px;
margin: 0 auto;

View of the Details tab in Action Builder, with the required CSS added to the Image Element Inline Style field

The result of these two CSS entries is that the banner image is centered below the navigation bar.

Callout of the placeholder image on the client's site

After setting the inline styles directly on the element, grab the unique ID for the image wrapper. Inspect the banner image and then copy the ID. In our instance, this ID is id="monetate_selectorBanner_2128e637_00".

Close the Chrome tool and then click the Styles tab in Action Builder. Paste the ID and the media screen copied earlier into the CSS editor and then write some CSS using them:

#monetate_selectorBanner_2128e637_00 {display: none !important;}

@media only screen and (max-width: 749px){
  #monetate_selectorBanner_2128e637_00 {display: block !important;}

View of the Styles tab in Action Builder, with the required CSS added to the CSS editor

Now that the CSS is updated, test it by minimizing Action Builder using the minimize icon in the top right of the screen.

Relaunch the Chrome Developer tools and return to mobile view to verify that the banner now appears.

Callout of the banner placeholder in the mobile view

Having verified that the action is working as expected, return to Action Builder, click the forward arrow, and then give the action a title, description, and subcategory. Finally, click CREATE & EXIT.

View of the last panel of Action Builder with the Action Title, Description, and Subcategory fields and the CREATE AND EXIT button

Creating the Experience

To get started, click EXPERIENCES in the top navigation bar, and then select Web.

Callout of the Web option in the EXPERIENCES menu of the top navigation bar


Callout of the CREATE EXPERIENCE button

Click WHY, select To serve everyone the same experience, and then click NEXT.

Callout of the WHY settings, the 100% EXPERIENCE option, and the NEXT button

Select a goal metric, adjust the secondary metrics as necessary, and then confirm that you've configured the WHY settings as you need.

Callout of the SAVE button

Use the WHO settings to ensure that the experience only fires for site visitors on mobile Devices. Click WHO and then click ADD TARGET.

Callout of the WHO settings and the ADD TARGET button

Click Technographics.

Callout of the Technographics option on the Target Type panel

Click Device type.

Callout of the Device type option on the Technographics panel

Select Mobile Phone and then click SAVE.

Callout of the Mobile Phone option and the SAVE button

Add the banner action to the experience. Click WHAT and then click ADD ACTION.

Callout of the WHAT settings and the ADD ACTION button

Click Images.

Callout of the Images option on the Action Type panel

Click the action that you created for this experience for mobile devices.

Callout of the Mobile Only Banner action option on the Images panel

Because the custom CSS was added to the action in Action Builder, no experience-level changes are required. Click CREATE.

Callout of the CREATE button

Testing the Experience

Before scheduling when the experience runs by configuring the WHEN settings, you should perform a quality assurance check to ensure the action works as expected. Click PREVIEW.

Callout of the PREVIEW button on the Experience Editor page

Once the site loads, the banner shouldn't appear at the top of the page because you're previewing the experience on a desktop.

The desktop view of the mobile-only banner experience. The banner correctly does not appear.

Once again launch Chrome's Developer tools, and then click the Toggle device toolbar icon to view the site using Device Emulator. At that time the banner should appear.

The mobile view of the mobile-only banner experience, with the banner placeholder called out

After you confirm that the action and experience work as expected, return to the Experience Editor page in the Monetate platform to activate the experience.