Google tag manage集成第三方pixel(snapchat)

本文主要讲一下在Shopify中使用GTM接入snapchat pixel的过程

进入跟踪代码管理器页面

选择"变量",点击新建配置变量,

这儿配置一个常量,在输入框中填写从snapchat管理平台copy出来的snapchat pixel ID。

然后点击"代码",创建一个snapchat pageView事件

选择Snap Pixel模版后,点击下图画红框的图标,选择刚刚创建的snapchat pixel ID,填充下图中的pixel ID输入框

点击保存,这样就创建好了snapchat pixel的pageView事件

点击"预览",如下图所示:

然后接下来创建viewcontent事件,首先,我们先新建几个数据层变量

这些变量需要在电商网站定义,比如像这样

php 复制代码
 // 注意:代码仅在Shopify中生效,其他建站平台请参考平台文档
 // 判断页面在商品详情页
 {% if request.page_type == 'product' %}
   <script>
    var gloabalProductsInfo = {{product | json}};
   var productDetails = gloabalProductsInfo.variants[0];
   // 定义数据层变量以及view_item事件,方便在GTM事件中使用
     dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
    dataLayer.push({
      event: "view_item",
      ecommerce: {
          currency: '{{ shop.currency }}',
          item_name: productDetails.name,
          item_category: '{{product.type}}',
          item_id: productDetails.id,
          price: productDetails.price,
          sku: productDetails.sku,
        item_ids: gloabalProductsInfo.variants.map(a => a.id)
      }
    });
   </script>
   <script>
  var addcartBtn = document.querySelector('[data-add-to-cart]');
    if (addcartBtn) {
        document.querySelector('[data-add-to-cart]').addEventListener('click', function () {
            dataLayer.push({ ecommerce: null });
            // 定义add_to_cart事件,方便在GTM中创建自定义事件来调用它
            dataLayer.push({
                event: "add_to_cart",
                ecommerce: {
                    item_name: productDetails.name,
                    item_id: productDetails.id,
                    item_category: '{{product.type}}',
                    price: productDetails.price,
                    sku: productDetails.sku,
                    currency: '{{shop.currency}}',
                    item_ids: gloabalProductsInfo.variants.map(a => a.id)
                }
            });
        });
    }
</script>
 {% endif %}}
 // 购买成功
 {% if first_time_accessed %}
 <!-- 放GTM初始化代码 -->
 {% assign itemIds = checkout.line_items | map: "variant_id" %};
 dataLayer.push({ecommerce: null});
 dataLayer.push({
    event: "purchase",
    ecommerce: {
            price: {{ order.total_price }}/100,
            'transaction_id':"{{ order.order_number }}",
            'user_email': "{{ order.email }}",
            'item_ids': '{{ itemIds | join: ", " }}',
            currency: '{{shop.currency}}'
            // 、、、、、、、、、、
    }
});
 {% endif %}

上述代码中,dataLayer.push的信息是为了方便在GTM中使用,event代表自定义事件名,在GTM中可以选择在网站中自定义事件名来触发pixel的各种事件,比如创建名为view_item的触发器

下图就是viewcontent事件的详细信息

下图是addcart事件的详细信息,其中addCart自定义事件触发器创建流程和viewcontent事件一样

下图是purchase事件的详细信息

自此,GTM集成snapchat pixel过程在这里就介绍完成了

参考文档:

GTM快速入门指南

用户定义的网页变量类型

相关推荐
roman_日积跬步-终至千里15 分钟前
【系统架构设计(25)】Web应用服务器与现代架构
前端·架构·系统架构
yshhuang18 分钟前
在Windows上搭建开发环境
前端·后端
littleplayer19 分钟前
Redux在iOS中的使用
前端
跟橙姐学代码20 分钟前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython
jingling55520 分钟前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
UrbanJazzerati21 分钟前
可拖拽的进度条组件实战:实现思路与Demo
前端·面试
Cache技术分享24 分钟前
188. Java 异常 - Java 异常处理规范
前端·后端
不一样的少年_27 分钟前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手30 分钟前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
我是日安31 分钟前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js