angular - 如何在 Angular 8+ 中实现 Pendo
问题描述
我正在尝试在我的 Angular 8 应用程序中设置 Pendo。但是,他们的文档似乎已关闭。示例脚本与我的 Pendo 控制面板中提供给我的实际脚本不匹配。此外,他们的 YouTube 演练已有 4 年历史,看起来像是为 Angular JS 编写的。
我遵循了位于https://support.pendo.io/hc/en-us/articles/360031862272-Installation-for-Single-Page-Frameworks
我将脚本的第一部分放在结束<body>
标记之前的 index.html 页面上。
然后我把它pendo.initialize
放在我的授权组件中。
然而,这并没有奏效。我在浏览器控制台中收到ERROR TypeError: "pendo.initialize(...) is not a function"。
所以我联系了支持人员,他们建议我pendo.initialize
使用 ngZone 在 Angular 外部运行。
有谁知道需要修改什么来初始化 pendo 而不会出现未定义的错误?
所以这就是我结束的地方。
索引.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 对象。
这里的关键是不要在 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']);
});
}
}
}
推荐阅读
- ios - 重新加载时带有 UIRefreshControl 的 TableView 似乎有点小故障?
- botframework - 任务模块机器人框架
- javascript - 重新加载页面时 gapi.auth2.getAuthInstance() 为空
- ionic-framework - “src\app\app.module.ts(60,22) 中的错误:在模板编译 'AppModule' 期间出错”,同时使用 cordova 将离子应用程序构建到 ios --prod
- python - TypeError:类型函数的对象不是 JSON 可序列化的
- python - 如何使用所有可能的构造函数参数排列来测试对象/类?
- excel - 打开本地 Access 数据库并连接到 SQL 以运行 Access 宏
- java - 如何在android(Java)中设置lottiefiles动画的循环数?
- php - 如何在 FORM.blade 中禁用可选
- react-native - 无法从“screens/HomeScreen.js”解析“expo-av”