Trigger a Lightbox Action for Out-of-Stock Items

You can create a target in Target Builder to locate this site element and then deploy that custom target in a Web experience to trigger a variety of actions whenever the targeted site element is on a page of your site.

For example, lightboxes are useful for conveying important information to a customer in a way that forces them to interact with and pay attention to your content. The lightbox action in this example is paired with a custom WHO target so that the a customer only sees the lightbox when they land on a product detail page for an out-of-stock product.

Building the Custom 'Out of Stock' Target

Follow these steps to create the custom target in Target Builder.

Out-of-stock items are noted on the use case site by the oos_product ID, which can be viewed using Google Chrome's Developer tools. Right-click the "Out of Stock" heading element, and then click Inspect.

1. Navigate to a product detail page on your site for an out-of-stock product.
2. Right-click the element on the page that contains the "Out of stock" message, and then select the option from the contextual menu to open your browser's Web developer tools. View the page's code to determine the site element that contains that message.

   

3. In a new browser tab, launch the Monetate platform. Click COMPONENTS in the top navigation bar, and then select Targets.

   

4. Click CREATE TARGET.

   

5. Navigate to the page on your site that you viewed in step 1. In Target Builder, click the HTML Element tab and then click Element Content (text).

   

6. Use the element selector to find the "Out of Stock" selector, and then click the forward arrow.

   

7. On the Details tab, input as the Element Content value the text that must appear in the targeted element. Leave the Element Content operator set to EQUALS so that only pages on which the exact text is present are targeted.

   

8. Because this target should work on any page on your site, no conditions are necessary. Click the forward arrow.
9. Give the target a title, a description, and a subcategory, and then click CREATE & EXIT.

   

The custom target is now ready to be used in a Web experience.

Building the Experience

Follow these steps to add a custom target to a Web experience.

1. Create a new Web experience.
2. Configure the WHY settings.
3. Click WHO and then click ADD TARGET.

   

4. Click Custom Targets.

   

5. Click the custom target that you created in the previous section.

   

6. Leave the toggle set to INCLUDE. Click SAVE.

   

7. Configure the WHAT settings.
   1. Click WHAT and then click ADD ACTION.

      

   2. Click Lightboxes.

      

   3. Click the action template that you want to use.

      

   4. Configure the lightbox template as necessary. See the documentation in the Lightboxes category for guidance on the required and optional settings for different types of lightbox actions.
8. As necessary, configure the WHEN settings.
9. Preview the experience. See Activate an Experience for Preview and Testing and Preview Mode Limitations to determine if the custom target you selected in step X limits your ability to use the PREVIEW button.