分析脚本未从影子发送数据 DOM
analytics script is not sending data from shadow DOM
我们正在跟踪一个网站，该网站的组件是使用 Shadow DOM 概念构建的，当我们在启动时创建规则以向这些组件添加标记时，它不起作用。
您能否指导我们在 Shadow 中标记组件的最佳实践 DOM？
我发现有关 google 分析的未解决问题 Google analytics inside shadow DOM doesn't work adobe 分析也是如此吗？
最佳实践
首先，使用 Shadow DOM 概念的精神是为 Web 组件提供 scope/closure，这样人们就不能只是去戳它们并弄乱它们。原则上，它类似于在更高作用域无法触及的函数中具有局部作用域变量。在实践中，可以绕过这个 "wall" 并按照自己的方式使用它，但它会破坏阴影 DOM 的 "spirit"，IMO 是不好的做法。
因此，如果我要就此提出一些最佳实践建议，我的第一个建议是尽可能尊重使用影子的 Web 组件的精神 DOM，并将它们视为他们努力成为黑匣子。意思是，你应该去找负责 web 组件的 web 开发人员，让他们提供一个接口供你使用。
例如，Adobe Launch 能够侦听广播到 (light) DOM 的自定义事件，因此网站开发人员可以添加到他们的 Web 组件，创建自定义事件并在点击时广播的按钮。
注意：Launch的自定义事件监听器只会监听document.body开始的自定义事件广播，不会监听[=102] =] document，因此请确保在 document.body 或更深层次上创建和广播自定义事件。
"But the devs won't do anything so I have to take matters into my own hands..."
可悲的是，这往往是现实，所以你必须做你必须做的。如果是这种情况，那么 Launch 目前没有任何本机功能可以真正让您在这方面的生活更轻松（无论如何，对于下面内容的 "core" 部分），截至目前 post，据我所知，也没有 public 扩展可以为此提供任何东西。但这并不意味着你是 SoL。
但我想声明，我不确定我是否会很快将此答案的其余部分称为 "Best Practice"，而不是 "It's 'a' solution.."。主要是因为这在很大程度上涉及将大量纯 javascript 倾倒到自定义代码框中并收工，这更像是一种 "catch-all, last resort" 解决方案。
同时，一般来说，除非迫不得已，否则最好避免在标签管理器中使用自定义代码框。标签管理器的全部意义在于抽象出代码。
我认为这里的 TL;DR 基本上是我重申这件事情，理想情况下应该放在网站开发人员的板块上去做。但如果您仍然真的需要在 Launch 中完成所有操作，因为 ReasonsTM，请继续阅读。
'A'解决方案...
注意：这是一个非常基本的例子，有一个简单的开放模式阴影 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 执行 Launch click 事件规则，并使用自定义代码条件，如下所示：
return event.nativeEvent.path[0].matches('button#myButton');
这样的事情应该适用于这种情况，因为这里有很多星星：
- 阴影 dom 是开放模式，所以没有黑客可以覆盖东西
- 灯光和阴影 DOM 级别
都有易于识别的独特 css 选择器
- 你只想监听点击事件，它会冒泡并
就像在影子根的光上发生了点击 DOM root.
但实际上，您的要求可能不会这么简单。也许您需要附加一些其他事件侦听器，例如视频播放事件。不幸的是，目前没有 "one size fits all" 解决方案；这仅取决于您的实际跟踪要求。
但总的来说，目标与您要求开发人员做的几乎相同：在阴影 [=133] 的上下文中创建和广播自定义（灯光）DOM 事件=].
更好的解决方案示例
使用与上述相同的组件示例和要求，您可以创建一个规则以在 DOM 就绪时触发。将其命名为 "My Component Tracking - Core" 之类的名称。没有条件，除非你想做一些事情，比如检查 Web 组件的根灯 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*
在这里，您可以根据需要设置任何 Actions（设置 Adobe Analytics 变量、发送信标等）。
注：
在这个例子中，我向自定义事件发送了一个数据负载。您可以在任何带有 event.detail 的自定义 (javascript) 代码框中引用有效负载，例如event.detail.value。您还可以使用 % 语法在启动字段中引用它们，例如%event.detail.value%.
我们正在跟踪一个网站，该网站的组件是使用 Shadow DOM 概念构建的，当我们在启动时创建规则以向这些组件添加标记时，它不起作用。
您能否指导我们在 Shadow 中标记组件的最佳实践 DOM？
我发现有关 google 分析的未解决问题 Google analytics inside shadow DOM doesn't work adobe 分析也是如此吗？
最佳实践
首先，使用 Shadow DOM 概念的精神是为 Web 组件提供 scope/closure，这样人们就不能只是去戳它们并弄乱它们。原则上，它类似于在更高作用域无法触及的函数中具有局部作用域变量。在实践中，可以绕过这个 "wall" 并按照自己的方式使用它，但它会破坏阴影 DOM 的 "spirit"，IMO 是不好的做法。
因此，如果我要就此提出一些最佳实践建议，我的第一个建议是尽可能尊重使用影子的 Web 组件的精神 DOM，并将它们视为他们努力成为黑匣子。意思是，你应该去找负责 web 组件的 web 开发人员，让他们提供一个接口供你使用。
例如，Adobe Launch 能够侦听广播到 (light) DOM 的自定义事件，因此网站开发人员可以添加到他们的 Web 组件，创建自定义事件并在点击时广播的按钮。
注意：Launch的自定义事件监听器只会监听document.body开始的自定义事件广播，不会监听[=102] =] document，因此请确保在 document.body 或更深层次上创建和广播自定义事件。
"But the devs won't do anything so I have to take matters into my own hands..."
可悲的是，这往往是现实，所以你必须做你必须做的。如果是这种情况，那么 Launch 目前没有任何本机功能可以真正让您在这方面的生活更轻松（无论如何，对于下面内容的 "core" 部分），截至目前 post，据我所知，也没有 public 扩展可以为此提供任何东西。但这并不意味着你是 SoL。
但我想声明，我不确定我是否会很快将此答案的其余部分称为 "Best Practice"，而不是 "It's 'a' solution.."。主要是因为这在很大程度上涉及将大量纯 javascript 倾倒到自定义代码框中并收工，这更像是一种 "catch-all, last resort" 解决方案。
同时，一般来说，除非迫不得已，否则最好避免在标签管理器中使用自定义代码框。标签管理器的全部意义在于抽象出代码。
我认为这里的 TL;DR 基本上是我重申这件事情，理想情况下应该放在网站开发人员的板块上去做。但如果您仍然真的需要在 Launch 中完成所有操作，因为 ReasonsTM，请继续阅读。
'A'解决方案...
注意：这是一个非常基本的例子，有一个简单的开放模式阴影 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 执行 Launch click 事件规则，并使用自定义代码条件，如下所示：
return event.nativeEvent.path[0].matches('button#myButton');
这样的事情应该适用于这种情况，因为这里有很多星星：
- 阴影 dom 是开放模式，所以没有黑客可以覆盖东西
- 灯光和阴影 DOM 级别 都有易于识别的独特 css 选择器
- 你只想监听点击事件，它会冒泡并 就像在影子根的光上发生了点击 DOM root.
但实际上，您的要求可能不会这么简单。也许您需要附加一些其他事件侦听器，例如视频播放事件。不幸的是，目前没有 "one size fits all" 解决方案；这仅取决于您的实际跟踪要求。
但总的来说，目标与您要求开发人员做的几乎相同：在阴影 [=133] 的上下文中创建和广播自定义（灯光）DOM 事件=].
更好的解决方案示例
使用与上述相同的组件示例和要求，您可以创建一个规则以在 DOM 就绪时触发。将其命名为 "My Component Tracking - Core" 之类的名称。没有条件，除非你想做一些事情，比如检查 Web 组件的根灯 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*
在这里，您可以根据需要设置任何 Actions（设置 Adobe Analytics 变量、发送信标等）。
注：
在这个例子中，我向自定义事件发送了一个数据负载。您可以在任何带有 event.detail 的自定义 (javascript) 代码框中引用有效负载，例如event.detail.value。您还可以使用 % 语法在启动字段中引用它们，例如%event.detail.value%.