Use Sitecore Personalization With Coveo

Customization lets you change a search interface by statically changing its look and feel. On the other hand, personalization lets you change a search interface dynamically based on some external conditions. For example, you may want your facets to appear and behave differently depending on:

  • The device that’s currently being used.

  • The location of the current visitor.

  • The type of the current visitor (i.e. its Pattern Card).

This page covers how you can dynamically change the look and feel of a component based on external conditions.

The following steps let you use Sitecore personalization with Coveo. Each example builds on the previous one, so ensure you complete all of them in order.

Remember that component personalization is a Sitecore feature. Sitecore processes personalization rules server side, whereas Coveo events that update a search interface (e.g., a search query) occur client side. Sitecore doesn’t reprocess personalization rules upon a Coveo-powered search page client-side event.

Also note that Coveo search interface events aren’t recorded in the Sitecore Experience Database (xDB) unless you add the Coveo Send Analytics To Sitecore rendering to your search interface. Since Sitecore personalization rules are based on events recorded in the xDB, adding the Coveo Send Analytics To Sitecore rendering is a prerequisite for Coveo search interface events-based rules to work.

Hiding a Component Based on Specific Conditions

You can hide a Coveo Facet component whenever you’re using a mobile device.

  1. Open your Coveo-powered search page in the Experience Editor.

  2. Select the Coveo Facet component.

  3. In the floating toolbar, select the Create or edit personalization for this component option.

    Personalize_1

  4. In the Personalize the component dialog, click the Add personalization rule + sign button.

  5. Name your rule Hidden on Mobile.

  6. Choose Edit rule.

    Personalize_2

  7. In the Rule Set Editor dialog, among the Device rules, choose where device type is value and set the value to Mobile Phone. Click OK.

  8. Back in the Personalize the component dialog, check Hide.

  9. Choose OK.

  10. In the Coveo Facet floating toolbar, choose the Hidden on Mobile condition.

  11. Validate that your Coveo Facet component is now hidden.

    Personalize_3

Changing a Component Parameters Based on Specific Conditions

Here is how you can change the parameters of a Coveo Facet component whenever you’re using a mobile device. By doing so, you’re modifying the condition that you created in the previous section.

Step 1: Create a Facet Parameters item

To create a facet parameters item, see Data Source Branch Templates and Add Related Controls.

Step 2: Create a Condition That Uses Your New Facet Parameters Item

  1. Open your Coveo-powered search page in the Experience Editor.

  2. Select the Coveo Facet rendering.

  3. In the floating toolbar, select the Create or edit personalization for this component option.

  4. In the Personalize the component dialog, change the name of the Hidden on Mobile condition for Customized Parameters.

  5. Select the Show option.

  6. Under Content, select next to the field.

    Personalize_4

  7. In the Select the Associated Content dialog, create a new data source called Coveo Facet For Mobile. Click OK.

  8. Back in the Personalize the Component dialog, choose OK.

  9. In the Coveo Facet floating toolbar, choose the Customized Parameters condition.

  10. In the Coveo Facet floating toolbar, select the Edit the rendering’s data source option. This should be the leftmost option in the toolbar. This will open the Coveo Facet For Mobile data source you just created.

  11. In the Field field, select the field your facet usually targets.

  12. Set the Number of values field value to 3.

  13. Validate that your Coveo Facet rendering now displays only three values when the Customized Parameters condition is selected.

    Personalize_5

Personalizing a Component Based on the Current Visitor

In addition to the Device Detection rules that we used in the previous examples, you can also use the Visit rules. These are related to the Sitecore Experience Database (xDB).

Personalize_6

This means that, depending on the Pattern Card associated with the current visitor, you can change the appearance and properties of your components.

Personalizing Based on the Search Term Using Coveo Conditional Renderings Rules

Where Sitecore offers various personalization rules to change the way your website looks to your visitors, Coveo for Sitecore offers similar rules based on queries.

Sitecore processes personalization rules based on data in the Sitecore Experience Database (xDB). However, search queries are analytics events recorded by Coveo and sent to the Coveo Platform. You must add the Coveo Send Analytics To Sitecore rendering in your search interface to have Coveo for Sitecore send a duplicate of its query events to the xDB.

On any Sitecore presentation item, you can configure personalization rules. Coveo adds one of them in the Coveo Conditional Renderings section. Look for the condition named when the current visitor previously performed a query that compares to specific value.

Personalize_7

You can add this condition to your component by specifying an operator and a value.

Personalize_8

Finally, you can specify your own component under Personalize Content so that you’re able to change the way your component looks, depending on the query that was run.

Example Use Case

You have a website to sell cars. Each car model has its dedicated page, and you would like to display a different layout for these individual pages depending on what the user is interested in. For example, if a user has been actively searching for Toyota models and ends up on a particular Toyota model, you want to change the layout of this page so that additional Toyota models are suggested on the side of the page, say, in a carousel component.

Given the Sitecore Experience Database is enabled, you can edit the personalization options of the carousel component located on the Toyota Corolla page, and add a Coveo Conditional Renderings rule that uses your query history to conditionally display another version of your carousel that only contains Toyota models.

To summarize, this means that when a visitor performs a query for toyota and then clicks on one of the search results, the page associated with this specific search result (some specific Toyota model) changes according to their query history.

Recommended Articles