我们正在努力跟踪一个使用Shadow DOM概念构建组件的站点，当我们在启动时创建规则时，为这些组件添加标记它不起作用。
你能指导我们在Shadow DOM中标记组件的最佳实践吗？
我发现有关谷歌分析Google analytics inside shadow DOM doesn't work的未解答的问题对于adobe分析也是如此吗？
首先，使用Shadow DOM概念的精神是为Web组件提供范围/闭包，这样人们就不能只是去攻击它们并弄乱它们。原则上，它类似于在函数内部具有更高范围无法触及的局部范围变量。在实践中，有可能绕过这个“墙”并按照你的方式，但它打破了影子DOM的“精神”，IMO是不好的做法。
因此，如果我建议一些关于这方面的最佳实践，我的第一个建议是尽可能地尊重利用shadow DOM的Web组件的精神，并将它们视为他们努力的黑盒子。这意味着，您应该去负责Web组件的Web开发人员，并要求他们提供一个供您使用的界面。
例如，Adobe Launch能够监听向（轻）DOM广播的自定义事件，因此站点开发人员可以添加到他们的Web组件，创建自定义事件并在单击按钮时进行广播。
注意：Launch的自定义事件监听器只会监听从document.body开始的自定义事件广播，而不是document，因此请确保在document.body或更深层次上创建和广播自定义事件。
“但是开发者不会做任何事情所以我必须自己动手......”
可悲的是，这往往是一个现实，所以你必须做你必须做的事情。如果是这种情况，那么，Launch目前还没有任何原生功能可以让你在这方面的生活更轻松（对于以下内容的“核心”部分，无论如何），并且截至本文，AFAIK还有也没有为此提供任何内容的公共扩展。但这并不意味着你是SoL。
但我想说的是，我不确定我是否会很快将这个答案的“最佳实践”称为“这是一个'解决方案......”。主要是因为这主要涉及将大量纯javascript转储到自定义代码框中并将其称为一天，这更像是一种“无所不能，最后的手段”解决方案。
同时，一般来说，除非必须，否则最好避免在标记管理器中使用自定义代码框。标记管理器的重点是抽象出代码。
我认为TL; DR在这里基本上是我重申这一点，理想情况下应该放在网站开发板上。但是如果你真的需要在Launch中完成所有这些，因为ReasonsTM，请继续阅读。
注意：这是一个非常基本的例子，带有一个简单的开放式阴影DOM场景 - 实际上你的场景几乎肯定要复杂得多。我希望你知道你正在用javascript做什么，如果你潜入这个！
假设您在页面上有以下内容。自定义html元素的简单示例，其阴影DOM添加了一个按钮。
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({
mode: 'open'
});
var button = document.createElement('button');
button.id = 'myButton';
button.value = 'my button value';
button.innerText = 'My Button';
this._shadowRoot.appendChild(button);
}
}
customElements.define('my-component', MyComponent);
</script>
<my-component id='myComponentContainer'></my-component>
假设您想在访问者点击按钮时触发规则。
快速解决方案示例
在这一点上，我可能会说你可以使用查询选择器my-component#myComponentContainer执行启动点击事件规则，其中自定义代码条件如下：
return event.nativeEvent.path[0].matches('button#myButton');
像这样的东西应该适用于这种情况，因为这里有很多星星对齐：
但在实践中，您的要求可能不会那么容易。也许您需要附加一些其他事件监听器，例如视频播放事件。不幸的是，目前还没有“一刀切”的解决方案;这取决于您的实际跟踪要求。
但总的来说，目标与开发人员要求的目标非常相似：在shadow DOM的上下文中创建和广播自定义（轻量级）DOM事件。
更好的解决方案例
使用与上面相同的组件示例和要求，您可以创建一个规则来触发DOM Ready。将其命名为“我的组件跟踪 - 核心”等等。没有条件，除非你想做一些事情，比如检查web组件的root light DOM元素是否存在或者其他什么。
总的来说，这是将事件监听器附加到按钮并为Launch调度自定义事件的核心代码。请注意，此代码基于上面的示例组件和跟踪要求。这个例子是独一无二的。您需要根据自己的设置编写类似的代码。
添加一个自定义js容器，其中包含以下内容：
// get the root (light dom) element of the component
var rootElement = document.querySelector('#myComponentContainer');
if (rootElement && rootElement.shadowRoot) {
// get a reference to the component's shadow dom
var rootElementDOM = rootElement.shadowRoot;
// try and look for the button
var elem = rootElementDOM.querySelector('button#myButton');
if (elem) {
// add a click event listener to the button
elem.addEventListener('click', function(e) {
// optional payload of data to send to the custom event, e.g. the button's value
var data = {
value: e.target.value
};
// create a custom event 'MyButtonClick' to broadcast
var ev = new CustomEvent('MyButtonClick', {
detail: data
});
// broadcast the event (remember, natively, Launch can only listen for custom events starting on document.body, not document!
document.body.dispatchEvent(ev);
}, false);
}
}
从这里，您可以创建一个侦听自定义事件广播的新规则。
自定义事件规则示例
Rule name: My Button clicks
活动
Extension: Core Event Type: Custom Event Name: MyButtonClick Custom Event Type: MyButtonClick Elements matching the CSS selector: body
条件
*None for this scenario*
从这里，您可以设置所需的任何操作（设置Adobe Analytics变量，发送信标等）。
注意：在此示例中，我将数据有效内容发送到自定义事件。您可以使用event.detail在任何自定义（javascript）代码框中引用有效内容，例如event.detail.value。您还可以使用%语法在启动字段中引用它们，例如%event.detail.value%。