个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我需要在 Angular 项目中实现 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 中执行此操作的正确方法是什么？
最佳答案
我遇到了同样的问题，并提出了以下解决方案。它仅适用于使用路由器的应用程序。希望有帮助:
在您的应用文件夹中为像素服务创建一个文件夹(例如 facebook-pixel-service)，然后为服务代码创建文件(例如 facebook-pixel.service.ts)并复制以下代码工作原理如下:
在与应用程序的其他路径/页面相对应的所有其他执行中，它只会触发 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 上注入(inject)服务。下面的代码将仅创建一个提供程序，该提供程序订阅每次触发 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 { }
关于angular - 如何在 Angular 中实现 Facebook 像素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57318029/
26
4
0
为什么这个脚本不起作用？仅当页面宽度超过 915 像素时，我希望单击按钮时滚动页面 100 像素。我试图通过仅在宽度超过 915 像素时允许该函数运行来实现此目的，但它没有发生。怎么办？ $(docu
我需要您帮助我建立一个网站。我是一个新手，已经得到了一个设计为 900 像素宽的主体，但他们给了我一个 1200 像素宽的图像。他们希望图像跨越整个 1200 像素的宽度，因此页面两侧基本上会有 30
我有一个在 y 轴上展开的 UIScrollview 并调用这个委托(delegate)方法: -(void)scrollViewDidScroll:(UIScrollView *)scrollVie
我有一个固定的标题这个标题在我滚动时改变高度和图像标志但是当我调整窗口大小时我希望图像保持比例但随着我缩小浏览器而变得更小标志只有在限制时缩小浏览器靠近图像，但我希望在调整浏览器大小时图像变小。 我该
在我的项目中，我使用 ArcGIS API for JavaScript https://developers.arcgis.com/javascript/但是对于(在这里插入非常大的坏词)我无法覆盖
有没有办法使用 jQuery，根据窗口滚动的距离做不同的事情？ 这是我现在使用的代码； $(document).scroll(function() { // If scroll distanc
这基本上是 Jetpack Joyride 中运动的基本版本，但不是 Joyrider 以每秒 100 像素的速度下降，而是字母“x”从控制台的正中间以每秒 100 像素的速度下降和点击事件会导致它以
我像这样处理 MINMAXINFO: case WM_GETMINMAXINFO: { LPMINMAXINFO p_info = (LPMINMAXINFO)lPar
我对 javascript 有点陌生，我一直在查找 documentElement、clientWidth 和 clientHeight 并试图找出为什么它将我的 Canvas 设置为 300px x
我正在编写一些软件来读取 DICOM 文件，但我不确定如何处理具有未定义长度的标签。标准是这样说的 “如果值字段具有显式长度，则值长度字段应包含等于长度(以字节为单位)的值 值字段。否则，值字段 有一
我对 OpenGL 有点陌生，但我很确定我的问题在于所使用的像素格式，或者我的纹理是如何生成的...... 我正在使用 16 位 RGB5_A1 像素格式在平面 2D 四边形上绘制纹理，但在这个阶段我
有没有办法获取直播电视流，例如在像素级别上进行分析。 我的目标是检查直播电视流(例如使用java)，例如广播电台 Logo 是否可见。 有机会通过 Google 电视观看此直播吗？ 是否有机会通过笔记
我正在尝试构建一个函数，它以给定角度从特定坐标延伸，并循环遍历该线上的像素，直到遇到黑色像素. 如果角度为 180 度，这很容易实现。在这种情况下，搜索只会向下扩展，在每次迭代中将列坐标加 1。然而，
我已经研究了一段时间，但找不到任何解决方案。 这是我的代码 如果您将此代码复制并粘贴到本网站的 HTML 区域:http://jsfiddle.net/T3Nnu/3/ 如果您查看 Facebo
我有一个网页 - http://bit.ly/YHFX5B如果你看一下页脚，你会发现它后面有一些额外的白色像素/线条。我不明白他们是从哪里来的。 请告知他们可能来自哪里。 谢谢，丹 最佳答案 在 #f
如何在没有状态栏和操作栏的情况下获取屏幕高度(像素)或者如果有人告诉我如何获取状态栏和操作栏的高度，它也会有所帮助。我已经找到了屏幕高度，但它包括状态栏和操作栏.我将支持库 v7 用于操作栏。我在网上
Java 字符串根据宽度(像素)换行 在一些场景下，我们经常会通过判断字符串的长度，比如个数来实现换行，但是中文、英文、数字、其实在展示的时候同样长度的字符串，其实它的宽度是不一样的，这也是们我通
我创建了一个不错的简单可扩展列表。它应该像单选列表一样工作，您应该只能选择一个元素。我还没有实现这部分，因为我对列表的大小有疑问: class ExpandableListRadio extends
我使用以下代码滚动到元素顶部，但我想滚动到元素顶部上方 10px，不知道如何执行此操作，有什么建议吗？谢谢! $('html, body').stop(true,true).animate({
我有一个链接，可以在滚动时更改其垂直位置。当我点击此链接时，我想(平滑地)转到页面上的某个位置，该位置距离页面顶部正好 1080 像素。 我无法实现它，希望有人能帮助我。 链接: 脚本: $(do
我是一名优秀的程序员,十分优秀！