Feed Parser (XML & RSS Feed)

This article will walk you through integrating dynamic feeds (XML/RSS) into to your ad unit.  The Feed Parser Component can be added to any type of Format.

Notes: Once you have added your client's feed URL or file in the builder using the steps below, the ad will be automatically updated when the client updates their feed.  The feed URL should remain the same/the naming not be changed. If the URL naming is updated, you will need to update this in the builder and re-configure the feed and selected elements.

For help with creating a feed - please see XML/RSS Best Practices.  

Adventive accepts standard RSS feeds and 1-3 layer XML feeds.  You can use an online editor and all feeds should validate in a validator (links below).

Online XML editor tools/validator here and here.

Please allow up to 15 minutes for updates made to feeds to display in ad units. XML files are cached to prevent overwhelming the host server with calls and maintains the ability to serve the unit in the case the host is down.

* Note: For secure sites using https protocol, your feed must also be hosted securely. For more information please contact support@adventive.com.

There are 2 options depending on Feed type:

XML Carousel –XML Carousel allows you to source groups of data points associated with an item. For example, let’s say you have a feed of real estate listings. A single real estate listing might include a photo of the home, the city, and price.

You’d want to show all this data at once but also allow users to navigate through each listing in the feed. The XML Carousel allows you to arrange groups of data or lists into ‘slides’ then set your display parameters like horizontal or vertical alignment, number of slides per page and auto or manual transitions.

Single Slide View
Preview:  https://console.adventive.com/ad/demohtml/28c285e1-6c80-46ea-ae90-cd85b7625d7b

Multiple Slide View
Preview:  https://console.adventive.com/ad/demohtml/3e40e5d0-0658-4c3d-a83f-671d8a846448 

XML Free Form- Let’s say you have a single, dynamic data point you want to integrate into an ad unit. For example, the latest jackpot total for the NY Powerball drawing. XML Freeform allows you to place single, data elements within the ad canvas. You can have more than one data element.

Preview: https://console.adventive.com/ad/demohtml/3f9aa6ea-27df-4bd5-a726-ddf579cdf3ba

 

XML Carousel

In the Builder, Create a New File and Submit. Feeds can be rendered vertically or horizontally and can be integrated in any ad format or size. For this example, a horizontal 728x90 banner unit was created.

Once your blank canvas shows, click on the Components icon  and select Feed Parser and which type of Parser (for this example, “Carousel”).

 

The Feed Parser placeholder will display on the canvas and the XML Feed Settings modal will open automatically:

Make the Feed Selections under the Build Tab:

Feed Type – click the dropdown and choose either Remote or XML File:

Once you have entered or uploaded a valid feed, Adventive will parse the feed and display the available fields.

  • Thumbnail:  If your ad unit will have thumbnail pagination, select the field for your image source or leave as “None” if you do not want thumbnails.
  • Click URL: Select the feed element or field that contains the click URL for each item:

  • View Label:  Set the feed element that will trigger a view. View events are logged when the selected element is displayed on the page.
  • XML Fields: All fields parsed from the feed will be displayed.
    • Name - field value
    • Display - chose which elements to display in your ad unit.  Uncheck the elements to hide.
    • Type - Set the field type
    • Character limit - Enter a value if you wish to limit the number of characters displayed.  If field characters exceed this limit, the value will be truncated

Example Default:



Example Selections:

 

Types:

  • Text – display value as text
  • Currency – display value as currency
  • Image – display as image
  • Integer – display as number

You can also add additional fields by clicking Add Fields. For example, if you want to display price in two different areas – use the scroll bar to the right to scroll down and select “Add Field”:

Filters

Filtering is useful if you want to limit results to a specific value. For example, you may wish to only show listings from a particular city.

To Filter fields, go to the “Filters” tab within the XML Feed Settings:

Click “Add Filter”:

 

  • XML Field:  Select field to filter
  • Condition:  Select a filter condition, Equals or Contains
                Equals -  Filter by fields that are an exact match for your search string
                Contains – Filter by fields that contain your search string
  • Value:  The search string you want to filter by

When finished, Click Submit.  This will open the Slide Editor.

Slide Editor

After you’ve configured your feed and clicked Submit, the Carousel Slide Editor overlay will open. You’ll see your feed elements stacked on the ad canvas. Click and drag to position on the canvas.

You can resize the placeholder by clicking on a corner and dragging, or type in the width and height under General Properties. The position of the elements will reflect how they will be displayed as a group or per slide.

You will be able to select to show more than one slide at a time in the Carousel properties.

Select each item on the canvas to view the available properties.

Text fields may be styled just as any text box. Select "Auto size content to fit field" so your text will be auto-sized to allow all text to be displayed. This will prevent text from being cut off.

Images allow you to fit or fill the image within the placeholder - select from the dropdown:

Images that do not meet the image proportions will be smaller when you select “fill” – i.e. vertical as not to distort the image) Example:

You may want to make the background transparent as this is going to overlay our actual banner canvas (so any images/creative you place on the actual banner canvas will show through).  To make transparent, go to the Design area and click into the “Fill Color” box and select “X”, then click OK:

Example of transparent Feed canvas:

When done editing, Click “Update” in the top right corner:

The feed carousel will automatically be placed on the canvas along with arrows and you can now set a background and put any other assets (logo, etc.) on the main canvas (example below has a blue background).

Now you are ready to configure your carousel. Select the carousel and you’ll see Carousel properties displayed on the right.

