Filters for dynamic feed data

Google Web Designer includes filter functions for processing feed data before binding the data to elements in your dynamic ad. For example, you may need to reformat text data so that it appears in uppercase.

To apply a filter:

  1. After selecting a data schema object, browse the available filters by clicking the Filters tab.
  2. Apply a filter by clicking it. The filter gets added to the Data schema object field, preceded by a pipe character ( | ).
    • To replace a filter with another one, select the new filter from the list.
  3. If you want to add another filter, click the Add new button. If you apply multiple filters, they take effect in the order that they appear in the field.

Filters

Filter Description

Pluck

Takes an array, gets the value of the specified property for each item, and returns an array of the property values. Use the dropdown to select the property you want to pluck.

For example, to get an array of the image URLs of all products:

Product | Pluck: Image URL

Join

Takes an array and returns all items in the array as a single string, with each item separated by a comma.

For example, to get a comma-separated string of the image URLs of all products:

Product | Pluck: Image URL | Join

Pluck and join

Takes an array, applies the Pluck filter to it, then applies the Join filter to the results. Use the dropdown to select the property you want to fetch with the Pluck filter.

For example, to get a comma-separated string of the image URLs of all products:

Product | Pluck and join: Image URL

Limit count

Takes an array and returns an array with the specified number of items, starting with the first item. Use the dropdown to select the number of items you want.

For example, to include only the first three products in your feed:

Product | Limit count: 3

Add pixel units

Formats a string so that it can be used as a CSS pixel-value property by appending px to the end.

For example, this filter would change 20 to 20px.

Make CSS hex color

Formats a hex value so that it can be used as a CSS color property by replacing 0x with # instead.

For example, this filter would change 0x404040 to #404040.

Make all lowercase

Formats a string as all lowercase.

For example, this filter would change Abc to abc.

Make all uppercase

Formats a string as all uppercase.

For example, this filter would change Abc to ABC.

Was this article helpful?
How can we improve it?