我正在尝试在我的 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"。
所以我联系了支持人员，他们建议我运行 pendo.initialize在 Angular 之外使用 ngZone。
有没有人知道需要修改什么来初始化 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']);
});
}
}
```
最佳答案
这是通过 Index.html 页面安装 Pendo 所需的所有工作版本，然后在验证用户已签名的组件中初始化 pendo 对象。
这里的关键是不要将 key 包含在 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']);
});
}
}
}
关于angular - 如何在 Angular 8+ 中实现 Pendo，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61275117/