分析脚本未从影子DOM发送数据 [英] analytics script is not sending data from shadow DOM

问题描述

我们正在跟踪一个具有使用Shadow DOM概念构建组件的网站，当我们在启动时创建规则以向这些组件添加标记时，该站点将无法正常运行。

We are working on tracking a site which has components built using Shadow DOM concepts, when we are creating a rule in launch to add tagging to these components it’s not working.

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

Can you guide us with best practice on tagging components in Shadow DOM?

我发现了有关google的未解决问题analytics 影子DOM内的Google Analytics不起作用还可以使用Adobe Analytics吗？

I found unanswered questions about google analytics Google analytics inside shadow DOM doesn't work is this true for adobe analytics also?

推荐答案

最佳实践

首先，精神使用Shadow DOM概念的目的是为Web组件提供范围/封闭性，以便人们不能只是去戳它们并弄乱它们。原则上，这类似于在函数内部具有较高范围无法触及的局部范围变量。在实践中，可以绕过这个墙并按自己的方式行事，但它破坏了影子DOM的精神，这是IMO不好的做法。

Best Practice

Firstly, the spirit of using Shadow DOM concepts is to provide scope/closure for web components, so that people can't just go poking at them and messing them up. In principle, it is similar to having a local scoped variable inside a function that a higher scope can't touch. In practice, it is possible to get around this "wall" and have your way with it, but it breaks the "spirit" of shadow DOM, which IMO is bad practice.

因此，如果我建议其中任何一种最佳实践，我的第一条建议就是尽可能尊重使用影子DOM的Web组件的精神。 ，并像对待他们努力成为的黑匣子一样对待他们。这意味着，您应该去负责Web组件的Web开发人员，并要求他们提供一个供您使用的界面。

So, if I were to advise some best practice about any of this, my first advice is to as much as possible, respect the spirit of web components that utilize shadow DOM, and treat them like the black box they strive to be. Meaning, you should go to the web developers in charge of the web component and ask them to provide an interface for you to use.

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

For example, Adobe Launch has the ability to listen for custom events broadcast to the (light) DOM, so the site developers can add to their web component, create a custom event and broadcast it on click of the button.

注意： Launch的自定义事件监听器将仅监听从 document.body开始的自定义事件广播。 / code>，不是 文档，因此请确保在 document.body 或更深。

Note: Launch's custom event listener will only listen for custom event broadcasts starting at document.body, not document, so make sure to create and broadcast custom events on document.body or deeper.

但是开发人员不会做任何事情，所以我有把事情交到我自己手中……

不幸的是，这经常是现实，所以你做你应该做的事。如果是这样的话，那么，Launch当前没有任何本机功能可以使您在此方面的生活变得更加轻松（无论如何，对于以下内容的核心部分而言），并且截至本文为止，AFAIK已有也没有提供任何扩展功能的公共扩展。但这并不意味着你就是SoL。

Sadly, this is a reality more often than not, so you gotta do what you gotta do. If this is the case, well, Launch does not currently have any native features to really make life easier for you in this regard (for the "core" part of the below stuff, anyways), and as of this post, AFAIK there are no public extensions that offer anything for this, either. But that doesn't mean you're SoL.

但我想指出的是，我不确定我很快会将此答案的其余部分称为最佳实践，而不是这是一个'解决方案..。主要是因为这主要涉及将大量纯JavaScript倒入自定义代码框中并每天调用它，而这更像是万能的，万不得已的解决方案。

But I want to state that I'm not sure I would be quick to call the rest of this answer "Best Practice" so much as "It's 'a' solution..". Mostly because this largely involves just dumping a lot of pure javascript into a custom code box and calling it a day, which is more of a "catch-all, last resort" solution.

同时，通常最好的做法是避免在标记管理器中使用自定义代码框，除非必须这样做。标签管理器的全部目的是抽象出代码。

Meanwhile, in general, it's best practice to avoid using custom code boxes when it comes to tag managers unless you have to. The whole point of tag managers is to abstract away the code.

