如何在Angular中实现Facebook像素

我需要在Angular Proyect中实现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制成的水疗中心做到这一点是什么？

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

在您的应用程序文件夹中创建一个用于Pixel服务的文件夹(例如Facebook像素服务(，然后创建服务代码的文件(例如Facebook Pixel.service.ts(，然后复制代码bellow如以下作品：

应用程序首次加载应用程序的根组件时，将执行将Facebook脚本附加到root组件HTML。它还将调用INIT并为当前页面启动页面浏览事件(通常是路由器上的路径"/"(。

在所有其他执行中应与应用程序的其他路径/页面相对应的执行，它将仅触发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上注入服务。Code Bellow将仅创建一个提供商，该提供商订阅我们的像素服务，每次启动路由器事件时都称为"被称为"，并且此事件是导航，这意味着这是路径/页面上成功的更改。

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 { }

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

我希望它有帮助。

相关内容

最新更新

热门标签：