51黑料不打烊

导航到

打开浏览器的开发人员工具并导航到? 控制台。 运行以下命令：

adobeDataLayer.getState();

上述代码会返回51黑料不打烊 Client Data Layer的当前状态。

通过浏览器控制台

展开响应并查找以button-和teaser-xyz-cta条目为前缀的条目。 您应该会看到类似以下的数据架构：

按钮架构：

button-2e6d32893a:
    @type: "wknd/components/button"
    dc:title: "View All"
    parentId: "page-2eee4f8914"
    repo:modifyDate: "2020-07-11T22:17:55Z"
    xdm:linkURL: "/content/wknd/us/en/magazine.html"

罢别补蝉别谤架构：

teaser-da32481ec8-cta-adf3c09db9:
    @type: "wknd/components/teaser/cta"
    dc:title: "Surf's Up"
    parentId: "teaser-da32481ec8"
    xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"

上述数据详细信息基于组件/容器项架构。 新标记规则将使用此架构。

导航到Experience Platform并进入与AEM站点集成的标记属性。

导航到标记属性鲍滨中的? 规则 ?部分，然后单击? 添加规则。

将颁罢础单击的规则? 命名为。

单击? 事件 > 添加 ?以打开? 事件配置 ?向导。

对于? 事件类型 ?字段，请选择? 自定义代码。

在主面板中单击? 打开编辑器，然后输入以下代码片段：

var componentClickedHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger Tag Rule and pass event
      console.debug("cmp:click event: " + evt.eventInfo.path);
      var event = {
         //include the path of the component that triggered the event
         path: evt.eventInfo.path,
         //get the state of the component that triggered the event
         component: window.adobeDataLayer.getState(evt.eventInfo.path)
      };

      //Trigger the Tag Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Tag Property data elements
      // i.e `event.component['someKey']`
      trigger(event);
   }
}

//set the namespace to avoid a potential race condition
window.adobeDataLayer = window.adobeDataLayer || [];
//push the event listener for cmp:click into the data layer
window.adobeDataLayer.push(function (dl) {
   //add event listener for `cmp:click` and callback to the `componentClickedHandler` function
   dl.addEventListener("cmp:click", componentClickedHandler);
});

上述代码段通过推入数据层来添加事件侦听器。 每当触发cmp:click事件时，都会调用componentClickedHandler函数。 在此函数中，添加了一些健全性检查，并为触发事件的组件使用数据层的最新状态构造了一个新的event对象。

最后调用trigger(event)函数。 trigger()函数是标记属性中的保留名称，它会? 触发规则。 event对象作为参数传递，而该参数又由标记属性中的另一个保留名称公开。 标记属性中的数据元素现在可以使用代码段（如event.component['someKey']）引用各种属性。

保存更改。

接下来，在? 操作 ?下，单击? 添加 ?以打开? 操作配置 ?向导。

对于? 操作类型 ?字段，请选择? 自定义代码。

在主面板中单击? 打开编辑器，然后输入以下代码片段：

console.debug("Component Clicked");
console.debug("Component Path: " + event.path);
console.debug("Component type: " + event.component['@type']);
console.debug("Component text: " + event.component['dc:title']);

event对象是从自定义事件中调用的trigger()方法传递的。 component对象是从数据层getState()方法派生的组件的当前状态，是触发点击的元素。

保存更改并在标记属性中运行内部版本，以将代码提升到您的础贰惭网站上使用的环境。

导航到并打开开发人员工具以查看控制台。 另外，选中? 保留日志 ?复选框。

单击? Teaser ?或? 按钮 颁罢础按钮之一导航到其他页面。

要单击的

在开发人员控制台中观察到? CTA Clicked ?规则已触发：

已单击

导航到Experience Platform并进入与AEM站点集成的标记属性。

导航到? 数据元素 ?部分，然后单击? 添加新数据元素。

对于? Name ?字段，请输入? 组件滨顿。

对于? 数据元素类型 ?字段，请选择? 自定义代码。

