angular - Google Tag Manager JS 错误触发器不适用于 Angular App

Question

我正在努力让 GTM JS 错误触发器触发我的 Angular 应用程序中未捕获的异常。
我在这里遵循了指南 https://www.simoahava.com/gtm-tips/track-javascript-errors-events/并完全按照他们提到的方式设置触发器和标签。
我抛出一个未捕获的异常来尝试测试它，希望看到错误事件出现在我的 GA 控制台的实时 View 中。
抛出错误时，我没有看到任何东西被插入 dataLayer

我还有其他标签\触发器，例如自定义 pageview事件触发得非常好并且毫无问题地流向 GA。
标签设置

触发设置

谁能建议我在这里做错了什么？

Answer 1

Javascript error触发器不触发，因为 angular有一个默认的错误处理机制，它不会让错误传播到外面。它消耗错误，然后将其记录在控制台上。要验证，请尝试将以下脚本放入 index.html 文件中 -

  <script>
    window.onerror = function (msg, url, lineNo, columnNo, error) {
      console.log('This wont get to console because Angular!! ');
      return true;
    }
  </script>

如果您阅读 this google help page about javascript error trigger ，它说，标签是在 window.onError 上触发的由于 angular 的默认错误处理程序而永远不会发生的事件 -

Google Tag Manager's JavaScript error trigger is used to fire tagswhen an uncaught JavaScript exception (window.onError) occurs.

你有两个选择来解决这个问题 -
选项 1 :
创建您的自定义处理程序并通过将错误添加到 dataLayer 来手动触发触发器。 .但是你可能需要找出像 gtm.errorLineNumber 这样的属性和 gtm.errorUrl你自己。结帐 this working sample on StackBlitz (您需要更改 index.html 中的脚本以指向您的 GTM 预览/调试)-

declare var dataLayer;
@Injectable()
export class ErrorsHandler implements ErrorHandler {
  constructor(private injector: Injector) { }
  handleError(error: any) {
     const location = this.injector.get(LocationStrategy);
    const message = error.message ? error.message : error.toString();
    const url = location instanceof PathLocationStrategy
      ? location.path() : '';

     const event = {
       'event': "gtm.pageError",
       'gtm.errorLineNumber': '',
         'gtm.errorMessage': message,
         'gtm.errorUrl': url,
         'gtm.uniqueEventId': dataLayer.length+1
     }
      dataLayer.push(event);
  }
}

选项 2 :
从您的自定义错误处理程序重新抛出错误，但这会破坏您的应用程序(也可能是无限递归？)-

@Injectable()
export class ErrorsHandler implements ErrorHandler {
  constructor(private injector: Injector) { }
  handleError(error: any) {
    throw error;
  }
}