Build a Banner for Mobile Devices

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

Inspecting the Site in Device Mode

Follow these steps to use the Google Chrome browser and its Developer tools (DevTools) to gather key information about your site that you'll need for the action you build.

  1. Load a page of your site in the Chrome browser, launch Chrome DevTools, and then click Toggle Device Toolbar in the top navigation bar.

    Chrome DevTools' Device Mode is not 100% accurate, but you can nevertheless use it for reference. Monetate recommends that you test experiences on specific devices. Refer to Google's Simulate mobile devices with Device Mode documentation for more information about the tool's limitations.

    Callout of the 'Toggle Device Toolbar' icon in Chrome DevTools toolbar

  2. Click Dimensions at the top of the window, and then select a mobile device option.

    Callout of the Dimensions selector and a view of its device options in Chrome DevTools' Device Mode

  3. Find an element on the page that appears only on mobile devices. First, click Inspect to the left of Toggle Device Toolbar in Chrome DevTools, and then place your mouse pointer on various elements to find one that only appears on mobile devices.

    Animated demonstration of a user clicking the Inspect icon in Chrome DevTools and then placing the mouse pointer on multiple elements of a retail website to find one that includes 'mobile' in its name

  4. In the Styles panel of Chrome DevTools, find the @media only screen and (max-width: [value]) property, and then copy and preserve the information for later use. If the @media only screen doesn't appear in the CSS in the Styles panel, it may in the CSS for a theme that's applied to the element. Click the theme link to view and, if necessary, search for the @media only screen and (max-width: [value]) property.

    The max-width property defines the maximum width of the mobile device viewport. See CSS @media Rule from W3Schools for more information.

    Animated demonstration of a user viewing first the HTML code and then the CSS code for a mobile-only menu icon. The user then clicks the link to a CSS theme, searches for '@media only screen and (max-width' and finds the property.

Once you've recorded the @media only screen and (max-width: [value]) property, you can build the banner action in Action Builder.

Building the Banner Action

Follow these steps to create the banner action in Action Builder.

  1. Click COMPONENTS in the top navigation bar of the Monetate platform, and then select Actions.

    Callout of the Actions option in the COMPONENTS menu

  2. Click CREATE ACTION.

    Callout of the CREATE ACTION button on the Actions list page

  3. Click Image on the Insert Content tab.

    The Insert Content tab of Action Builder

  4. Click GENERATE and then configure a placeholder image for the banner that is 1 pixel larger than the value of the max-width property for mobile devices.

    This use case employs an image placeholder for demonstration purposes. In a live experience on your site, you should use the appropriate creatives.

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

  5. 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

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

    Setting Enable Preview to ON allows you to see where the banner image will appear based on the element selector and relative element selector you choose.

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

  7. On the Details tab, select After or Last child from Insert Method.

    Callout of the Insert Method selector with 'Last child' highlighted

  8. Take the following actions to center the banner image below the navigation bar:
    1. Input into Banner Div Inline Style the CSS to center the banner container. 
      width: 100%;
display: block;
padding: 0;
margin: 0;
position: relative;

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

    2. Input into Image Element Inline Style the CSS for the banner image. The value of max-width should be 1 pixel larger than the value of the max-width property for mobile devices. 
      display: block;
width: 100%;
max-width: 552px;
margin: 0 auto;

      The Details tab in Action Builder, with the required CSS added to the 'Image Element Inline Style' field. The action preview shows the banner placeholder centered in its correct position relative to the header.

  9. Click the Styles tab in Action Builder, and then take the following actions:
    1. Copy and paste this CSS into the editor:
      #monetate_selectorBanner_[unique ID] {display: none !important;}

@media only screen and (max-width: [value]){
  #monetate_selectorBanner_[unique ID] {display: block !important;}
}
    2. Replace the [value] placeholder in @media only screen and (max-width: [value]) with the actual value you recorded in the final step of Inspecting the Site in Device Mode.

      The Styles tab in Action Builder, with an actual value inserted into the 'max-width' property

    3. Use Chrome DevTools to inspect the banner preview, and then copy the unique ID (for example, id="monetate_selectorBanner_4557ca77_00").

      Animated demonstration of a user right-clicking the banner image action preview, selecting Inspect to launch Chrome DevTools, and then copying the image ID

    4. Return to the Styles tab, and then paste the unique ID to replace the two placeholders in the CSS.

      Because the completed CSS prevents the banner from appearing when the viewport is greater than 551 pixels, Action Builder's preview function can no longer show the banner action in progress on your site.

      The Styles tab in Action Builder, with the actual banner unique ID in place

  10. Optionally, test the nearly complete banner action.
    1. Minimize Action Builder.

      Callout of the minimize window icon in Action Builder

    2. Relaunch Chrome DevTools, click Toggle Device Toolbar, and select a mobile device option.
    3. Verify that the banner action preview once again appears.

      Preview of an image banner placeholder that appears below the header on the mobile view of a retail website as seen in Chrome DevTools Device Mode

  11. Click the forward arrow in Action Builder, and then give the action a title, description, and subcategory. Finally, click CREATE & EXIT.

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

The action is now ready for you to use in a Web experience.

Creating the Experience

Follow these steps to create a Web experience to deploy the mobile banner.

  1. 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

  2. Click CREATE EXPERIENCE.

    Callout of the CREATE EXPERIENCE button on the Web Experiences list page

  3. Configure the WHY settings to select the experience type, the goal metric, and the secondary metrics.
  4. Configure the WHO settings to target customers visiting your site on mobile devices.
    1. Click WHO and then click ADD TARGET.

      Callout of the WHO settings and the ADD TARGET button

    2. Click Technographics.

      Callout of the Technographics option on the Target Type panel

    3. Click Device type.

      Callout of the 'Device type' option on the Technographics panel

    4. Select Mobile Phone and then click SAVE.

      Callout of the Mobile Phone option and the SAVE button on the 'Device type' WHO target panel

  5. Click WHAT and then click ADD ACTION.

    Callout of the WHAT settings and the ADD ACTION button

  6. Click Images.

    Callout of the Images option on the Action Type panel

  7. Click the banner image for mobile devices action that you created.

    The Images panel of the WHAT settings, which includes a 'Image Banner for Mobile Devices' action template option

  8. As necessary, configure any experience-level settings, and then click CREATE.

    Callout of the CREATE button for an 'Image Banner for Mobile Devices' action template

Before configuring the WHEN settings and activating the experience, preview it to ensure it works as anticipated.

Testing the Experience

Follow these steps to test the Web experience before activating it.

  1. Click the arrow to the right of PREVIEW, and then select Preview this Experience Alone.

    Callout of the PREVIEW menu button and its 'Preview this Experience Alone' option on the Experience Editor page

  2. Ensure that the banner does not appear on a desktop view of your site.

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

  3. Launch Chrome DevTools, click Toggle Device Toolbar, and select a mobile device option.
  4. Ensure that the banner appears correctly.

    The mobile view of the mobile-only banner experience. The banner correctly appears below the header.

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

Related Articles