我认为这里的TL; DR基本上是我重申的这一点，理想情况下应将其放置在站点开发人员的工作板上。但是，如果由于Reasons ^TM 而仍然真的需要在Launch中完成所有操作，请继续阅读。

I think the TL;DR here is basically me reiterating this something that should ideally be put on the site devs' plate to do. But if you still really need to do it all in Launch because Reasons^TM, keep on reading.

注意：是一个简单的开放模式阴影DOM场景的非常基本的示例-实际上，您的场景几乎肯定要复杂得多。我希望您知道如果要深入研究javascript会做什么。

Note: This is a really basic example with a simple open-mode shadow DOM scenario - in reality your scenario is almost certainly a lot more complex. I expect you to know what you're doing with javascript if you're diving into this!

假设您在页面上有以下内容。自定义html元素的简单示例，其中的按钮已添加到其影子DOM。

Let's say you have the following on the page. Simple example of a custom html element with a button added to its shadow 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>

假设您要在访问者点击按钮时触发规则。

Let's say you want to trigger a rule when a visitor clicks on the button.

快速解决方案示例

这时我应该说你可以通过使用带有自定义代码条件的查询选择器 my-component＃myComponentContainer 来执行启动单击事件规则，方法如下：

At this point I should probably say that you can get away with doing a Launch click event rule with query selector my-component#myComponentContainer with a custom code condition along the lines of:

return event.nativeEvent.path [0] .matches（'button＃myButton'）;

这种情况应该适用于这种情况，因为此处排列了许多星星：

Something like this should work for this scenario because there are a lot of stars aligned here:

• 阴影dom是开放模式，因此没有黑客可以覆盖内容


• 对于光和阴影DOM级别都有容易识别的唯一CSS选择器


• 您只想听一下click事件，该气泡冒起，
  就像在阴影根的轻型DOM根上单击一样。

在实践中，您的需求可能不会那么容易。也许您需要附加一些其他事件侦听器，例如视频播放事件。不幸的是，目前还没有一刀切的解决方案。这取决于您的实际跟踪要求。

In practice though, your requirements probably aren't going to be this easy. Maybe you need to attach some other event listener, such as a video play event. Unfortunately, there is no "one size fits all" solution at this point; it just depends on what your actual tracking requirements are.

但是，总体而言，目标与您要求开发人员执行的目标几乎相同：在上下文中创建并广播自定义（轻型）DOM事件

But in general, the goal is pretty much the same as what you would have asked the devs to do: create and broadcast a custom (light) DOM event within the context of the shadow DOM.

更好的解决方案示例

使用相同的组件示例和上述要求，您可以例如创建一个规则以在DOM Ready上触发。将其命名为我的组件跟踪-核心之类的名称。没有条件，除非您想执行类似的操作，例如检查Web组件的根源DOM元素是否存在。

Using the same component example and requirement as above, you could for example create a rule to trigger on DOM Ready. Name it something like "My Component Tracking - Core" or whatever. No conditions, unless you want to do something like check if the web component's root light DOM element exists or whatever.

总体而言，这是将事件侦听器附加到按钮并调度自定义事件以供Launch侦听的核心代码。请注意，此代码基于上面的示例组件和跟踪要求。此例是唯一的。您将需要根据自己的设置编写类似的代码。

Overall, this is the core code for attaching the event listener to the button and dispatching a custom event for Launch to listen for. Note, this code is based on our example component and tracking requirements above. It is unique to this example. You will need to write similar code based on your own setup.

添加带有以下内容的自定义js容器：

Add a custom js container with something along the lines of this:

// 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);
    }
}

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

From here, you can create a new rule that listens for the custom event broadcast.

自定义事件规则示例

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变量，发送信标等）。

From here, you can set whatever Actions you want (set Adobe Analytics variables, send beacon, etc.).

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

Note: In this example, I sent a data payload to the custom event. You can reference the payload in any custom (javascript) code box with event.detail, e.g. event.detail.value. You can also reference them in Launch fields with the % syntax, e.g. %event.detail.value%.

这篇关于分析脚本未从影子DOM发送数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！