I'm having some trouble setting up Pendo in my Angular 8 application. The documentation provided by Pendo doesn't seem to align with the actual scripts given in my control panel. Additionally, the YouTube tutorials are quite outdated, appearing to be written for Angular JS.
Following the instructions on Pendo's installation guide, I added the initial script snippet to my index.html just before the closing <body> tag.
Next, I integrated pendo.initialize into my authorization component as per the guidelines.
However, upon testing, I encountered an error message in the browser console: ERROR TypeError: "pendo.initialize(...) is not a function".
After reaching out to support, they advised me to run the pendo.initialize outside of Angular using ngZone.
If anyone has suggestions on how to properly initialize Pendo without encountering this undefined error, I would greatly appreciate it!
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>
In my login component
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']);
});
}
}