The sponsored product video ad or signature video is an emerging ad format for retail media and ecommerce. Using AdButler's ProductDB and VAST ad server, you can easily create a video ad with a corresponding sponsored product as a side card.

Side cards are rendered as companion ads to a VAST ad and can be completely customized using AdButler's native templates.

In this guide, you'll learn:

1. How to create a side card template.
2. How to create a signature video ad with a side card ad.
3. How to render a signature video and side card.
4. How to serve a signature video and side card ad using JavaScript.

Creating and editing a side card template

Before creating the signature video VAST ad item, you must first prepare the native template for the side card. You can either edit the preset signature side card template or create your own.

Method 1 - Using AdButler's Signature Side Card.

1. Click Templates in the left navigation menu. The Templates section will appear.
2. Click Native Ad Templates. The Native Ad Templates subsection will appear.
3. Click the AdButler Signature Side Card template. The Edit Template page will appear.
4. Customize the CSS to match your page theme.
5. Click Save Changes.

Method 2 - Using your own native template:

1. Click Templates in the left navigation menu. The Templates section will appear.
2. Click Native Ad Templates. The Native Ad Templates subsection will appear.
3. Click Add Native Ad Template. The New Native Template window will appear.
4. Click Product. The New Native Template page will appear.
5. Add your desired HTML and CSS code, including the corresponding Product variables.
6. Click Save Changes.

Back to top

Creating a signature video and side card ad

1. Go to the section of the relevant advertiser (Your AdButler > Advertisers > Your Advertiser).

2. Click Add Campaign. The Create Campaign window will appear.

3. Click VAST Campaign.

4. Name the campaign then click Create Campaign. You will be taken back to the advertiser section.

5. Click on the name of the VAST campaign you created to go to its section.

6. Click Add Ad Item. The Add VAST Ad Item window will appear.

7. Click VAST 2.0. The New VAST Ad page will appear.

8. Click on the Linear Media tab, then scroll down to Media Source and upload the video creative or select it from your Media Library.

10. Click on the Companions tab.

11. Click on the Resource Type dropdown and select Native Product.

12. Click on the Native Template dropdown and select either the preset side card template that you customized or the one that you created.

13. Fill in the fields in the Summary and Tracking Events tab as needed.

14. Click Save Ad Item.

Back to top

Rendering a VAST ad item and side card with your own video player

You can also handle the rendering of the video ad and all of the markup yourself using the standard IAB VAST specification and companion ads.

1. Follow the steps to create a signature video and side card until step 10.

2. Click Advanced Options.

3. In the Ad Slot ID field, enter the ID of the DIV element where your video player will render the side card companion ad.

4. Configure the rest of the VAST ad item settings as needed.

5. Click Save Ad Item. You will be taken back to the VAST campaign section.

6. Under the Zone Assignments table, click Assign to Zone.

7. Click on the relevant VAST zone.

8. Configure the placement details as needed.

9. Click Save. You will be taken back to the VAST campaign section.

10. Go to the section of the VAST zone where you assigned the campaign (Your AdButler > Publishers > Your Publisher > Your VAST Zone).

11. Click Get Zone Link. The VAST Zone Link window will appear.

12. Copy the tag and insert it into your video player.

Back to top

Serving a signature video and side card ad via JavaScript

Customize the sample JavaScript code below with the following:

1. Replace $productID? with the relevant product ID.

2. Replace $zoneID? with the relevant VAST zone ID.

3. You can also replace the domain with your own custom ad-serving domain if you have the applicable White Label Domain add-on included in your AdButler subscription.

      <script data-ab-vast>
            if (!window.AdButlerVAST){(function(){var s = document.createElement("script");s.async = true; s.type = "text/javascript";s.src = 'https://<?=$domain?>/vast-app/vast_app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}
            var el = document.currentScript;
            AdButlerVAST = window.AdButlerVAST || { cmd: [] };
            AdButlerVAST.cmd.push(function(){
                AdButlerVAST.createSponsoredProductRow(
                    <?=$productID?>,
                    <?=$zoneID?>,
                    {
                        domain: 'servedbyadbutler.com',
                        videoWidth: 0.3,
                        numCompanions: 2,
                        sources: [
                            // 'your own video URL here if you wish to not use AdButler's VAST Zone URL',
                            // 'your own video URL here if you wish to not use AdButler's VAST Zone URL',
                        ],
                    }
                );
            });
        </script>

Back to top