The default configuration of the widget is typically set up by the Videoly team. Our engineers scan your product page looking for the different data that allows our widget to work properly. This data includes, but is not limited to, product title, product ID (SKU, EAN, etc.), brand and category tree.
(Read more about what information Videoly collects here.)
Sharing product information in invisible DOM nodes makes the widget even better at reading your product page template. You gain the best insight into the functioning of your platform and which codes would be more relevant to reading product data. Sharing product information with us makes us absolutely confident that this data is reliable and consistent on all of the product pages.
Sharing product information has two main benefits:
- Better coverage: when product information sections are identical and available on all product pages, we will be able to show as many videos as possible
Nothing to worry about when making changes: if you decide to change your product page layout or migrate to a new online platform, the Videoly widget will require either minimum or no adjustments at all.
How to set it up?
In order to share the product information with Videoly, you’ll need to add a few lines of code (the aforementioned invisible DOM nodes). These lines can be located anywhere in your HTML layout.
Here is an example with default IDs that Videoly is checking before extracting data using other selectors:
<div id="videoly-product-title" style="display:none;">Clean product title here without SEO things</div> <div id="videoly-product-id" style="display:none;">12345678ABC</div> <div id="videoly-product-sku" style="display:none;">LEGO12345-AB23</div> <div class="videoly-product-gtin" style="display:none;">5702016603842</div> <div class="videoly-product-mpn" style="display:none;">21319</div>
<div id="videoly-product-brand" style="display:none;">Philips</div> - a brand name of the product <div id="videoly-product-currency" style="display:none;">EUR</div> <div id="videoly-product-price" style="display:none;">€1234,12</div> <div id="videoly-category-tree" style="display:none;">Phones / Accessories / Protection screens</div>
The Videoly widget will first look for the nodes provided above and extract data from them. If the node is not found or the content is empty, it will use selectors defined by the Videoly team.
When implementing the lines above, make sure the values of ID attributes remain the same on all product pages, while the content of the div element changes depending on the product page.
Collecting add-to-cart conversions
Videoly can measure the value of videos by collecting clicks on the add-to-cart button. Here, you can add the class name "videoly-atc-btn" to notify Videoly to monitor the button:
<div class="btn-addtocart btn-default videoly-atc-btn">Add to Cart</div>