将hotjar脚本注入angular页面中的head元素

Question

我想在head标签中添加加载此脚本的条件。我需要检查，如果URL是从我们的生活域名，然后只有它运行，否则不。如果没有条件要求，我可以简单地将此脚本添加到头部。我如何在angular的head标签中注入这个脚本？

例如：

然后，window.origin == 'https://www.stackoverflow.com'将此脚本注入到head标记中，否则不会。

<script>
        (function(h,o,t,j,a,r){
            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
            h._hjSettings={hjid:*******,hjsv:*};
            a=o.getElementsByTagName('head')[0];
            r=o.createElement('script');r.async=1;
            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
            a.appendChild(r);
        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    </script>

Answer 1

您可以在您的一个组件中处理此问题，最好是在app.component中。当然，您也可以检查URL，但更好的做法是在environment.ts文件中设置一些像enableHotjarTracking这样的标志，并只针对您的生产环境将其设置为true。

然后，您可以在您的app.component.ts中按如下方式调用它

import { environment } from './environments/environment';
import { DOCUMENT } from '@angular/common';

...

// inject document wrapper
constructor(
 @Inject(DOCUMENT) private document: Document,
){}

ngAfterContentInit() {
  if(environment.enableHotjarTracking) {
          ((h, o, t, j, a, r) => {
            h.hj =
              h.hj ||
              /* tslint:disable:only-arrow-functions */
              function () {
                (h.hj.q = h.hj.q || []).push(arguments);
              };
            h._hjSettings = { hjid: xxxx, hjsv: x };
            a = o.getElementsByTagName('head')[0];
            r = o.createElement('script');
            r.async = 1;
            r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
            a.appendChild(r);
          })(window as any, this.document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
  }
}

您还可以将您的hotjar id保存在环境文件中。