Как реализовать Pendo в Angular 8+

Я пытаюсь настроить Pendo в своем приложении Angular 8. Однако их документация, похоже, отключена. Примеры сценариев не соответствуют реальным сценариям, которые мне предоставлены в моей панели управления для 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']);
            });

        }
    }
    ```
Источник

1 ответ

Решение

Вот рабочая версия всего, что требуется для установки Pendo через страницу Index.html, а затем инициализации объекта pendo в компоненте, который проверяет, подписан ли пользователь.

Главное здесь - не включать ключ в метод pendo.initialize.

Index.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']);
        });
    }
  }
}
Источник
Другие вопросы по тегам