Coveo Machine Learning Recommendations Complete Code Sample

You can take advantage of the Coveo™ Machine Learning (Coveo ML) Recommendations feature to add recommendation sections such as “People who viewed this page also viewed the following pages” (see Coveo Machine Learning Event Recommendations Deployment Overview).

Be aware that dealing with Coveo ML Recommendations code samples requires developer skills.

The following HTML sample assembles the code samples described in more details in the child topics, assuming a case where all samples are required. Refer to each previous sections for details on what needs to be adapted in the sample.

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <!-- Include the Coveo JavaScript Search Framework resources from CDN -->
    <link rel="stylesheet" href="https://static.cloud.coveo.com/searchui/v2.3679/css/CoveoFullSearch.css" />
    <script src="https://static.cloud.coveo.com/searchui/v2.3679/js/CoveoJsSearch.Lazy.min.js"></script>
    <script src="https://static.cloud.coveo.com/searchui/v2.3679/js/templates/templates.js"></script>
    <!-- Include the coveoua script from CDN to be able to log page view events -->
    <script type="text/javascript" src="https://static.cloud.coveo.com/coveo.analytics.js/coveoua.js"></script>
    <script>
      // Replace by the unique identifier of your Coveo Cloud organization.
      const organizationId = "mycoveocloudv2organization";
      // Replace by an API key with the *Execute query* and *Usage analytics write* privileges,
      // or by a function that returns a valid search token.
      const accessToken = "*********-****-****-****-************";
      // Replace by the name of a field in your index whose values can uniquely identify each item.
      // You must be able to retrieve the value of that field for a given item using client-side code.
      const fieldName = "@clickableuri";
      // Replace by a function that allows you to consistently and accurately retrieve the value of the `fieldName` for each item.
      const fieldValue = location.href;
      // Replace by the item type to allow as recommendations. Use the empty string to allow recommendations of any type.
      const itemType = "Web Page";
      // Replace by any number of functions to retrieve custom contextual information.
      function getUserName() {
      // Implementation…
      };
      function getUserQuest() {
      // Implementation…
      };
      function getUserFavoriteColor() {
      // Implementation...
      };
  // ...
      coveoua("init", accessToken);
      coveoua("send", "pageview", {
        contentIdKey: fieldName,
        contentIdValue: fieldValue,
        contentType: itemType
        // Optionally, to allow Coveo ML to take advantage of contextual information, you can pass any number of custom context key-value pairs.
        context_userName: getUserName(),
        context_userQuest: getUserQuest(),
        context_userFavoriteColor: getUserFavoriteColor() // ...
      });
      document.addEventListener("DOMContentLoaded", function() {
        Coveo.SearchEndpoint.configureCloudV2Endpoint(organizationId, accessToken);
        Coveo.initRecommendation(document.querySelector("#recommendation"));
      });
    </script>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
    <div id="recommendation" class="CoveoRecommendation" data-results-per-page="5" data-pipeline="MyQueryPipeline" data-hide-if-no-results="true">
      <div class="CoveoAnalytics" data-search-hub='MyHubName'></div>
      <div class="coveo-recommendation-header">
        <div class="coveo-recommendation-title">Recommendations</div>
      </div>
      <div class="coveo-recommendation-body">
        <div class="CoveoResultList"></div>
      </div>
    </div>
    <!-- ... -->
  </body>
</html>