Sponsored Banners

VTEX Sponsored Banners is responsible for implementing the necessary frontend apps to properly render the sponsored banner.

This component will request the sponsored banners available for publisher that's implementing it and render it on screen. This component already add the Analytics data.

Configuration

Step 1: Adding the Sponsored Products app to your theme's dependency

In your theme's manifest.json, add the Sponsored Banners app as a dependency:

  "dependencies": {
    "vtex.sponsored-banners": "0.x"
  }

Now, you are able to use all the blocks exported by the sponsored-banners app. Check out the full list below:

`sponsored-banners` blocks

Block name	Description
`sponsored-banners`	Renders the Banner on Screen. You can customize its CSS however fits best your store. Already contains analytics data to observe impression and click metrics to assess the performance of the campaigns

Step 2: Using the Sponsored Banners blocks

The sponsored banner

This is fairly straightforward: simply call it as a child block on your Home. For example:

"disposition-layout#home": {
    "children": [
        "flex-layout.row#component-options-home",
        "flex-layout.row#component-benefits-home",
+       "sponsored-banners",
        "flex-layout.row#home-tab-layout-shelf-01",
        "flex-layout.row#component-shelfbanner-home-02",
    ]
},

Blocks