如何在 Angular 中实现 facebook 像素？

Question

我需要在一个有角度的项目中实现一个 facebook 像素。 我的index.html中有来自src/index.html的像素

<!doctype html>
<html lang="en">
  <head>
  .....
  </head>

<body>
  <app-root></app-root>
  <!-- Facebook Pixel Code -->
  <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', 'XXXXXXXXXXXXX');
    fbq('track', 'PageView');
  </script>
  <noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=XXXXXXXXXXXXX&ev=PageView&noscript=1"
  /></noscript>
  <!-- End Facebook Pixel Code -->
  <script>
  </script>
</body>
</html>

这就是它“实施”的方式，但它不起作用，至少 facebook 小组是这么说的。

在使用 Angular 制作的 SPA 中执行此操作的正确方法是什么？

Answer 1

我遇到了同样的问题，并提出了以下解决方案。 仅适用于使用路由器的应用程序。 希望能帮助到你：

在您的应用文件夹中，为像素服务创建一个文件夹（例如，facebook-pixel-service），然后为服务代码创建该文件（例如，facebook-pixel.service.ts），并复制如下所示的代码：

应用程序第一次加载应用程序的根组件时，它将执行将facebook脚本附加到根组件html的操作。 它还将调用init并为当前页面触发PageView事件（通常在Router上为路径“ /”）。

在应与应用程序的其他路径/页面相对应的所有其他执行上，它将仅触发PageView事件。

 import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class FacebookPixelService { private loadOk:boolean = false; constructor() { } load() { if (!this.loadOk) { (function (f: any, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) })(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js'); (window as any).fbq.disablePushState = true; //not recommended, but can be done (window as any).fbq('init', '381817369337156'); (window as any).fbq('track', 'PageView'); this.loadOk = true; console.log('Facebook pixel init run!') } else { (window as any).fbq('track', 'PageView'); console.log('Facebook PageView event fired!') } } }

在服务的同一文件夹上，为提供者创建另一个文件（例如facebook-pixel.provider.ts），该文件将在app.module上注入服务。 下面的代码仅会创建一个提供程序，该提供程序将在每次触发Router事件时都将调用我们的像素服务，并且此事件为NavigationEnd，这意味着它是对路径/页面的成功更改。

 import { Provider, APP_BOOTSTRAP_LISTENER, ComponentRef } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import { FacebookPixelService } from './facebook-pixel.service' export const FACEBOOK_PIXEL_PROVIDER: Provider = { provide: APP_BOOTSTRAP_LISTENER, multi: true, useFactory: FacebookPixelRouterInitializer, deps: [ FacebookPixelService, Router ] }; export function FacebookPixelRouterInitializer( $fpService: FacebookPixelService, $router: Router ) { return async (c: ComponentRef<any>) => { $router .events .subscribe(event => { if (event instanceof NavigationEnd) { console.log(`Navigated to URL: ${event.url}`); $fpService.load(); } }); }; }

现在，只需将app.moudle文件上的@NgModule指令通知提供者。 框架将完成其余工作，并确保它将订阅我们的提供程序到路由器，并在适当时调用它。 以下代码段显示了如何通知提供商（搜索FACEBOOK_PIXEL_PROVIDER）：

 ... import { RouterModule, Routes } from '@angular/router'; ... import { AppComponent } from './app.component'; ... import { FACEBOOK_PIXEL_PROVIDER } from './facebook-pixel-service/facebook-pixel.provider' @NgModule({ declarations: [ AppComponent, ... ], imports: [ ... RouterModule.forRoot([ { path: '', Component: TheRootPath}, { path: 'path1', Component: Path1}, { path: 'path2', Component: Path2}, { path: '**', component: PageNotFoundComponent }, ]), ], providers: [ FACEBOOK_PIXEL_PROVIDER ], bootstrap: [AppComponent] }) export class AppModule { }

Answer 2

我遇到了同样的问题，所以我创建了这个包，它将有助于简化使用 Facebook Pixel 的跟踪。 它还支持多个像素 ID。 https://www.npmjs.com/package/ngx-multi-pixel

我希望它有所帮助。

如何在 Angular 中实现 facebook 像素？

问题描述

2 个解决方案

解决方案1
1 2019-09-26 16:06:40

解决方案2
0 2022-12-19 14:58:38

如何在 Angular 中实现 facebook 像素？

问题描述

2 个解决方案

解决方案1 1 2019-09-26 16:06:40

解决方案2 0 2022-12-19 14:58:38

解决方案1
1 2019-09-26 16:06:40

解决方案2
0 2022-12-19 14:58:38