Smart Content allows you to quickly add and target promotional content into predefined slots throughout the client’s desktop, tablet, mobile site, as well as app or Store Driver site. This allows clients to create targeted messaging to provide a more personalized shopping experience for the shopper.
What Is Smart Content?
The content is a targeted promotional image or video to recommend products, and is managed through Connection Center. In Connection Center the marketer can choose from the predefined content slots and set either an image with referring URL or a YouTube link, which can have a preview image set.
We are currently developing the ability to create text overlay on images to enhance the messaging and avoid the need for baked in text.
Smart Content is a Mobify Quick Launch feature.
Customizing Smart Content
Smart Content that populates in predefined banner slots can be filtered based on four types of audience criteria:
- Store-Specific: The ad will display within a defined radius of a store, or chain of stores. (It is currently dependant on having Store Drivers set up to be able to filter on location data.)
- Region-Specific or Designated Marketing Area (DMA): The ad will display for people within a specific region. The DMA specific areas only work in the US and are set by Nielsen DMA Maps.
- Product-Specific: Allow you to target your audience based on an event that has taken place, such as a visited to a specific page on your website.
- Language-based: Target banners based on language the person is browsing in. Initially developed to target Arabic- and English-speaking customers with language-specific content.
Read more about Smart Content in the Connection Center.
Smart Content allows for the marketer to quickly and easily change promotional content, without the need to use technical resources. Consider going through the site with the customer and identifying where high turnover content lives, and how changing it to Smart Content will improve their deployment process.
The most challenging part of delivering Smart Content is helping the the customer understand the stories they can tell with them. The slots are picked on the template level; if you create a slot on a CLP, it will appear across all other CLPs using that template. This means you could tell an overall story like:
Our goal is to highlight the best seasonal clothing in your region to suite the typical weather conditions over time.
You could then use for example use the slot(s) to target the west coast with rainwear and the east coast with heavy down jackets for the winter season, and then change the theme of the promotion later as the scenario evolves.
Specifications Smart Content Image Assets
Images sizes will be based on the maximum size of the slot as it appears on the different platforms. We recommend that 2x size images to support retina displays.
For example if you think in terms of where the natural break point of your site may be you might end up with sizing like this for a full page width Smart Content banner at 2x resolution.
- Smart Content
2664pxwide optimized to be under 1 MB size
- Tablet (pulls in the content from the desktop slot):
- Smart Content is same as desktop, for baked in text verify the content is readable at
- Smart Content
640pxmin width to
- Accounts for @2x (retina) and @3x (iPhone 7+ retina)
Marketers can use
.gif files as long as they are under 1 MB in size.
Videos need the YouTube link to work versus an embed code. The preview image will follow the same sizing rules as described above.
Rules for Location
- Slots can only be placed in a div container or between two divs.
- Must have a unique identifier, such as an id or non-repeated class.
- Can specify different cards for mobile, tablet, and desktop site
- On a responsive site the same container location can be specified multiple times and will pick the right one based on querying the device type.
- Tablet content can be served with the desktop banner to avoid the need to create additional slots.
- When specifying a new div between existing ones it is now possible to add the appropriate margins to align it to the flow of the existing site without requiring changes to the customer’s styles.
- They are not customizable between template instances, meaning that if you specify Smart Content on a PLP template, all PLP’s using the same template will inherit that same Smart Content container.
Documenting Smart Content Details
Creating mockups during the Smart Content slot location selection process is an important way to illustrate the potential locations promotional content can live, and are good talking points around the client’s goals. Because you will most likely be specifying content slots on a variety of different platforms using something like InVision Boards will help you group relevant templates together.
When creating the Smart content slots you will need to specify a few details into a copy of the Smart Contents Slot Template spreadsheet. The following table describes the needed content, what it is and who may be responsible for creating it.
|Element||Meaning / Responsibility|
|Mobify ID||Correlates to the Customer ID in Connections Center (Created by the location team)|
|Name||A descriptive name of the slot. Used in the by the marketer later to add content to, so be descriptive. (Designer)|
|CSS Selector||Class name identifying it is from Mobify, what type of content, the target platform and the container id or unique class it will be before, in, or after. e.g. .mobify-smartcontent-mobile #hero-wrapper|
|Placement (before, in or after)||Where it is located in relation to the id or class name specified in the CSS Selector.|
|Preview URL||The URL corresponding to the desired template and where the Preview feature in the Connections Center will show the content.|
|Custom CSS||Additional styling needed on the Smart Content container, like padding to make it fit in with the existing content.|
|uuid||Created by the Location Team|
|business_id||Created by the Location Team|
|Slot||Created by the Location Team|
Once the initial Smart Content slots have been picked, create documentation that provides the customer an easy reference for the locations, the slot number and the slot name.
We recommend that the documentation include a title identifying what the document is for, the template it will apply to (e.g. the homepage), and the client logo. In this document, use the final mockup with the placeholder images and call out the slot number, site type it will display on (desktop, tablet, mobile, app or store driver) and the descriptive name chosen for the slot in the Smart Content template spreadsheet as this is the name they will see in the Connection Center.
Additional Smart Content slots can be easily added later by the location team, but in the initial build we’d suggest starting with three slots.