最近换了工作,使用的框架是nuxt.js,公司业务是做跨境电商的,最近有一个需求是要做谷歌的统计和埋点以及facebook的统计和埋点。本菜鸟本身对nuxt这个框架也不是运用的很熟练,业务随即发过来一堆代码,让我放在head里面,我看着代码一脸懵逼,主要还是技术太菜,但是磕磕绊绊还是把它写了,目前只是记录一下。

发来的两串代码如下:
这个是google的
在这里插入图片描述
这个是facebook的
在这里插入图片描述
我针对于google,我是做了如下处理:
在app.vue里放上如下代码:
在这里插入图片描述
在nuxt.config.ts里面更改
在这里插入图片描述
针对于facebook,我是做了如下处理:
首先新建一个插件文件plugins/facebook-pixel-plugin.js,代码如下:

export default defineNuxtPlugin((nuxtApp) => {
  if (process.client) {
    const script = document.createElement('script');
    script.innerHTML = `!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', '改成你的id'); fbq('track', 'PageView');`;

    document.head.appendChild(script);

    const noscriptImg = document.createElement('noscript');
    noscriptImg.innerHTML = `<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=改成你的id&ev=PageView&noscript=1" />`;
    document.body.insertBefore(noscriptImg, document.body.firstChild);
  }
});

在nuxt.config.ts里面引入即可
在这里插入图片描述
目前没出什么问题,但是还是一知半解,如果对这个有了解的小伙伴请私信我,希望能够多多学习
本片只是暂时记录,具体的做法还是需要各位自己斟酌,谢谢观看

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