README

概述

构建访客档案，根据访问的页面、执行的操作、位置或设备特性“标记”行为。由于档案仅在浏览器中存储，不依赖于服务器数据或登录用户信息，因此保护了隐私。

此模块通过提供CMS用户界面和API，使营销人员和开发者能够有效协作。

CMS用户可以定义“规则集”来分组一个或多个“规则”。每个规则确定何时以及如何标记行为。例如，“如果URL包含'marketing'，则添加'interested-in-marketing'标记”。

然后可以使用这些标记来匹配CMS中管理的对象（例如页面或内容块）的规则，并根据浏览器中的决策显示/隐藏它们。或者，您可以通过编程方式控制此行为，实现复杂的规则定义，这在CMS UI中是不可行的。

由于所有决策都在浏览器中发生，因此您仍然可以提供缓存响应，并将所有变体都发送到浏览器，但只向访客显示其中一些变体。

示例用例

在主页上显示特定位置的公告
列出最近商店的特色产品（通过浏览器地理位置）
根据访客之前查看的页面显示特定主题的内容块
基于带有活动URL参数的流量显示特定营销活动的促销活动
如果访客之前已经看到过欢迎消息，则隐藏欢迎消息
如果访客查看FAQ条目超过30秒，则显示“联系帮助台？”号召性用语

局限性

所有变体对所有访客都可见（例如，此方法不能用于定向促销代码）
所有决策都在浏览器中可见（包括任何内置偏见和可疑的营销策略）

安装

Composer

composer require symbiote/silverstripe-local-personalisation:~1.0

JavaScript和CSS

将所需的前端逻辑添加到您的主模板中

<% require javascript('symbiote/silverstripe-local-personalisation:app/dist/main.js') %>
<% require css('symbiote/silverstripe-local-personalisation:app/dist/main.css') %>

或者，检查 app/webpack.config.js 了解如何将需求编译到您自己的前端包中。

元数据

个性化规则作为JavaScript元数据加载。

<script type="application/javascript" src="/__personalisation/rules"></script>

通过将其作为单独的路由加载，您避免了内联脚本，并使使用内容安全策略保护您的网站变得更加容易。它还有助于缓存：个性化规则在保存时立即生效，即使页面输出可能被缓存（通过HTTP缓存或静态发布）。

应用扩展

为了触发前端逻辑，您通常希望将扩展应用于至少一个内容对象。这将在CMS中添加一个新的“个性化”选项卡。

在页面上应用

SilverStripe\CMS\Model\SiteTree:
  extensions:
    - Symbiote\Personalisation\PersonalisationExtension

在内容块上应用

DNADesign\Elemental\Models\BaseElement:
  extensions:
    - Symbiote\Personalisation\PersonalisationExtension

修改模板

现在为渲染的内容对象的标记添加一些元数据：$p13nClasses 到您的 class 属性，以及 $p13nAttributes 到元素。

内容块容器模板的示例（存储在 themes/mytheme/templates/DNADesign/Elemental/Layout/ElementHolder.ss）

<div
    class="
        element
        $SimpleClassName.LowerCase
        <% if $StyleVariant %> $StyleVariant<% end_if %>
        <% if $ExtraClass %> $ExtraClass<% end_if %>
        $p13nClasses.RAW
    "
    id="$Anchor"
    $p13nAttributes.RAW
>
	$Element
</div>

测试操作

您现在可以定义规则了。检查浏览器中的 Profile.js 控制台消息，以确保一切设置正确。

开发者使用

配置文件分段规则

规则在CMS中定义

它们可以触发以下情况：

正则表达式与内容的匹配

手动应用规则

通过将PersonalisationExtension应用于内容对象，您可以在模板中使用$p13nClasses和$p13nAttributes。

或者，您可以从头开始构建所需的标记

添加lp-item css类
将data-lp-tags属性添加到列表中（逗号分隔），列出应用于配置文件以触发此元素的标签
将data-lp-type属性添加以指示是否“显示”（默认）或“隐藏”元素
添加data-lp-times属性（可选），以指示用户的配置文件必须被标记多少次
添加data-lp-timeframe属性以指示标记必须发生的时间范围（例如-1 week）


<div class="this-thing lp-item" data-lp-tags="route-detail" data-lp-times="5" data-lp-type="hide">
    <h1>What this is</h1>
</div>

事件

以下事件被触发，可以在自定义代码中响应

local_profile_match_tag
local_profile_apply_rule
local_profile_add_tag

将这些绑定为document.addEventListener('local_profile_add_tag', function (eventData) {})

本地开发

构建

前端资源存储在app/中。您可以使用yarn安装依赖项并启动构建

cd app/
yarn install
yarn build

JavaScript、HTTPS和热重载

为了完全在本地测试功能，您需要运行您的Web服务器在HTTPS上，这是大多数浏览器现在进行地理位置定位所必需的。

当为模块开发JavaScript代码时，获取源映射（断点！）和热重载可能会有所帮助。模块已经有一个yarn devserver命令。您需要扩展webpack.config.js以解决在页面中包含它时的CORS问题（参见webpack devserver文档）。

module.exports = {
    // ...
    devServer: {
        disableHostCheck: true
    }
};

现在您可以使用开发服务器（通常在端口4200上）以及您Silverstripe网站的首选主机名

<script src="https://your-hostname:4200/main.js" type="application/javascript"></script>

注意：为了在Chrome中使用HTTPS之外的地理位置，您需要允许不安全的源。

symbiote / silverstripe-local-personalisation

维护者

详细信息