CAROUSEL SETTINGS:

  • Edit Feed: Selecting this will open the XML Feed Settings. Note, if you make a change to here, you will need to re-design your slide layout as the data will need to be parsed again.


  • Edit Slide: Click to open the Carousel Slide Editor:


  • Name:  Optional - Click in the field to enter a name for your Feed Carousel
  • Randomize Feed: Randomizes the order in which slides are displayed
  • Auto Animate: If selected, slides will automatically transition from the left or top.  If unselected, slides will advance when the user clicks on the navigation arrows or pagination.
  • Time between slides: Set the number of seconds the slide is displayed for auto animated slide transitions. Use the arrows to set the number of seconds between slides. We used 5 seconds for this example.
  • Number of slides per page: The number of slides displayed at a time. Use the arrows to change the number of slides per page.  We used 4 slides for this example.
  • Max item count: i.e. if you have 50 real estate listings, you can set a cap of 10 to show
  • Orientation: How the feed will be displayed. Click the dropdown to select either vertical or horizontal orientation. We used horizontal for this example.

NAVIGATION ARROW SETTINGS:



Navigation arrows appear to the right and left of your XML feed (if horizontal) or top and bottom (if vertical), allowing users to click to advance to the next slide page or go back to the previous slide page.

Display – Click on the dropdown to choose from the following:
Always: Always display arrows
On hover: Show arrows when user hovers over the feed
Never: Do not show arrows

Arrow Style – Click on the dropdown to choose from the following:
Default: Default Arrows will show

Custom: Upload custom navigation images. Click Select Asset to select left and right arrow image assets from your asset library. You can then set custom width, height and x,y position.

Hitbox: If navigation elements are built into your ad creative, select this option to automatically add two transparent navigation hitboxes to your canvas to position over the elements users should click to navigate between slides. You can also move them to the outside of the feed area.

Size: Click on the dropdown to choose:  Small, Medium, or Large arrows.

Color: Set arrow color

Opacity: Set arrow opacity - 0% transparent to 100% visible

PAGINATION SETTINGS:

Display – Click on the dropdown to choose from the following:
Always: Always show pagination
On hover: Show pagination on hover
Never: Hide pagination

Format – Click on the dropdown to choose from the following:
Dots:  Show as dots

Thumbs: Shows as Thumbnails

 

Placement – Click on the dropdown to choose from the following:
Bottom:  places the pagination at the bottom of the ad unit
Top:  places the pagination at the top of the ad unit

Size:  Set container size to Small, Medium or Large

Container:  Set the color of the container

Active Thumbnail (if selected):  Set the color of the border around the active thumbnail

Arrow Color (if Thumbnails selected):  Set the color of the arrows for the thumbnail navigation

Fill Settings – Click on the dropdown to choose from the following:
Fit:  if asset is a different size than canvas, selecting “Fit” will auto size the asset to fit within the canvas
Fill: selecting “Fill” will auto size the asset to fill up the entire canvas

Opacity:  Set container opacity – 0% invisible up to 100% visible

 

Add any other assets to the canvas (logo, etc.)

Save the ad. 

Go to the Preview icon  to view the ad. Clickthroughs should automatically work (parsed from the XML feed).

 

XML Free Form

In the Builder, Create a New File and Submit. Feeds can be rendered vertically or horizontally and can be integrated in any ad format or size. For this example, a horizontal 300x600 banner unit was created.

Once your blank canvas shows, click on the Components icon   and select Feed Parser and which type of Parser (for this example, “Free Form”).

The Feed Parser placeholder will display on the canvas and the XML Feed Settings modal will open automatically:

Make the Feed Selections under the Build Tab:

Feed Type – click the dropdown and choose either Remote or XML File:

  • Remote – Hosted:
    Enter the URL for your XML/RSS feed – Example:



  • XML File – not hosted
    Click the upload icon  and select your file:

Once you have entered or uploaded a valid feed, Adventive will parse the feed and display the available fields.


 

  • XML Fields: All fields parsed from the feed will be displayed.
    • Name - field value
    • Display - chose which elements to display in your ad unit.  Uncheck the elements to hide.
    • Type - Set the field type
    • Click URL - if a click URL is selected from the dropdown, the field value will click through to the specified URL
    • Character limit - Enter a value if you wish to limit the number of characters displayed.  If field characters exceed this limit, the value will be truncated

Example Selections (In this example, we will uncheck the “nextDrawing” and choose to just display the Jackpot & change the “type” to currency):

 

Types:

  • Text – display value as text
  • Currency – display value as currency
  • Image – display as image
  • Integer - display as number

You can also add additional fields by clicking Add Fields:

Filters

Filtering is useful if you want to limit results to a specific value.

To Filter fields, go to the “Filters” tab within the XML Feed Settings:

Click “Add Filter” and fill out the fields:

 

  • XML Field:  Select field to filter
  • Condition:  Select a filter condition, Equals or Contains
                Equals -  Filter by fields that are an exact match for your search string
                Contains – Filter by fields that contain your search string
  • Value:  The search string you want to filter by

When finished, Click Submit.

Now your Data Point will display on the canvas:

Add a background image and any other assets to your canvas. 

With your data point selected you can change the styling of the text, color, style, and size by making changes in the Text fields under General Properties.  You can also choose to show commas or decimals.  Click “Edit Field” to make any changes to the XML:

Add any other assets to the canvas (logo, etc.).

Save the ad.  

Go to the Preview icon  to view the ad.