Introduction

Creating engaging sales experiences is crucial for driving customer conversions and boosting revenue. Using the Landing Pages feature of MoEngage, you can create personalized landing pages for users to browse and preorder products dynamically.

Advantages of creating a sales page using landing pages

• Dynamic product display: Products are automatically fetched and displayed from your product catalog via recommendations, ensuring the landing page always shows the latest items without manual updates.
• Seamless user experience: Creates a smooth flow for customers, allowing them to browse products and click directly through to the specific checkout page for each item from a single landing page.
• Reduced manual effort: Eliminates the need to manually build and update product listings on the landing page whenever the catalog changes (For example, adding new products, changing prices/links).
• Enhanced sales efficiency: Streamlines the process of showcasing multiple products dynamically, making it easier for users to discover and purchase, potentially boosting conversions.
• Centralized product management: Leverages MoEngage Catalogs to manage all product information (title, image, checkout link) in one place, ensuring consistency and simplifying updates.

We will achieve this use case in three steps:

1. Step 1: Create a Product Catalog
2. Step 2: Create a Recommendation
3. Step 3: Create the Landing Page

Expected Result

Users visiting the dynamic sale landing page can browse products dynamically based on recommendations. Each product displays the product title, an image, and a Preorder now button. Clicking the button will direct them to the respective product's checkout page, as specified in the catalog, ensuring a seamless purchasing experience.
The products are dynamically fetched from the recommendation, ensuring that any updates to the catalog, such as adding new products or modifying existing ones, are immediately reflected on the landing page without requiring manual edits.

Step 1: Create a Product Catalog

1. On the left navigation menu in the MoEngage dashboard, click Content, and then click Catalogs.
   
2. On the Catalogs page, click Create Catalog.
   
3. In the Catalog name box, type a name for the catalog to identify it, and click Submit.
   
4. Prepare a CSV file with the following columns: title (the product's name), image_link (the URL of the product image), and link (the URL that leads to the product's checkout page, such as https://www.example.com/productA/checkouts). An example feed might look like the following image:
   
5. On the Catalogs page, click the newly created catalog.
   
6. Click Add Feed. The Create feed pop-up window appears.
   
7. Upload the CSV file from your computer and click Submit. For information on using URL upload, refer to Creating a Catalog.
   
8. After a successful upload, your item feed will look something like this.
   

In the next step, we will create a recommendation for our catalog.

Step 2: Create a Recommendation

In this section, we will create a recommendation to display all catalog items.

1. On the left navigation menu in the MoEngage dashboard, click Content, and then click Recommendations.
2. On the Recommendations page, click + Create recommendation.
3. In the Select recommendation model section, we will use Item attributes type. You can learn more about recommendations here.
   
4. Click Next.
5. Enter a name and description for your recommendation.
6. In the Catalog list, select the catalog created in Step 1.
   
7. Set the filter as shown below:
   
   This will ensure all the products are shown when this recommendation is used. For more information on using filters, refer here.
8. Click Create.

In the next step, we will create a landing page with the recommendations.

Step 3: Create the Landing Page

In this section, we will create a landing page with an embedded HTML element to dynamically render the products in a grid layout, each with a Preorder now button linking to a checkout page.

1. On the left navigation menu in the MoEngage dashboard, click Content, and then click Landing pages.
2. On the Landing pages page, click Create a landing page.
3. Enter a name for the landing page to identify and manage it easily, and select appropriate tags to categorize it.
4. In the Content section, click Blank Template.
   
5. Add the desired text and images to your page. For more information, refer to Landing Page Editor.
6. From the editor's left pane, drag and drop the "Embed" element onto the page. This element allows you to insert custom HTML code for dynamic content.
7. Within the embed element, click the first icon in the settings bar and paste the following HTML code, replacing YOUR_RECOMMENDATION_NAME with your recommendation name (for example, LP_test):
   
   HTML

   <style>
   .container {
   display: grid;
   grid-template-columns: auto auto auto;
   background-color: dodgerblue;
   padding: 10px;
   }
   .container > div {
   background-color: #F1F1F1;
   border: 1px solid black;
   padding: 10px;
   font-size: 30px;
   text-align: center;
   }
   </style>
   <body>
   <div class="container">
   {% if ProductSet.YOUR_RECOMMENDATION_NAME %}
   {% for product in ProductSet.YOUR_RECOMMENDATION_NAME[0:6] %}
   <div>
   <h1>{{product.title}}</h1>
   <img src="{{product.image_link}}" height="200px" width="200px"><br>
   <a href="{{product.link}}" target="_blank">Preorder now</a>
   </div>
   {% endfor %}
   {% else %}
   MOE_NOT_SEND
   {% endif %}
   </div>
   </body> 

   

8. Customize the CSS within the embed element to match your preferred design, such as changing colors or grid layout. For example, you can modify the background color or adjust the grid columns.
9. Optionally, you can drag and drop additional elements, such as text or images (for example, a logo) above the product grid to enhance the landing page's appearance.
10. Configure the URL and settings for your landing page. For more information, refer to Create a Landing Page.
11. Click Publish to publish your landing page. The page will appear as shown below.
    

Verification

To verify that the dynamic sale landing page is working correctly:

1. Visit the published landing page and ensure the grid displays the products from your catalog, each with a title, image, and functional Preorder now button.
2. Click Preorder now to confirm it directs to the correct checkout page for each product, as specified in the catalog.

Conclusion

In this use case, we created a dynamic sale landing page by setting up a product catalog, configuring a recommendation, and embedding HTML for dynamic product display. This approach ensures users can browse and preorder products seamlessly, enhancing sales efficiency and customer engagement. Now that we have published the landing page, we can track views and clicks to understand how well our campaign is performing.