Page tree
Skip to end of metadata
Go to start of metadata

Scoring helps to identify interest in certain products, product groups, services, or topics. The identified interest scores help you to display personalised experiences.


<dependency>
  <groupId>info.magnolia.recommendation</groupId>
  <artifactId>magnolia-recommender</artifactId>
  <version>1.0.2</version>
</dependency>

Git: https://git.magnolia-cms.com/projects/SERVICES/repos/scoring-demo


Scores models

  • Identify a customer's interest when they browse your site
  • Interest is captured in the form of interest points
  • Points are assigned to events:
    • Clicking links
    • Watching a video 
    • Page visits
  • Number of value points per events → amount of interest
  • Fine tuned by:
    • event
    • frequency
    • recency
  • Granular intent scoring based on user interactions

Use case: Contacts page interest

Lets learn the features of the module with an use case: trying to capture the interest of users in contacting the travel company


Defining a score model

Create a score model for company contact:

Assign 5 points each time contacts page is visited

Finally, save the score

Integrate score models into template dialog

Decorate page template dialog:

scoring-demo/decorations/mte/dialogs/pages/pageProperties.yaml
form:
  tabs:
    - !include:/magnolia-recommender/dialogs/scoreModel.yaml

Assign a score model to contact page

Save page dialog.

Integrate score models into template script

Decorate prototype's header area to use a custom script

scoring-demo/decorations/travel-demo/templates/pages/prototype.yaml
areas:
  htmlHeader:
    templateScript: /scoring-demo/templates/pages/areas/htmlHeader.ftl

Create new htmlHeader script with score model templating function

/scoring-demo/templates/pages/areas/htmlHeader.ftl
[#-------------- ASSIGNMENTS --------------]
[#-- Page's model & definition, based on the rendering hierarchy and not the node hierarchy --]
[#assign site = sitefn.site()!]
[#assign theme = sitefn.theme(site)!]
[#assign pageDef = ctx.pageDef!]

[#-- Cookie Consent --]
[#assign root = cmsfn.siteRoot(content)]
[#assign cookieConsentName = "cookieconsent_status"]
[#assign cookieNode = cmsfn.contentById("/modules/cookie-manager/config/cookies/cookieConsentDenied", "config")!]
[#if cookieNode?has_content]
    [#assign cookieConsentName = cookieNode.name!"cookieconsent_status"]
[/#if]
[#assign complianceType = root.complianceType!]
[#assign showLink = root.readMoreLink! != 'none']
[#if showLink]
    [#assign linkType = root.readMoreLink!]
    [#if linkType == 'external']
        [#assign href = root.readMoreLinkexternal]
    [#else]
        [#assign href = cmsfn.link(cmsfn.nodeById(root.readMoreLinkinternal))]
    [/#if]
[/#if]


[#-------------- RENDERING --------------]
<title>${content.windowTitle!content.title!}</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="${content.description!""}"/>
<meta name="keywords" content="${content.keywords!""}"/>
<meta name="author" content="Magnolia International Ltd."/>
<meta name="generator" content="Powered by Magnolia - Intuitive Opensource CMS"/>

${scorefn.getPageVisitMetaTags(content)}

<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<![endif]-->

<link rel="icon" href="${ctx.contextPath}/.resources/${theme.name}/favicon.ico"/>

[#list theme.cssFiles as cssFile]
    [#if cssFile.conditionalComment?has_content]<!--[if ${cssFile.conditionalComment}]>[/#if]
<link rel="stylesheet" type="text/css" href="${cssFile.link}" media="${cssFile.media}"/>
    [#if cssFile.conditionalComment?has_content]<![endif]-->[/#if]
[/#list]

[#if pageDef.cssFiles??]
    [#list pageDef.cssFiles as cssFile]
<link rel="stylesheet" type="text/css" href="${cssFile.link}" media="${cssFile.media}"/>
    [/#list]
[/#if]

[#if cmsfn.editMode]
<link rel="stylesheet" type="text/css"
      href="${ctx.contextPath}/.resources/travel-demo-theme/css/travels-magnolia-author.css" media="all"/>
[/#if]

[#-- jsFiles from the theme are here --]
[#list theme.jsFiles as jsFile]
<script src="${jsFile.link}"></script>
[/#list]

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="${ctx.contextPath}/.resources/travel-demo-theme/js/html5shiv.js"><\/script>')</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

[#-- Cookie Consent script --]
<script>
  window.addEventListener("load", function () {
    window.cookieconsent.initialise({
      "palette": {
        "popup": {
          "background": "${root.bannerbackground!}",
          "text": "${root.bannertext!}",
          "link": "${root.bannerlink!}"
        },
        "button": {
          "background": "${root.buttonbackground!}",
          "border": "${root.buttonborder!}",
          "text": "${root.buttontext!}"
        },
        "highlight": {
          "background": "${root.highlightbackground!}",
          "border": "${root.highlightborder!}",
          "text": "${root.highlighttext!}"
        }
      },
      "content": {
        "header": "${root.header!}",
        "message": "${root.message!}",
        "dismiss": "${root.dismiss!}",
        "link": "${root.link!}",
        "allow": "${root.allow!}",
        "deny": "${root.deny!}",
        [#if showLink]"href": "${href!}"[/#if]
      },
      "cookie": {
        "name": "${cookieConsentName}"
      },
      "type": "${root.complianceType!}",
      "theme": "${root.layout!}",
      "position": "${root.position!}",
      "showLink": ${showLink?c!false}
    });
  });
</script>



Include recommeder.js in travel's theme

scoring-demo/decorations/travel-demo/themes/travel-demo-theme.yaml
jsFiles:
  recommender:
    addFingerPrint: true
    link: /.resources/magnolia-recommender/webresources/js/recommender.js

Check the html code of contact page

Personalising any component based on scoring

Create a personalised component that will be rendered only if the user has enough scoring. Lets add a teaser component as the first of travel's home page. The teaser will target the contact page:

Create a variant of the component and choose the following audience: (Magnolia user journey scoring / Company-contact / 30)

Hide the original component


Publish the travel home page and you will see the new personalised component only when the contact page has been visited at least 3 times (smile)

  • Why 3 times?
  • What happens with score model base value, 5 points?


  • No labels