个人中心
gpt4 book ai didi

angular - 如何在 Angular 8+ 中实现 Pendo

转载 作者：行者123 更新时间：2023-12-05 02:55:23 26 4
gpt4 key购买 nike

我正在尝试在我的 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/

26 4 0
文章推荐： git - 如何删除未使用的 git 远程提交？
文章推荐： php - Opencart更新修改文件夹文件
文章推荐： python-3.x - Python/Selenium - 如何解析 URL 并单击下一页？
文章推荐： sql-server - 将 EF Core 迁移更改为不同的默认所有者
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com