# 面向页面浏览量指标的有效事件观测

**URL:** https://meta.discourse.org/t/effective-event-watching-for-page-view-oriented-metrics/121125
**Category:** Development
**Created:** [2019年六月24日 02:25 UTC](https://meta.discourse.org/t/effective-event-watching-for-page-view-oriented-metrics/121125 "2019-06-24T02:25:19Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![will\_io](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/will_io/32/147541_2.png) [@will\_io](https://meta.discourse.org/u/will_io)
#### Post date: [2019年六月24日 02:25 UTC](https://meta.discourse.org/t/effective-event-watching-for-page-view-oriented-metrics/121125/1 "2019-06-24T02:25:19Z")

</div>

One of the truly beautiful parts about Discourse is the fact that once logged-in you load the page once and the rest of the user experience navigates like a true software application. Much of it is javascript feeding from a predictable set of Rails API endpoints.

Here are approaches I have been trading off using in my current install:

1. The “Pre-2017 triad”:

- new Event
- addEventListener to node
- setInterval to monitor

  + [insert series of conditions that can get truthy]

1. Post-2017 MutationObserver() class:

- MutationObserver()
- observe w/ class-based filters

How else can we detect the Ember-based events changing the DOM inside Discourse? Are there specific events we can listen to? Are there better approaches than what I am using?

Hoping to get people to throw up some example approaches and theories.

Thanks!

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2019年六月24日 02:31 UTC](https://meta.discourse.org/t/effective-event-watching-for-page-view-oriented-metrics/121125/2 "2019-06-24T02:31:56Z")

</div>

For page view metrics we have built-in support:

```javascript
<script type="text/discourse-plugin" version="0.2">
  api.onPageChange((url, title) => {
    // do stuff
  });
</script>

```

---

<div class="post-metadata">

### Author: ![Terrapop](https://avatars.discourse-cdn.com/v4/letter/t/ecd19e/32.png) [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [2020年八月15日 18:53 UTC](https://meta.discourse.org/t/effective-event-watching-for-page-view-oriented-metrics/121125/3 "2020-08-15T18:53:29Z")

</div>

不幸的是，这还不够，因为在该事件发生时 DOM 树尚未完全创建。请参见此处：

> [@virtualPageView and the virtual DOM](https://meta.discourse.org/t/virtualpageview-and-the-virtual-dom/160975):
>
> We want to use GTM to inject ads into the DOM. We installed the ads plugin and set up the various empty house ad types with div containers like \<div id="adunit\_x"\>\</div\> However, when evaluating the id of all ad div containers on virtualPageView the ads between the posts have not rendered, yet. Probably because the virtual dom has not rendered everything on the virtualPageView event that we’re using to trigger the evaluation. When adding a timeout e.g. 3000ms before evaluating all ad div conta…