Guide to Badging Templates

 

Campaign badging is a useful tool for e-commerce sites to increase the visibility of specific products or promotions, creating a sense of urgency or excitement, and encouraging visitors to make a purchase.

Dynamic Yield offers two custom-code badging templates that enable you to automatically add badges to products on category pages and search results:

• PLP Badging Based on Recommendations: Badge products based on recommendation strategies, like Affinity or Recently Viewed.
  For example: "Selected for You" or "Because you like camping"
• PLP Badging Based on Social Proof: Badge products based on performance (social proof).
  For example: "Bestseller" or "Over 1000 sold"

To use the templates, complete the following steps.

Step 1: Define the CSS selectors for product cards and product images

Define the product card selector

The HTML selector returns an array of all the product cards on your category page. To define the selector, inspect one of the product cards and go to the top container for that product card. You can also use the blue box as a visual guide: You're on the right container when the blue box highlights the entire product card. Choose a selector that easily identifies all the product cards on your category page.

If you're using a class as the selector, make sure it’s not a dynamic class that changes on every page. If it is, opt for another selector that isn't dynamic.

Examples:

DY Demo Shop › selector › class name › .col-sm-12

Data Attributes as selectors › selector › attribute › [data-automation=”product-grid-item”]

Validate the selector

You can verify that the selector returns products on your category page by inserting your class into the following code snippet and pasting it into the console.

This code returns an array of product cards:

document.querySelectorAll('example_ProductCard_Selector')

This code returns the first product card:

document.querySelectorAll('example_ProductCard_Selector')[0] 

Define the image selector

Define the CSS selector for the image container within the Product Card container. This is the selector of the container that includes the <img> tag, not the selector of the <img> tag itself.

Validate the selector:

Verify that the selector you defined returns the image for the first product on your category page by inserting your selectors into the following code snippet and then pasting it into the console.

This code returns the image of the first product card: 

document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('example_productImage_Selector')

Step 2: Define the SKU location

There are two methods of defining the SKU location:

Option 1: Using the data attribute (recommended)

The out-of-the-box template was developed for customers who have SKUs on the product cards as a data attribute. Define the name of the data attribute containing the product's SKU. The data attribute might have different names but should be easily identifiable as a SKU. You can validate this by checking your Dynamic Yield product feed for the matching value to make sure that the SKU returns the expected product information.

Validate the data attribute definition:
Verify that the data attribute name is correct by inserting your data attribute name into the following code snippet and then pasting it into the console.

This code returns the SKU of the first product card: 

document.querySelectorAll('example_ProductCard_Selector')[0].getAttribute('example_attribute_name')

Example: 

DY Demo Shop › Attribute name = data-dy-sku

Option 2: Product URL

If Option 1 is not possible and the product URL in each card includes the product SKU in a clear way, use this option.

Delimiters need to be specific. For example: product-id=SKU/ › product-id and /
When the delimiters are not specific, the regular expression doesn't return the SKU.

Example:

Delimiters: “p/” and “”(empty string)

URL: https://www.demoshop.net/de/p/90630584

Returned: SKU 90630584 

Example with product URL and delimiters that don’t work:

Delimiters: “-” & “Black” 

Product URL: https://www.demostore.com/eu/shop/edits/bestsellers/stride-waterproof-parka-SB4932_Black.html
Reason: “-” is repeated several times in the URL and “Black” is dynamic and won’t work for every product. This scenario results in either nothing being returned or something that is not the desired SKU. 

Validate the delimiters:
You can validate that your delimiters and method work by adding the delimiters and the Items class into the following code snippet and then past it into the console on your PLP.

This code returns the SKU:

const stringBefore = 'BEFORE_DELIMITER';
const stringAfter = 'AFTER_DELIMITER';
let regexSetup = stringAfter === '' ? '(' + stringBefore + ')(.*)(?=' + stringAfter + ')' : '(' + stringBefore + ')(.*?)(?=' + stringAfter + ')';
document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('a').getAttribute('href').match(new RegExp(regexSetup, ''))[2]

Option 3: Image URL

If Option 1 is not possible and the product image URL for each card contains the product SKU in a clear way, use this option.

Delimiters need to be specific. For example, product-id=SKU/ › product-id and /
When the delimiters are not specific, the regular expression doesn't return the SKU.

Example:

Delimiters: “img/p/” and “”(empty string)

URL: https://static.demoshop.com/img/p/6104478-18029579-large.jpg

Returned: SKU 6104478 

Validate the delimiters:
You can validate that your delimiters and method work by adding the delimiters and the Items class into the following code snippet and then past it into the console on your PLP.

This code returns the SKU:

const stringBefore = 'BEFORE_DELIMITER';
const stringAfter = 'AFTER_DELIMITER';
let regexSetup = stringAfter === '' ? '(' + stringBefore + ')(.*)(?=' + stringAfter + ')' : '(' + stringBefore + ')(.*?)(?=' + stringAfter + ')';
document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('img').getAttribute('src').match(new RegExp(regexSetup, ''))[2]

Step 3: Define your badging logic

You can badge based on either a recommendation strategy or product performance:

• Recommendation strategy: Select a strategy. Based on the recommendation response, products on the category page are badged. 
• Product performance: Set up social proof criteria. Products that meet the criteria are badged. 

Step 4: Create your badge design

Use your preferred design tools to create the badge design that fits your needs.

Troubleshooting

If you completed all the steps correctly and validated your work, and you still have issues with your use case, chances are the problem k somewhere outside of the template itself.

For recommendation badging: 

• Check that your strategy is in fact returning products on the targeted page, and that the products in the recommendation strategy exist on the page. 

• If you're using popularity as a strategy, select Popular in Category for a higher chance of products being badged. 

For social proof badging: 

• Check that the Product Performance API is enabled for your Dynamic Yield site (in General Settings).  
• Check whether the Product Performance API is actually returning data. 

Still have questions or concerns? Reach out to your account team.