vue3 + nuxt3 + Google Analytics 4 + Facebook meta-pixel. 数据统计埋点 以及 Facebook 微数据标签

GA4 步骤

第一步先打开文档nuxt GA4 文档
注意：这里有个小坑 如果直接使用下面的安装方式 会直接下载 gtag : 1.x.x 版本 这是老版本的 在nuxt3 中无法使用 (而且 在nuxt.config 中引入一直报错)

npx nuxi@latest module add gtag

我们需要的是 nuxt-gtag 所以这边可以直接下载

npm install nuxt-gtag
# 或者使用 yarn
yarn add nuxt-gtag

然后在nuxt.config中添加：(id：是gtagId G-xxxxxxxxx ，enable :是否在页面加载后立即初始化Google标记脚本)

接下来在页面 js 中使用 数据埋点 （其他的event 事件 请参考Google Analytics 4 自定义事件)

<script setup lang="ts">
const { gtag } = useGtag()

gtag('event', 'screen_view', {
  app_name: 'My App',
  screen_name: 'Home'
})
</scrip

FB meta pixel

第一步先打开文档nuxt FB 文档

npx nuxi module add nuxt-meta-pixel

nuxt.config中添加 （刚开始不知道runtimeConfig/public 下面添加 metapixel 相关数据有什么作用，毕竟 runtimeConfig/public 是放全局默认数据的 但是看了他的源码 我明白了，用来初始化 ）process.env.VUE_PUBLIC_FBQ_ID 是在根目录的 .env 文件中的环境配置 FB 的 像素 id

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-meta-pixel'],
  runtimeConfig: {
    public: {
      metapixel: {
        default: { id: process.env.VUE_PUBLIC_FBQ_ID, pageView: '/posts/**' },
        ads01: { id: '415215247513663' },  //这里可以配置多个像素 id 
        ads02: { id: '415215247513664', pageView: '!/posts/**' },
      }
    }
  }
})

后面可以直接使用了 数据埋点 （其他的event 事件 请参考的FB应用事件)

// app.vue
// This example show how to use fbq in your pages

<script setup lang="ts">
const { $fbq } = useNuxtApp()

onMounted(() => {
let fbData = {
	 content_name: '我的商品',
     content_type: 'product',
     value: 14,
     content_category: ''
}
//示例 加购物车
	$fbq("track", 'AddToCart', fbData);
})
</script>

FB 微数据标签

当一个商品希望被Goole 或其他浏览器收录，或者seo 网站排名做微数据标签

//共用函数，传入的是商品的相关数据 ，直接调用 
// FB 微数据标签
export function createFBPixel(data) {
  let {
    id,
    goodsData,
    goodsName,
    fullPath,
    goodsPrice,
    stock
  } = data
  console.log('createFBPixel====',data)
  // 定义JSON-LD数据
  var jsonLdData = {
    "@context": "http://schema.org",
    "@type": "Product",
    "id": '', // 项目的唯一内容 ID。如果可能，请使用商品的 SKU。每个内容 ID 只能在目录中出现一次。如果同一 ID 存在多个实例，我们将忽略所有实例
    "description": goodsData.seoDescription || goodsData.goodsService, // 商品的描述。
    "productID": id, //商品的零售商编号。
    "sku": "",
    "brand": goodsData.brandName, //商品的品牌。
    "name": goodsName, //商品的名称。
    "image_link": fullPath, //商品图片
    "image": fullPath,
    "offers": {
      "@type": "offers",
      "highPrice": goodsData.goodsPrice, //最高价格
      "lowPrice": goodsData.rebatePrice > 0 ? goodsData.rebatePrice : goodsData
      .storePrice, //最低价格 
      "price": goodsPrice, //商品的当前价格
      // "offerCount": "1", //商品
      'availability': stock > 0 ? 'in stock' :
      'out of stock', //商品的当前库存情况：in stock、out of stock、available for order、discontinued。在“offers”下加入此条目。
      "priceCurrency": "TWD" //货币类型
    },
    "url": window.location.href //商品页面的完整网址。
  };
  // console.log('jsonLdData====',jsonLdData)
  // 将JSON-LD数据转换为JSON字符串
  var jsonLdString = JSON.stringify(jsonLdData, null, 2); // 使用缩进以提高可读性
  
  // 查询之前创建的script，然后删除掉
  var scriptTags = document.getElementsByTagName('script');
  for (var i = 0; i < scriptTags.length; i++) {
    if (scriptTags[i].type === 'application/ld+json') {
    // 删除标签
    scriptTags[i].parentNode.removeChild(scriptTags[i]);
    }
  }
  // 创建一个新的script标签
  var scriptTag = document.createElement('script');
  // 设置script标签的type属性
  scriptTag.type = 'application/ld+json';
  // 将JSON-LD数据作为文本插入到script标签中
  scriptTag.textContent = jsonLdString;
  // 将script标签添加到文档的head部分
  document.head.appendChild(scriptTag);
}