BuySellAds Content Portal

Selling Ad Inventory With On-Site Shopping Cart

Last Updated on December 16, 2015

Overview

The On-Site Shopping Cart is a simple tool that allows your advertisers to purchase ad inventory directly from you without ever leaving your website.

This is a great technique for increasing your revenue beyond being listed in the BuySellAds marketplace, especially if you have traffic from inbound leads coming to your “Advertise With Us” page. The commission fee is reduced from 25% to 15% for all purchases completed with the On-Site Shopping Cart installed on your website. (Renewals of these purchases are also charged with the 15% commission fee.)

When you embed the Shopping Cart onto your chosen page, you will see two visual elements. The first element lists out each zone in your BuySellAds inventory with quality and price information, similar to how your inventory is displayed in the marketplace. The second element is the actual shopping cart. When an advertiser clicks on an “Add to Cart” button, BuySellAds will load a floating window where the advertiser can complete the entire purchase, from uploading creatives to entering billing information and confirming.

Click here for a live demo.

Current Limitations

As of this release, only image inventory (display banners and site skins) can be displayed in the on-site shopping cart. We will update our blog and this article when more formats are supported.

Installation

Putting the On-Site Shopping Cart on your site is as easy as copy-pasting two code snippets into your source code.

  1. Click on the On-Site Cart Setup link in the dropdown next to the Settings button in the dashboard for your property.

  2. On the next page, you will see some color setting options as well as a box with code snippets and instructions. By default, the On-Site Shopping Cart’s buttons are a bright shade of blue. In the event some of your ad zones are sold out, BuySellAds will automatically change the Add to Cart button to a Waiting List button. You can edit those colors to better match the colors of your website. Simply enter your desired hex code in the fields on the left, make sure the preview buttons look good, and save your changes.

    You can edit those colors to better match the colors of your website. Simply enter your desired hex code in the fields on the left, make sure the preview buttons look good, and save your changes.

    You will notice a checkbox labeled “Include Default Inventory CSS“. We recommend keeping this box checked unless you want a completely barebones shopping cart, and you are comfortable writing your CSS.

  3. Now that you have customized the visual look of the shopping cart, you will add the JavaScript code to the relevant parts of your website. BuySellAds offers an easy installation, and a custom installation if you are more comfortable designing in CSS.

Easy Installation, Display Inventory:

Whether you are using WordPress, another CMS, or static HTML files, open up the source code for the page on which you want the shopping cart to appear (for example, your “Advertisers” page). Copy the single line of code from Step 1 to the exact location in the source code where you want your ad inventory to appear. Save the changes to this page.

Then, locate the footer file of your website (e.g., footer.php in WordPress), and paste the Step 2 code snippet before the closing </body> tag. Save your changes.

Test the functionality of the cart once you have deployed your updated code. Do you see the ad inventory table where it is supposed to be? Great! If you click “Add to Cart” next to a zone, does a shopping cart window float over the upper right-hand side of your page? Most excellent!

In the event our basic inventory listing does not suit your needs, you can use our custom “Add to Cart” links. For example, if you would like to place a link underneath banners on your website so that advertisers can purchase directly from there rather then sending them to an “Advertise” page.

To use this method, click on Custom Add to Cart Links on the On-Site Shopping Cart settings page. In Step 1 you will see some lines of code, each one is associated with an ad zone you have setup in your BuySellAds account.

For instance, in our test account, there are seven ad zones, and you can see seven custom “Add to Cart” links in the screenshot below. Each link is associated with an existing zone in our test account.

Paste the desired Custom Add to Cart Link code where you would like the link to appear on your website. Then, feel free to customize the colors, fonts, etc., in your CSS using the .bsa-add-to-cart class.

It is very important that you keep the CSS class the same in your markup. It is also necessary that you keep the data-bsa-zone key/value intact as this is what triggers the On-Site Shopping Cart floating widget. Finally, please do not modify the second snippet, the JavaScript in the footer to load the floating cart window.