In this lesson, you will learn and implement the workflow to display a inline recommender on product pages to increase retention and sales.
Recommending personalized products while a contact browses your eCommerce will help increase the chances of purchase and their value. With Connectif, you can easily add recommender content created as inline web content.
Objective: Retention and conversion.
Elements used: Inline.
Implementation time: 2 hours.
We recommend that you follow all the steps and implement this strategy from scratch in your account, but if you need a quick way, the Workflow Template Directory has the Product Page Recommender template available for you to work with.
Lesson Summary
In this lesson you will learn:
- The "On visiting a product" node to detect contact visits to a product page.
- The "Get products" node to obtain the products that will later be displayed in some type of content.
- How to create and insert inline content on the page, in this case, recommendations.
By the end of this lesson, you will have created in your account:
The strategy containing this workflow, through which you will display an inline after the product page at the moment a contact is visiting that product. Depending on the related products obtained, a more precise inline will be shown or other recommended items will be sought.
Strategy Configuration
STEP 0. Create the workflow
How to create the workflow for this strategy
1. In your Connectif account, click "Workflows > Create new Workflow" and then click Create blank Workflow.
2. Click (Edit) and name it "Product Page Recommender".
3. Click Apply to save the new workflow name.
STEP 1. "Start" node
How to configure the "Start" node for this strategy
(This node sets the audience to which the workflow will be directed).
4. Click (Edit node configuration) of the "Start" node.
5. Under Select a restriction, check "My entire list" and select the option "My entire list" from the dropdown.
6. Under Select data source, check "All existing and new".
7. Click Update.
In this step, we told Connectif that the workflow activates for all contacts visiting the website, both new and existing.
STEP 2. "On visiting a product" node
How the "On visiting a product" node works
This node is used to react at the moment a contact visits a product page.
In the node interface, you configure the specific characteristics of the products that will trigger it.
How to configure the "On visiting a product" node for this strategy
(This node will activate the next workflow action—in this case, sending the inline for push notification subscription—when a contact visits your website).
8. In the node selection menu, go to "Triggers > eCommerce" and drag the "On visiting a product" node to the editor, connecting it to the "Start" node.
9. Click (Edit node configuration) of the "On visiting a product" node.
10. Click Limitations and uncheck "Disable after triggering".
11. Click Update.
In this step, we told Connectif that when a contact visits any product page from any device, it should proceed to the next action.
STEP 3. First "Get products" node
How the "Get products" node works
This node is one of the most useful on the platform. It is used to filter products that will later be displayed in some type of content. It is configured across different screens to specify which products to get and how to obtain them:
Select use cases: To choose groups of products that the node will obtain. Up to 2 can be selected, with the first having priority.
Use case configuration: To establish, for each case, the products to obtain, product sources, conditions or filters they must meet, and the order in which they should be displayed.
Summary: To set the total number of products to obtain, whether to limit the total number returned, and whether to exclude products obtained in previous nodes.
How to configure the "Get products" node for this strategy
(This node will automatically obtain products related to the product being visited, from the same category and brand).
12. In the node selection menu, go to "Actions > eCommerce" and drag the "Get products" node to the editor, connecting it to the "On visiting a product" node.
13. Click (Edit node configuration) of the "Get products" node.
14. To select use cases, drag Automatically related to a product to the right block and click Next. This way, products automatically related to the visited product will be obtained.
15. In Main case configuration, enter "12" in Number of products to obtain, so Connectif obtains up to 12 items related to the visited one.
16. Under Select product source, select All products, so Connectif searches your entire catalog.
17. Under Select related product, select “Product (On visiting a product)” so that Connectif imports data from the page the contact visited.
18. Under Configure conditions to define a specific product set:
Click Add another condition and select “Categories” from the dropdown. On the right, select “Imported data” and after clicking “Select imported data”, choose “On visiting a product > Categories”. This makes Connectif obtain products from the same category as the visited one.
- 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 visiting a product > Brand”. This makes Connectif obtain products from the same brand as the visited one.
19. Under Select an order, choose "Sort by descending rating" and check "Randomize the order of obtained products". This way, Connectif selects the 12 highest-rated products, but the content displays them in random order.
20. Click Next.
21. In the last configuration step of the node, Summary, locate the Number of products to obtain section and enter “12” to set the maximum products displayed.
22. Uncheck “Fill products up to the selected limit” so Connectif won't add extra content if fewer than 12 products meet the conditions.
23. Check “Exclude products exported by previous nodes” to ensure the visited product is not shown.
24. Click Finish.
In this step, we told Connectif to obtain, for display in the inline, products automatically related to the one the contact visited. The node configuration will show up to 12 products from the same brand and category, selected based on their ratings.
STEP 4. "Check value" node
How to configure the "Check value" node for this strategy
(This node checks if the size of the recommended products list is greater than 4).
25. In the node selection menu, go to "Conditions > System" and drag the "Check value" node to the editor, connecting it to the "Get products" node.
26. Click (Edit node configuration) of the "Check value" node.
27. Drag the "List size" field from "Get products" to the left block.
28. In the "Operator" column, select "Is greater than".
29. Drag the Literal field to the right block and set the value to "4".
30. Click Update.
In this step, we told Connectif to check if the "Get products" node retrieved more than 4 related products to the visited item to continue showing the obtained products. If fewer than 5 products are found, the flow continues through another branch to obtain more products via a second "Get products" node.
STEP 5. First "Send web content" node
How to create the inline for this strategy
(In this step, you will create the inline containing the related products, which the node will display when the contact visits the product page).
31. In the node selection menu, go to "Actions > Web" and drag the "Send web content" node to the editor, connecting it to the "Check value" node.
32. On the connection between this node and the previous one, click the circle until it shows "Yes". This indicates to Connectif to show the inline if more than 4 different related products appear.
33. Click (Edit node configuration) of the "Send web content" node and Create new content to generate new content.
34. When creating new content, select the type Inline, assign it a name, and click Create web content.
35. In the Tools panel, click the General tab to edit the general appearance parameters of your inline. You can also access this by clicking General properties in the design panel.
36. Click the Components tab to access options for creating and designing your inline.
- In Layout, choose a one-column structure.
- In Elements, add a "Text" element to include content and edit it as you like.
- In Elements, add a "Products" element to display recommended products and click the (Edit element) button:
- Assign it a name, a type (in this case, Carousel), and a template (in this case, Product with brand).
- In structure, choose how many items will display simultaneously on desktop and mobile. In the example, 4 on desktop and 1 on mobile were selected.
- Optionally, select a rotation time. If set to 0, automatic rotation is disabled.
37. Click Save to keep changes in design and then Return to selector to go back and finish node configuration.
How to configure the "Send web content" node for this strategy
38. Select the corresponding Inline content and click Next.
39. Locate the appropriate selector on your website to display the content. You can follow these example steps:
Access the page on your website where you want to add the embedded content.
View the block you want to use as a reference.
Open the browser's developer tools console (DevTools).
Select the Elements tab in the console to view the HTML structure.
- Click the Inspect icon, the first on the left in the top menu.
- Hover your mouse over the content area you plan to use as a reference. Click when the selection is correct so the tag is highlighted in the console.
- Click on the content in the Elements tab of the console and use the keyboard shortcut Control + F to search for the tag or attribute name. If there is only one match (as in this example), it is suitable and can be used. Copy the name and close the developer console. If there are multiple matches, you must find another unique selector.
40. Once you locate and copy the selector, return to the "Send web content" node configuration in Connectif, add it under Configuration to display the content, and click Next. (In the screenshot, we continue with the previous example; you should enter the selector name you chose).
41. Map the product variables from the "Get products" node—in this case, the recommended products—to personalize the inline with the items obtained and their information. Link Connectif fields (left column) to your email variables (right column):
Drag the Name field to match the variable {{name}}. This way, the product name from your catalog will be included in that variable.
- Drag the Detail URL field to match the variable {{buttonUrl}}. This way, the product page URL will be included.
- Drag the Image URL field to match the variable {{imageUrl}}. This way, the product image will be included.
- Drag the Unit price field to match the variable {{unitPrice}}. This way, the current unit price of the product will be included.
- Drag the Literal field to match the variable {{buttonText}} and enter the text you want the button to display. This way, the button text you defined will be included.
42. Click Finish.
In this step, we told Connectif to show the inline with the product recommendation we just created to visitors who reach this part of the flow. In this strategy, we have not added limitations to the inline so it always shows when conditions are met.
STEP 6. Second "Get products" node
(This node will obtain the most visited products in the last month, from the category and brand of the visited product).
43. In the node selection menu, go to "Actions > eCommerce" and drag the "Get products" node to the editor, connecting it to the "Check value" node.
44. On the connection between this node and the previous one, click the circle until it shows "No".
45. Click (Edit node configuration) of the "Get products" node.
46. To select use cases, drag "Most visited products" to the right block and "Best-selling products" to the additional use case. This way, the most visited products are obtained, and if insufficient, the best-selling ones are obtained. Click Next.
47. In Main case configuration, complete the following:
Enter "12" in Number of products to obtain so Connectif obtains up to 12 items.
Under Select product source, select All products so Connectif searches your entire catalog.
-
Under Configure conditions to define a specific product set:
Click Add another condition and select “Categories”. On the right, select “Imported data” and after clicking “Select imported data”, choose “On visiting a product > Categories”. This makes Connectif obtain products from the same category as the visited one.
Click Add another condition and select “Brand”. On the right, select “Is included in” and after clicking “Select imported data”, choose “On visiting a product > Brand”. This makes Connectif obtain products from the same brand as the visited one.
Under Select visit time period, choose Most visited in the last month so Connectif obtains the most visited products of the last month.
Check "Randomize the order of obtained products" so the product display order always varies.
48. Click Next.
49. In Additional case configuration, complete the following:
Select "12" in Number of products to obtain.
Click Add another condition and select “Categories”. On the right, select “Imported data” and after clicking “Select imported data”, choose “On visiting a product > Categories”.
Under Select visit time period, choose "Best sellers in the last month" and check "Randomize the order of obtained products".
50. Click Next, and in Summary, locate the Number of products to obtain section and enter “12”. Then, activate "Fill with products up to the selected limit" and "Exclude products exported by previous nodes".
51. Click Finish.
In this step, we told Connectif to obtain, for display in content, the most visited and best-selling products of the last month. The node configuration will show up to 12 products from the same brand and category, selected based on their ratings. If 12 products meeting these conditions do not exist, Connectif’s algorithm will look for complementary products.
STEP 7. Second "Send web content" node
How to create the inline for this strategy
(In this step, you will send the same inline created in Step 5, but this time it will contain products obtained from the second "Get products" node).
52. In the node selection menu, go to "Actions > Web" and drag the "Send web content" node to the editor, connecting it to the second "Get products" node.
53. Click (Edit node configuration) of the "Send web content" node and select the inline you created in Step 5.
54. Click Next.
55. Under Configuration, add the appropriate selector to display the content and click Next. If you need more information on how to find it, you can return to Step 5 for guidance.
56. Map the product variables from the second "Get products" node—in this case, the most visited products—so the inline shows the items obtained in that node and their information. You can use this image as reference:
57. Click Finish.
In this step, we told Connectif to show the inline with the product recommender we just created to visitors who reach this part of the flow. In this strategy, we have not added limitations to the inline so it always shows when conditions are met.
Result
After completing the steps, you will have created your strategy to display an inline recommender that appears after the product page at the moment a contact is visiting the product.
Continue your journey
Now that you have completed this lesson, continue with the next one, where you will create a remarketing strategy in your account.
Congratulations!
You have reached the end of the lesson.
Return to the course
Access the full course index and explanation of each lesson at this link.
Related readings
If you want to deepen any of the learnings acquired in this lesson, you can access the guide documentation:
- "Get products" node, to understand in depth the functioning of this node you used in this strategy and how to leverage it in other workflows.
- Insert an inline in your eCommerce, in case you have any doubts 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.