分析脚本未从 shadow DOM 发送数据

Question

我们正在跟踪一个站点，该站点具有使用 Shadow DOM 概念构建的组件，当我们在启动时创建规则以向这些组件添加标记时，它不起作用。

你能指导我们在 Shadow DOM 中标记组件的最佳实践吗？

我发现有关谷歌分析的未解决问题影子 DOM 中的谷歌分析不起作用，这对 adobe 分析也是如此吗？

Answer 1

最佳实践

首先，使用 Shadow DOM 概念的精神是为 Web 组件提供作用域/闭包，这样人们就不能只是去探索它们并把它们弄乱。原则上，它类似于在函数内部拥有一个较高作用域无法触及的局部作用域变量。在实践中，可以绕过这堵“墙”并随心所欲地使用它，但它破坏了 Shadow DOM 的“精神”，在我看来这是不好的做法。

因此，如果我要建议一些关于这方面的最佳实践，我的第一个建议是尽可能尊重使用 Shadow DOM 的 Web 组件的精神，并将它们视为它们努力成为的黑匣子。意思是，你应该去找负责Web组件的Web开发人员，并要求他们提供一个接口供你使用。

例如，Adobe Launch 能够侦听广播到（轻型）DOM 的自定义事件，因此站点开发人员可以添加到其 Web 组件、创建自定义事件并在单击按钮时广播它。

注意： Launch 的自定义事件侦听器将仅侦听从 开始的自定义事件广播document.body，而不是 document从 开始，因此请确保在document.body或更深层创建和广播自定义事件。

“但开发人员不会采取任何行动，所以我必须自己处理事情......”

可悲的是，这往往是现实，所以你必须做你必须做的事。如果是这种情况，那么，Launch 目前没有任何本机功能可以真正让您在这方面的生活更轻松（无论如何，对于下面内容的“核心”部分），并且截至本文，据我所知有也没有为此提供任何服务的公共扩展。但这并不意味着你就是SoL。

但我想说的是，我不确定我是否会很快将这个答案的其余部分称为“最佳实践”，而不是“这是一个解决方案......”。主要是因为这在很大程度上涉及将大量纯 JavaScript 转储到自定义代码框中并收工，这更像是“万能的、最后的手段”解决方案。

同时，一般来说，除非必要，否则最佳实践是在标签管理器方面避免使用自定义代码框。标签管理器的全部目的是抽象代码。

我认为这里的 TL;DR 基本上是我重申这一点，理想情况下应该放在网站开发人员的盘子里去做。但如果您确实需要在 Launch 中完成所有操作，因为 Reasons ^TM，请继续阅读。

'一个办法...

注意：这是一个非常基本的示例，具有简单的开放模式影子 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 级别都有易于识别的独特 css 选择器
• 您只想监听点击事件，该事件会冒泡，就像在影子根的轻量 DOM 根上发生点击一样。

但实际上，您的要求可能不会这么简单。也许您需要附加一些其他事件侦听器，例如视频播放事件。不幸的是，目前还没有“一刀切”的解决方案。这仅取决于您的实际跟踪要求。

但总的来说，目标与您要求开发人员执行的操作几乎相同：在影子 DOM 的上下文中创建并广播自定义（轻量）DOM 事件。

更好的解决方案示例

使用与上面相同的组件示例和要求，您可以创建一个规则以在 DOM Ready 上触发。将其命名为“我的组件跟踪 - 核心”或其他名称。没有条件，除非你想做一些事情，比如检查 Web 组件的根 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);
    }
}

从这里，您可以创建一个监听自定义事件广播的新规则。

自定义事件规则示例

规则名称：我的按钮点击次数

活动

扩展：核心
事件类型：自定义事件
名称：我的按钮点击
自定义事件类型：MyButtonClick
与 CSS 选择器匹配的元素：body

状况

*此场景没有*

从这里，您可以设置所需的任何操作（设置 Adob​​e Analytics 变量、发送信标等）。

注意： 在此示例中，我向自定义事件发送了数据负载。您可以在任何自定义 (javascript) 代码框中使用 引用有效负载event.detail，例如event.detail.value。您还可以使用%语法在启动字段中引用它们，例如%event.detail.value%。