如何在 Angular 8+ 中实现 Pendo

Question

我正在尝试在我的 Angular 8 应用程序中设置 Pendo。但是，他们的文档似乎已关闭。示例脚本与我的 Pendo 控制面板中提供给我的实际脚本不匹配。此外，他们的 YouTube 演练已有 4 年历史，看起来像是为 Angular JS 编写的。

我遵循了位于https://support.pendo.io/hc/en-us/articles/360031862272-Installation-for-Single-Page-Frameworks的文档

我将脚本的第一部分放在 index.html 页面上，就在结束 <body> 标记之前。

然后我将pendo.initialize 放在我的授权组件中。

然而，这并没有奏效。我在浏览器控制台中收到 ERROR TypeError: "pendo.initialize(...) is not a function"。

所以我联系了支持人员，他们建议我使用 ngZone 在 Angular 之外运行 pendo.initialize。

有谁知道需要修改什么来初始化 pendo 而不会出现未定义的错误？

这就是我的结局。

index.html

...
    <script>
        (function (apiKey) {
            (function (p, e, n, d, o) {
                var v, w, x, y, z; o = p[d] = p[d] || {}; o._q = [];
                v = ['initialize', 'identify', 'updateOptions', 'pageLoad']; for (w = 0, x = v.length; w < x; ++w)(function (m) {
                    o[m] = o[m] || function () { o._q[m === v[0] ? 'unshift' : 'push']([m].concat([].slice.call(arguments, 0))); };
                })(v[w]);
                y = e.createElement(n); y.async = !0; y.src = 'https://cdn.pendo.io/agent/static/' + apiKey + '/pendo.js';
                z = e.getElementsByTagName(n)[0]; z.parentNode.insertBefore(y, z);
            })(window, document, 'script', 'pendo');
        })('xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
    </script>

</body>

在我的登录组件中

declare let pendo: any;
...
constructor(        
        private ngZone: NgZone
    ) {
...
}
...
private onAuthorizationResultComplete(authorizationResult: AuthorizationResult) {

        if (authorizationResult.authorizationState === AuthorizationState.unauthorized) {
            ...
        } else {
            this.httpClient.post(this.apiUrl, {}).subscribe(r => {
                this.ngZone.runOutsideAngular(function () {
                    pendo.initialize({
                        visitor: {
                            id: 'VISITOR-UNIQUE-ID-test'
                        },
                        account: {
                            id: 'ACCOUNT-UNIQUE-ID-test'
                        }
                    })('xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
                });

                this.router.navigate(['/dashboard']);
            });

        }
    }
    ```

Answer 1

这是通过 Index.html 页面安装 Pendo 所需的所有工作版本，然后在验证用户签名的组件中初始化 pendo 对象。

这里的关键是不要将密钥包含在 pendo.initialize 方法中。

索引.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AngularPendo</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script>
        (function(apiKey) {
            (function(p, e, n, d, o) {
                var v, w, x, y, z;
                o = p[d] = p[d] || {};
                o._q = [];
                v = ['initialize', 'identify', 'updateOptions', 'pageLoad'];
                for (w = 0, x = v.length; w < x; ++w)(function(m) {
                    o[m] = o[m] || function() {
                        o._q[m === v[0] ? 'unshift' : 'push']([m].concat([].slice.call(arguments, 0)));
                    };
                })(v[w]);
                y = e.createElement(n);
                y.async = !0;
                y.src = 'https://cdn.pendo.io/agent/static/' + apiKey + '/pendo.js';
                z = e.getElementsByTagName(n)[0];
                z.parentNode.insertBefore(y, z);
            })(window, document, 'script', 'pendo');
        })('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'); // The Pendo API must stay here with the rest of the Pendo snippet
    </script>
</head>

<body>
    <app-root></app-root>
</body>

</html>

授权组件

import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

declare let pendo: any;

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.scss']
})
export class SigninComponent implements OnInit {

  isAuthorized = true;
  // just need any API URL so we can get a response...doesn't need to be anything specific
  private apiUrl = 'https://api.github.com/users/godfathr';

  constructor(private router: Router, private ngZone: NgZone, private httpClient: HttpClient) { }

  ngOnInit() {
    this.onAuthorizationResultComplete(this.isAuthorized);
  }

  private onAuthorizationResultComplete(authorizationResult: boolean) {

    if (!authorizationResult) {
        console.log('I am not authorized');
    } else {
      console.log('I am authorized');
      // After verifying that a user is authorized, we put the pendo.initialize inside whatever
      // method we need for our app. In this case, it's a redirect to a landing page.
      // They important thing here is to remember not to include the API key with the initialize method.
      this.httpClient.get(this.apiUrl, {}).subscribe(r => {
            pendo.initialize({
                visitor: {
                    id: 'VISITOR-UNIQUE-ID-test'
                },
                account: {
                    id: 'ACCOUNT-UNIQUE-ID-test'
                }
            });

            this.router.navigate(['/authorized']);
        });
    }
  }
}