In this lesson, you’ll learn how to implement the workflow to display an inline recommender on product sheets, to improve retention and sales.
Recommending personalized products while a contact browses your ecommerce site will help you increase the likelihood that they make a purchase, and the value of those purchases.
Objective: Retention and conversion.
Elements used: Inline.
Implementation time: 2 hours.
We recommend following all the steps and implementing this strategy from scratch in your account. However, if you need a shortcut, you can use the Product sheet recommender template in the Workflows Templates Directory.
Lesson summary
In this lesson, you’ll learn about:
- The “On product visit" node, to detect contacts’ visits to a product file.
- The "Fetch products" node, to obtain the products that will be displayed later in some type of content.
- How to create and insert inline content on the page – in this case, the recommendation banner.
At the end of the lesson, you will have created in your account:
The strategy that contains this workflow, whereby you’ll show an inline message after the product sheet when a contact is visiting that product. Depending on the related products obtained, a more precise inline banner will be shown or the algorithm will try to obtain other recommended items.
Strategy configuration
STEP 0. Workflow creation
How to create the workflow for this strategy
1. In your Connectif account, click "Workflows > Create new workflow" and then Create blank workflow.
2. Click (Edit) and name it "Product sheet recommender".
3. Click Apply to save the new name of your workflow.
STEP 1. "Start" node
How to configure the "Start" node for this strategy
(This node will establish the target audience for the workflow).
4. Click (Edit node settings) for the “Start” node.
5. In Select limitation, check "All my list" and select the option "All my list" from the drop-down menu.
6. Under Select data source, check “All existing and new”.
7. Click Update.
In this step, we have told Connectif to activate the workflow for all contacts that visit the website, both new and existing.
STEP 2. “On product vist" node
How the "On product visit" node works
This node is used to react when a contact visits a product page.
In the node interface, you can configure the specific features of the products that will trigger it.
How to configure the "On product visit" node for this strategy
(This node will cause the next action in the workflow to be triggered, in this case sending the inline message for push subscription when a contact visits your website).
8. In the node selection menu, go to "Triggers > Ecommerce" and drag the "On product visit" node into the editor so that it connects to the "Start" node.
9. Click (Edit node settings) in the "On product visit" node.
10. Under Limitations, uncheck the "Deactivate after triggering" box.
11. Click Update.
In this step we have told Connectif to send the contact to the next action when they visit any product page from any device.
STEP 3. First “Fetch products” node
How the "Fetch products" node works
This node is one of the most useful on the platform. It is used to filter products that will be displayed later in content of some kind. In its settings, on different screens, you can configure which products will be obtained and how:
- Select the use cases. To choose groups of products that the node will fetch. Up to two can be selected, with the first having priority.
- Configuration of the use cases. To establish the products to be fetched in each case, their origin, the conditions or filters that they must meet and the order in which we want to display them.
- Summary. To set the total number of products to be fetched in the node, if the total number of products to be returned is limited, and if you want to exclude products obtained in previous nodes.
How to configure the "Fetch products" node for this strategy
(This node will automatically fetch related products to the one visited, of the same category and brand).
12. In the node selection menu, go to "Actions > Ecommerce" and drag the "Fetch products" node into the editor so that it connects to the “On product visit” node.
13. Click (Edit node settings) in the “Fetch products” node.
14. To select the use cases, drag Automatically related to a product to the block on the right and click Next . This way, the products that are automatically related to the one visited by the contact will be fetched.
15. In Main use case settings, indicate "12" next to Number of products to fetch, so that Connectif fetches up to 12 items related to the product visited.
16. Under Select the source of the products, select All products to have Connectif search your entire catalog.
17. For Select the related product, select “Product (On product visit)”, so that the data that Connectif imports comes from the page visited by the contact.
18. Under Configure the conditions to define a specific set of products:
- Click Add another condition and select “Categories” from the dropdown. On the right, select “Imported data” and, after clicking “Select imported data”, choose “On product visit” > Categories”. As a result, Connectif will fetch products from the same category as the one visited.
- Click Add another condition and select “Brand” from the dropdown. On the right, select “Is included in” and, after clicking “Select imported data”, choose “On product visit > Brand”. This way, Connectif will fetch products of the same brand as the one visited.
19. In Select order, choose "Sort by descending rating" and check the box "Shuffle the fetched products". Connectif will now choose the 12 highest-rated products but they will be ordered randomly in the content.
20. Click Next .
21. In the last step of the node configuration, Summary, locate the section Number of products to fetch and indicate “12” to make this the maximum number of products to display.
22. Uncheck the box “Fill with products until selected limit” so that Connectif does not add additional content if there aren’t 12 products that meet these conditions.
23. Check the box “Exclude the products exported by the nodes before this one” to ensure that the products visited are not displayed.
24. Click Finish .
In this step we have told Connectif to fetch products automatically related to the one the contact has visited, to display in the inline content. With the node configuration, up to 12 products of the same brand and category will be displayed, selected based on their ratings.
STEP 4. “Check value” node
How to configure the "Check value" node for this strategy
(Este nodo comprueba si el tamaño de la lista obtenida de productos recomendados es mayor que 4).
25. In the node selection menu, go to "Conditions > System" and drag the "Check value" node into the editor, so that it connects to the "Fetch products" node.
26. Click (Edit node settings) for the “Check value” node.
27. Drag the "List size" field from "Fetch products" to the block on the left.
28. In the "Operator" column select "Is greater than".
29. Drag the Literal field to the block on the right and set a value of "4".
30. Click Update.
In this step we have told Connectif to check in the "Fetch products" node if more than four products related to the visited item have been fetched, to continue through the flow showing the products obtained. If the number of resulting products is not greater than four, it will continue to another branch to get more products through a second "Fetch products" node.
STEP 5. First “Send web content” node
How to create the inline content for this strategy
(In this step you’ll create the inline content that will contain the related products, which the node will show when the contact visits the product page).
31. In the node selection menu, go to "Actions > Web" and drag the "Send web content" node into the editor so that it connects to the "Check value" node.
32. At the junction of this node with the previous one, click on the circle until "Yes" appears. This will instruct Connectif to display the inline content if more than four different related products appear..
33. Click (Edit node settings) in the “Send web content” node. Click Create new content to generate a new content.
34. When creating new web content, select Inline as the type, give it a name, and click Create web content.
35. In the Tools (3) panel, click the General tab to edit the overall appearance of your inline content. You can also access it by clicking on General properties in the design panel.
36. Click the Components tab to access the design options for your inline content.
- Under Layout, choose a single column structure.
- In Elements, add a "Text" type element to insert into the content and edit it to your liking.
- In Elements, add a "Products" type element to display the recommended products and click the button (Edit element):
37. Click Save to keep your changes to the layout and Back to selector to go back and finish configuring the node.
How to configure the "Send web content" node for this strategy
38. Locate the appropriate selector on your website to display the content. You can follow the steps in this example:
- Go to the page of your website where you want to add the embedded content.
- View the block you want to use as a reference.
- Open the browser's (DevTools) console.
- Select the Elements tab in the console to view the HTML structure.
- Click the Inspect icon, the first one on the left in the top menu.
-
Hover your mouse cursor over the content area you plan to use as a reference. Click when the selection is appropriate so that the label is highlighted on the console.
-
Click on the content of the console's Elements tab and use the Control+F keyboard shortcut to search for the name of the tag or attribute. If it only has one match (as in this example), it is OK and you can use it. In that case, copy the name and close the developer console. If there is more than one match, you will need to locate another unique selector.
40. Once you've located and copied the selector, go back to the "Send web content" node settings in Connectif, add it under Settings to display content, and click Next . (In the screenshot we continue with the previous example, you must indicate the name of the selector you have chosen).
41. Associate the product variables from the “Fetch products” node, in this case, the recommended products, to customize the inline content with the items obtained from that node and their information. To do this, link the Connectif fields (left column) with the variables of your email (right column):
- Drag the Name field to match the {{name}} variable. This variable will now include the name of the product that appears in your catalog.
- Drag the Detail URL field to match the {{buttonUrl}} variable. This variable now will include the address of the product file that appears in your catalog.
- Drag the Image URL field to match the {{imageUrl}} variable. The product image will now be included in that variable.
- Drag the Percentage discount field to match the variable {{percentage_discount}}. This variable will now include the discount percentage of the product that appears in your catalog.
- Drag the Unit price field to match the {{unitPrice}} variable. That variable will now include the current unit price of that product.
- Drag the Original unit price field to match the {{originalPrice}} variable. As a result, this variable will include the original unit price of that product.
- Drag the Literal field to match the {{buttonText}} variable, and type the text you want the button to display into it. The text of the button that you have defined will now be included in that variable.
42. Click Finish .
In this step we have instructed Connectif to show the inline content with the product recommendation we have just created to visitors who arrive at this part of the flow. We haven’t added limitations to the inline content in this strategy so it is displayed whenever the conditions are met.
STEP 6. Second “Fetch products” node
(This node will obtain the most visited products in the last month from the category and brand of the product visited).
43. In the node selection menu, go to "Actions > Ecommerce" and drag the "Fetch products" node into the editor so that it connects to the "Check value" node.
44. At the junction of this node with the previous one, click on the circle until "No" appears.
45. Click (Edit node settings) in the “Fetch products” node.
46. To select the use cases, drag "Most visited products" to the block on the right and "Best sellers" to the additional use case. This way, the most visited products will be fetched and if these are not enough, the best sellers will be fetched. Click Next .
47. Under Main use case settings, complete the following settings:
- Indicate "12" in Number of products to fetch, so that Connectif fetches up to 12 items.
-
In Select the source of the products, select All products, so that Connectif searches your entire catalog for products to display.
- Under Configure the conditions to define a specific set of products:
-
Click Add another condition and select “Categories” from the dropdown. On the right, select “Imported data” and, after clicking “Select imported data”, choose “On product visit” > Categories”. As a result, Connectif will fetch products from the same category as the one visited.
-
Click Add another condition and select “Brand” from the dropdown. On the right, select “Is included in” and, after clicking “Select imported data”, choose “On product visit > Brand”. This way, Connectif will fetch products of the same brand as the one visited.
-
-
Under Select the time period of the visits, choose Most visited in the last month, so that Connectif fetches the most visited products of the last month.
- Check the "Shuffle the fetched products" box, so that the order in which the products are displayed always varies.
48. Click Next .
49. Under Additional use case settings, complete the following settings:
- Select "12" under Number of products to fetch.
- Click Add another condition and select “Categories” from the dropdown. On the right, select “Imported data” and, after clicking “Select imported data”, choose “On product visit” > Categories”.
- Under Select the time period of the visits, choose "Best sellers in the last month" and check the "Shuffle the fetched products” box.
- Click Next .
50. In Summary, locate the Number of products to fetch section and indicate “12”. Then select "Fill with products until selected limit" and "Exclude the products exported by the nodes before this one".
51. Click Finish .
In this step we have instructed Connectif to fetch the most visited and best-selling products of the last month to display in the content. With the node configuration, up to 12 products of the same brand and category will be displayed, selected based on their ratings. If there aren’t 12 products that meet these conditions, the Connectif algorithm will search for complementary products.
STEP 7. Second “Send web content” node
How to create the inline content for this strategy
(In this step you’ll send the same inline content we created in Step 5 but in this case it will contain the products fetched in the second "Fetch products" node).
52. In the node selection menu, go to "Actions > Web" and drag the “Send web content” node into the editor so that it connects to the “Fetch products” node.
53. Click (Edit node settings) in the “Send web content” node and select the inline content you created in Step 5.
54. Click Next .
55. In Settings add the appropriate selector to display the content and click Next . If you need more information on how to locate it, you can go back to Step 5 for instructions.
56. Connect the product variables of the second "Fetch products" node, in this case, the most visited products, so that the inline content shows the products obtained in that node and their details. You can use this picture for reference:
57. Click Finish .
In this step we have told Connectif to show the inline content with product recommender that we have just created to the visitors that arrive at this part of the flow. We haven’t added limitations to the inline content in this strategy so it is displayed whenever the conditions are met.
Result
After completing the steps, you will have created your strategy to display an inline recommender that will appear after the product sheet when a contact visits that product.
Continue your tour
Now that you've completed this lesson, move on to the next one and create a Remarketing strategy in your account.
Congratulations!
You’ve reached the end of the tutorial.
Back to course
Access the complete course index and explanation of each lesson here.
Related reading
If you want to dive deeper into any of the topics covered in this lesson, you can access the guide documentation:
- Insert inline content in your ecommerce site, if you have any questions about how to locate and insert the ID.
- And, if you have VTEX IO, follow the steps in this article to add web content.
- Show discount percentage only when there is a discount, to learn how to highlight products when they are discounted, compared to others that are not.