Skip to main content

Enabling Onsite Ads and Personalization

For a deeper understanding of channels, sites, zones, and ad types please refer to the Data Model Folder.

1. Installation​

Insert the following script inside the <head></head> section of your website to load Surfside Ads and render the ad placements on your site.

<html>
  <head>
    <script src="//cdn.surfside.io/ads/2.0.0/r.js"></script>
  </head>
</html>

2. Usage​

For each Ad Placement you would like to render on your site, simply paste the web component tag generated from the Surfside Platform (or shared via your Customer Success Manager) into the <body><body/> section of your webpage's HTML structure.

You will need to update the storeId value to reflect each distinct menu on your website. The location-id is the unique retailer ID for that specific store, used by platforms like Dutchie or Jane. Note: If you are not using Dutchie or Jane, the location-id should correspond to the unique identifier used by your backend system. If the user changes menu, the location-id should also update to reflect the current location-id.

AttributeDescriptionExample
account-idThe account ID of the publisher.account-id="ecf0f1"
channel-idThe channel ID of the publisher.channel-id="iddqd"
site-idThe site ID of the publisher.site-id="qwop2"
zone-idThe zone for this particular creative.zone-id="yurop"
location-idThe location ID for the store; usually tied to a physical store location. The format of this ID is publisher-defined.location-id="WillowLawn"
keywordsAn array of keywords describing the content of the page.keywords="automotive,cars,repair,parts"
max-itemsThe total number of cards to show in the carousel, across all pages.max-items="30"
card-min-widthThe minimum size of a product card, in pixels.card-min-width="290"
card-max-widthThe maximum size of a product card, in pixels.card-max-width="290"
catalogtrue / false. Whether or not to enable the Surfside product feed service for displaying product cards.catalog="true"
strategyhybrid / sponsored / recommended. The strategy to use for fetching creatives. "sponsored" only requests sponsored ads. "recommended" only requests products from the Surfside recommender. "hybrid" requests sponsored ads and fills any empty space with recommended products.strategy="hybrid"
recommendtop-products / for-you / buy-again. The type of recommender to use if the recommender is requested. "top-products" returns the top products for the site from all users. "for-you" returns personalized recommendations if the user ID is set in the digital SDK. "buy-again" returns recently purchased products by the user if the user ID is set in the digital SDK. If "for-you" or "buy-again" fails, it falls back to "top-products".recommend="top-products"
next-typepage / product. If set to "page", clicking on the arrow returns an entire page of sponsored products. If set to "product", clicking on the arrow returns a single product.next-type="product"

NOTE:
channel-id, account-id, and site-id are constant values for each site.
zone-id is a unique identifier for each ad placement.

Below is an example of the different ad format web components that are used to render ad placements:

<surf-carousel
  channel-id="00000"
  account-id="00000"
  site-id="00000"
  zone-id="00000"
  location-id="UNIQUE_STORE_ID_HERE"
  keyword="myzone"
  catalog="true"
  max-items="23"
  card-min-width="200"
  card-max-width="400"
  strategy="hybrid"
  recommend="for-you"
>
</surf-carousel>

Product Card​

<surf-product-card
  channel-id="00000"
  account-id="00000"
  site-id="00000"
  zone-id="00000"
  location-id="UNIQUE_STORE_ID_HERE"
  keyword="myzone"
  catalog="true"
  strategy="sponsored"
  card-min-width="200"
  card-max-width="400"
>
</surf-product-card>
<surf-banner
  channel-id="00000"
  account-id="00000"
  site-id="00000"
  zone-id="00000"
  location-id="UNIQUE_STORE_ID_HERE"
  keyword="myzone"
  width="8"
  height="1"
>
</surf-banner>

Videos​

<surf-video
  channel-id="00000"
  account-id="00000"
  site-id="00000"
  zone-id="00000"
  location-id="UNIQUE_STORE_ID_HERE"
  keyword="myzone"
  width="8"
  height="1"
  duration="30"
>
</surf-video>