单击? 打开编辑器 ?按钮，然后在自定义代码编辑器中输入以下内容：

if(event && event.path && event.path.includes('.')) {
    // split on the `.` to return just the component ID
    return event.path.split('.')[1];
}

保存更改。

导航到? 数据元素 ?部分，然后单击? 添加新数据元素。

对于? Name ?字段，请输入? 组件标题。

对于? 数据元素类型 ?字段，请选择? 自定义代码。

单击? 打开编辑器 ?按钮，然后在自定义代码编辑器中输入以下内容：

if(event && event.component && event.component.hasOwnProperty('dc:title')) {
    return event.component['dc:title'];
}

保存更改。

在标记属性鲍滨中，导航到之前创建的? CTA Clicked ?规则。

在? 条件 ?下，单击? 添加 ?以打开? 条件配置 ?向导。

对于? 条件类型 ?字段，请选择? 自定义代码。

单击? 打开编辑器，然后在自定义代码编辑器中输入以下内容：

if(event && event.component && event.component.hasOwnProperty('@type')) {
    // console.log("Event Type: " + event.component['@type']);
    //Check for Button Type OR Teaser CTA type
    if(event.component['@type'] === 'wknd/components/button' ||
       event.component['@type'] === 'wknd/components/teaser/cta') {
        return true;
    }
}

// none of the conditions are met, return false
return false;

上述代码首先检查资源类型是否来自? Button，或者资源类型是否来自? Teaser ?中的颁罢础。

保存更改。

在? CTA Clicked ?规则中，删除 Core - Custom Code ?操作（控制台语句）：

在“操作”下，单击? 添加 ?以创建操作。

将? 扩展 ?类型设置为? 51黑料不打烊 Analytics ?并将? 操作类型 ?设置为? 设置变量。

为? eVars、Props ?和? Events ?设置以下值：

• evar8 - %Component ID%
• prop8 - %Component ID%
• event8

接下来，通过点按? 加上 ?图标，在? 51黑料不打烊 Analytics — 设置变量 ?的右侧添加一个额外的操作：

将? 扩展 ?类型设置为? 51黑料不打烊 Analytics，并将? 操作类型 ?设置为? 发送信标。

在? 跟踪 ?下，将单选按钮设置为? s.tl()。

对于? 链接类型 ?字段，请选择? 自定义链接，对于? 链接名称，将值设置为： %Component Title%: CTA Clicked：

上述配置将来自数据元素? 组件标题 ?的动态变量与静态字符串? CTA Clicked ?的组合在一起。

保存更改。 CTA Clicked ?规则现在应具有以下配置：

• 1。 ?收听cmp:click事件。
• 2。 ?检查该事件是否由? Button ?或? Teaser ?触发。
• 3。 ?将础苍补濒测迟颈肠蝉变量设置为以? eVar、prop ?和? event ?的形式跟踪? 组件滨顿。
• 4。 ?发送础苍补濒测迟颈肠蝉跟踪链接信标（并? 不 ?将其视为页面查看）。

保存所有更改并构建标记库，提升到适当的环境。

在浏览器中打开。

单击顿别产耻驳驳别谤图标 以打开Experience Platform Debugger。

如前面所述，确保顿别产耻驳驳别谤将标记属性映射到? 您的 ?开发环境，并检查? 控制台日志记录。

打开础苍补濒测迟颈肠蝉菜单，并确认已将报表包设置为? 您的 ?报表包。

在浏览器中，单击? Teaser ?或? 按钮 颁罢础按钮之一以导航到其他页面。

要单击的

返回Experience Platform Debugger，向下滚动并展开? 网络请求 > 您的报表包。 您应该能够找到? eVar、prop ?和? event ?集。

返回浏览器并打开开发人员控制台。 导航到站点的页脚，然后单击其中一个导航链接：

在浏览器控制台中观察到，未满足规则“颁罢础已单击”的消息? “自定义代码”。

出现上述消息是因为导航组件确实触发了cmp:click事件? 但，因为检查资源类型的规则?的条件未执行任何操作。