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.
Click Dimensions at the top of the window, and then select iPhone 6/7/8.
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.
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.
Click CREATE ACTION.
Click the Insert Content tab and then click Image.
Next, generate a placeholder image for the banner that is 750 pixels, which is 1 pixel larger than the width for mobile devices.
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.
Return to Action Builder, select a placeholder element near the header, and then click the forward arrow.
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.
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;
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;
The result of these two CSS entries is that the banner image is centered below the navigation bar.
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;}
}
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.
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.
Creating the Experience
To get started, click EXPERIENCES in the top navigation bar, and then select Web.
Click CREATE EXPERIENCE.
Click WHY, select To serve everyone the same experience, and then click NEXT.
Select a goal metric, adjust the secondary metrics as necessary, and then confirm that you've configured the WHY settings as you need.
Use the WHO settings to ensure that the experience only fires for site visitors on mobile Devices. Click WHO and then click ADD TARGET.
Click Technographics.
Click Device type.
Select Mobile Phone and then click SAVE.
Add the banner action to the experience. Click WHAT and then click ADD ACTION.
Click Images.
Click the action that you created for this experience for mobile devices.
Because the custom CSS was added to the action in Action Builder, no experience-level changes are required. Click CREATE.
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.
Once the site loads, the banner shouldn't appear at the top of the page because you're previewing the experience on a desktop.
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.
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.