Designing with Data

* [Overview](#overview) * [Starter Kits](#starter-kits) * [Datastream Asset Creation](#datastream-asset-creation) * [Datastream Asset Assignment](#datastream-asset-assignment) * [Datastream Curation](#datastream-curation) * [Datastream Location Data](#datastream-location-data) * [Master Schema :fa-external-link:](page:datastream-master-schema) [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/Ew9CfxwXRyeExCVCblAF", "datastream@3x.png", "795", "276", "#2475bc", "" ], "sizing": "80" } ] } [/block] [block:api-header] { "type": "basic", "title": "Overview" } [/block] With Datastream, power your ads with feed based content or leverage popular social media platforms such as Instagram and YouTube. Start with starter kits and asset creation, then move to asset assignment. Curation offers further flexibility and the master schema lists out available feed items. [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F135897226&url=https%3A%2F%2Fvimeo.com%2F135897226&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F531271410_1280.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=vimeo\" width=\"1280\" height=\"720\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://vimeo.com/135897226", "title": "Flite Datastream", "favicon": "https://f.vimeocdn.com/images_v6/favicon.ico", "image": "http://i.vimeocdn.com/video/531271410_1280.jpg" } [/block] To see some examples of ads built using Datastream, please view [this section](https://flite.site/ad-gallery-item?tag=datastream) in our ad gallery. [block:api-header] { "type": "basic", "title": "Starter Kits" } [/block] The best way to get off the ground with Datastream is to use a starter kit. Starter Kits is a shortcut to set up a basic layer structure that is optimal for Datastream. [block:api-header] { "type": "basic", "title": "Getting Started:" } [/block] First you’ll notice they are in a familiar place, right next to components. Are you using an Instagram feed with images? Then give the Image Carousel Starter Kit a shot. Need more control over the navigation? Then the Image Slideshow has got you covered. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/j9iG4wNmSDmR00o8Lfr2", "starter1.png", "229", "604", "#639eb7", "" ] } ] } [/block] Once you've selected your kit, you'll immediately be prompted to create or assign a data asset. After you’ve selected or created a source of data, you’ll see a familiar workflow with a new list of available components. The components in this new list represent the available items in the data you have chosen and the corresponding component. This data driven list of components show anytime you are selected on a data driven layer. Simply click or drag and drop to add any item to the stage. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/PCh3mYgKRqSp3M4tkurV", "jdyzdk8IDx (1).gif", "1425", "415", "#428dbe", "" ] } ] } [/block] [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F131260926&url=https%3A%2F%2Fvimeo.com%2F131260926&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F523441526_1280.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=vimeo\" width=\"1280\" height=\"720\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://vimeo.com/131260926", "title": "Datastream Starter Kits", "favicon": "https://f.vimeocdn.com/images_v6/favicon.ico", "image": "http://i.vimeocdn.com/video/523441526_1280.jpg" } [/block] [block:api-header] { "type": "basic", "title": "FAQ:" } [/block] Q: Can I attach multiple Datastreams to an ad? A: Yes, each layer can have a different Datastream. Q: Is there a way to limit what items appear in my ad? A: Yes, you can use the Start Item and Max Items options in the Datastream section of the View Templates settings inspector. [block:api-header] { "type": "basic", "title": "Datastream Asset Creation" } [/block] A Datastream ad starts in the asset manager. The asset manager allows you to create an asset from a source of data. That asset can then be assigned to multiple ad units. A change at the asset level will reflect across all units sharing the same asset. Below are a few simple steps to create your asset type. ## Datastream Asset Type You can go directly into the asset manager through the "Make New" menu in the console view as seen in the 1st image below. Additionally, you can also enter the asset manager through the data section in the Design Studio via the cloud icon which will then prompt you to either create a new Datastream asset or assign an existing one. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/ZzTnmHKTci3h4jQn3kWP", "Screen+Shot+2014-11-06+at+3.41.20+PM.png", "163", "340", "#b54e30", "" ] } ] } [/block] **Asset Type:** Once in the asset manager, select the type of asset that is to be created. In this case, you'll be selecting *Datastream*. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/avgTAGL5QemlknkDb0ym", "Screen+Shot+2015-06-18+at+3.48.56+PM.png", "375", "248", "#e43c7c", "" ] } ] } [/block] **Source Type:** Select between JSON, RSS, Social and other options. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/O2K9t9qQIqKIrzT6fwYz", "Screen+Shot+2015-06-18+at+4.03.08+PM.png", "375", "187", "#224e88", "" ] } ] } [/block] **JSON/XML Source Type:** If using a custom JSON or XML, they must be mapped to the Flite Master Schema. A complete list of the Flite Schema is [available here](page:datastream-master-schema). * Data URL - Enter a URL to a remote data field. * Name - Enter the asset name. * Root - Identify the root then select and match from the Flite Schema (Data Field) to JSON/XML (Data Path). * Data Field - Available items in Flite schema. * Data Path - Available items in your feed. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/Vnl2qYgGQ0aMIOXA1sFi", "0yXZKcre58.gif", "948", "595", "#c19a6c", "" ] } ] } [/block] * Select an item from the Data Field which represents items in the Flite Schema and choose its path based on your feed. Use the plus and subtraction buttons to add or remove lines. A view source option is available just above the root dropdown. **RSS/ATOM:** The predictability of these feeds allow for Flite to provide the mapping. **Instagram:** Once a username is entered, an optional filter will appear. **List:** The List source type is an advanced option allows you to host a feed locally. The list source type supplies you the basic structure to get you started. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/VC2napVTSweIWhkO2Lmp", "Screen+Shot+2015-06-18+at+5.20.11+PM.png", "358", "497", "#4272b6", "" ] } ] } [/block] ## Datastream Preview Once a Datastream has been selected, you'll see a preview of the first 20 items in your feed. There are four views available: Tiled, List, Detailed and Code. You can switch between the views from the toggle in the top right corner of the asset preview. The preview shows items in the feed instantly and applies any filters that are enabled. The UI simplifies the mapping process for JSONs and XML's. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/xYlK5rcZTTaYzU6eiSJq", "Screen+Shot+2015-06-18+at+5.21.23+PM.png", "838", "533", "#81a8bc", "" ] } ] } [/block] ## Curation Datastream curation gives you complete control over your various social media feeds. With the new curation controls and a few simple clicks, you can pick and choose what is to be displayed from your social media accounts with ease. For more information on Datastream Curation, [click here](#datastream-curation). After publishing a completed Datastream asset type, it will now be available for assignment in the Design Studio. For instructions on assigning your Datastream to an ad, [click here](#datastream-asset-assignment). [block:callout] { "type": "info", "title": "NOTE", "body": "Any feeds for social services (e.g. Instagram, Facebook, etc.) which are age restricted cannot be accessed via Datastream." } [/block] [block:api-header] { "type": "basic", "title": "Datastream Asset Assignment" } [/block] Datastream is a powerful new feature that allows a source of data to drive content to a Flite ad unit. In conjunction with the Flite asset manager, Datastream can accept a wide array of custom JSON, XML, RSS/ATOM as well as YouTube and Instagram feeds. When a Datastream is assigned to a layer, it stacks duplications of that layer on top of one another. This allows for one image component to show multiple images from the data. You can then design your Datastream ad with existing studio tools to meet your creative guidelines. ## Assigning a Datastream Asset to an Ad * A Datastream can be assigned directly to a layer that accepts Datastream. * When a Datastream is assigned to a layer, it creates duplications of that layer on top of one another. This allows for one image component to show multiple images from the data. This functionality doesn't always make sense for all components so you'll see an inactive data section in those cases. * Datastream Field Assignment Tokens are used at the component level to populate them with content from the data. More on this below as well. ## 1. Choose a Datastream Asset * Select a layer and make your way to the data assignment section in the inspector panel. Click the cloud icon to select a Datastream. * Randomize: There are two randomization options, data and result. The data option randomizes before the data is returned. The result option randomizes the returned data. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/k5rylANZQaqXaakpwTcl", "Screen+Shot+2015-04-02+at+2.36.00+PM.png", "314", "292", "#78a8ce", "" ] } ] } [/block] * The mini-console will appear with all available Datastream asset types. Select the appropriate asset for your ad. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/1757irYTPyIPw0PjVhQA", "123.png", "1002", "463", "#86aacc", "" ] } ] } [/block] ## 2. Datastream Field Assignment **Field Assignment** - Once you have a Datastream assigned to a layer, you can now enter in the field assignment token to display your content from your Datastream. Begin by inputting `${` which will enable an auto complete dropdown with all available tokens from the data. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/LUpmAAi5SkSTVbgyrYLj", "autocomplete.gif", "609", "476", "#6a8db5", "" ] } ] } [/block] If you have any additional questions, please contact your account manager or support at [support.flite.com](https://flite.site). ## FAQ **Can I attach multiple datastreams to an ad?** Yes, each layer can have a different datastream. **Is there a way to limit what items appear in my ad?** Yes, you can use the Start Item and Max Items options in the Datastream section of the settings inspector. [block:api-header] { "type": "basic", "title": "Datastream Curation" } [/block] Datastream curation gives you complete control over your various social media feeds. With the new curation controls and a few simple clicks, you can pick and choose what is to be displayed from your social media accounts with ease. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/OiBn3JvQgaZXzHhliOsn", "Screen+Shot+2015-05-08+at+5.13.46+PM.png", "1227", "645", "#507baf", "" ] } ] } [/block] ## Getting Started Flip the curation mode on and as you hover over any item, you will be presented with: :fa-plus-circle: Item is available to be added to a curated list. :fa-minus-circle: Item can be removed from the curated list. ## FAQ **Can I curate from multiple Instagram accounts?** At this time, curation from multiple Instagram accounts are not available. **If I have items in a curated list, what happens if I add or remove posts from Instagram itself?** When you add a new post to your Instagram account, it will be available for you to add to an any curated list. However, if you delete a post from Instagram, not only will it reflect in your feed but will reflect in any curated list using the deleted post. Instagram does not allow the storage of its content. Therefore, deletion on Instagram means deletion in the Design Studio. **Can I curate from an RSS, JSON or XML?** Curation is best used with social media outlets and is only available in those types data sources at this time. For more information, please reach out to your account manager at [accountmanagement@flite.com](mailto:accountmanagement@flite.com). [block:api-header] { "type": "basic", "title": "Datastream Location Data" } [/block] ## Location Data Datastream now offers support for location data which enables you to leverage the Design Studio to build engaging creative with locations. Locations is available as a sub-type within Datastream Assets. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/cxJi0aoQRuyKcWWeynVq", "Screen+Shot+2015-10-06+at+10.41.48+AM.png", "115", "52", "#093e84", "" ] } ] } [/block] **[CSV Format:](https://flite.site/flite_locations_example.csv)** Click [here](https://flite.site/flite_locations_example.csv) to download a sample location CSV. [block:parameters] { "data": { "0-0": "Flite HQ", "0-1": "23 Geary St. 7th Floor", "h-0": "Location", "h-1": "Address", "h-2": "City", "h-3": "State", "h-4": "Zip", "0-2": "San Francisco", "0-3": "CA", "0-4": "94108", "h-5": "Country", "0-5": "USA", "h-6": "Phone", "0-6": "8885551234", "h-7": "Email", "0-7": "support@flite.com", "h-8": "Hours", "0-8": "\"M - F: 9pm - 9pm, SA: 9am - 5pm, SU: Closed\"", "h-9": "Latitude", "h-10": "Longitude", "0-9": "37.7877542", "0-10": "-122.4062034" }, "cols": 11, "rows": 1 } [/block] The format is standard for location data and with this standard in place, no mapping to the Flite schema is required. Simply upload your location data in the above format and it's plug and play. If you have further questions, please contact [support@flite.com](mailto:support@flite.com).

Flite Help Center

Design Studio

Campaign Studio

Report Studio

Metrics

Flite Console

Ad Ops

Component Studio