Shopify 与 GA4

77 阅读2分钟

目前 Shopify 安装GA4有几种方式?

  • 1:在"偏好设置" 可以设置
  • 2: 在"设置" 中的 ”客户事件“ 通过自定义Javascript沙箱代码可以设置
  • 3:直接在代码中引入

问题: 重复设置 1,2 会导致部分事件重复提交到GA4的报告中,可以通过谷歌分析后台的”报告“ 中”实时“去验证,我自己测试的 add_to_cart,发现了重复的情况,由于 3 直接在更改代码是由开发人员控制,可以控制提交的时机,所以可以规避某些事件不上报到GA4,也可以自由的自定义一些事件去上报到GA4

第一种

help.shopify.com/zh-CN/manua…

    - page_view
    - search
    - view_item
    - add_to_cart
    - begin_checkout
    - add_payment_info
    - purchase

第二种

shopify.dev/docs/api/we…

    var script = document.createElement("script");
    script.setAttribute("src", "https://www.googletagmanager.com/gtag/js?id=G-xxxx");
    script.setAttribute("async", "");
    document.head.appendChild(script);

    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());
    gtag("config", "G-xxxx");
    // DO NOT forget updating G-XXXXXXXXXX with your own GA4 measurement ID - learn more on https://docs.analyzify.app/find-your-google-analytics-tracking-id

    var Analyzify = {
      getItemsFromLineItems(lineItems) {
        let items = []
        for (var item of lineItems) {
          items.push({
            item_id: item.variant.product.id,
            item_name: item.variant.product.title,
          })
        }

        return items
      },

      getPageViewData(evt) {
        let ctx = evt.context
        return {
          page_location: ctx.document.location.href,
          page_title: ctx.document.title,
          language: ctx.language,
        }
      },

      getItemsFromCartViewData(lines){
        let items = []
        for (var item of lines) {
          items.push({
            item_id: item.merchandise.id,
            item_name: item.merchandise.title,
            price: item.merchandise.price.amount,
            quantity: item.merchandise.quantity,
          })
        }
      },

      getViewItemData(evt) {
        return {
          currency: evt.data.productVariant.price.currencyCode,
          value: evt.data.productVariant.price.amount,
          items: [{ item_id:evt.data.productVariant.id,item_name:evt.data.productVariant.product.title,item_brand:"哈哈哈"}],
        }
      },

      getAddToCartData(evt) {
        return {
          currency: evt.data.cartLine.merchandise.price.currencyCode,
          value: evt.data.cartLine.merchandise.price.amount,
          items: [{ item_id: evt.data.cartLine.merchandise.id, item_name: evt.data.cartLine.merchandise.product.title }],
        }
      },

      getPaymentInfoData(evt) {
        return {
          currency: evt.data.checkout.currencyCode,
          value: evt.data.checkout.totalPrice.amount,
          items: this.getItemsFromLineItems(evt.data.checkout.lineItems),
        }
      },

      getCheckoutData(evt) {
        return {
          currency: evt.data.checkout.currencyCode,
          value: evt.data.checkout.totalPrice.amount,
          items: this.getItemsFromLineItems(evt.data.checkout.lineItems),
        }
      },

      getCheckoutCompletData(evt) {
        return {
          transaction_id: evt.data.checkout.order.id,
          currency: evt.data.checkout.currencyCode,
          value: evt.data.checkout.totalPrice.amount,
          items: this.getItemsFromLineItems(evt.data.checkout.lineItems),
        }
      },
      getCartViewData(evt){
        return {
          // currency: evt.data.checkout.currencyCode,
          // value: evt.data.checkout.totalPrice.amount,
          items: this.getItemsFromCartViewData(evt.data.cart.lines),
        }
      }
    }


    analytics.subscribe("page_viewed", async (event) => {
      gtag("event", "page_view", Analyzify.getPageViewData(event));
    });
    analytics.subscribe("cart_viewed", async (event) => {
      gtag("event", "view_cart", Analyzify.getCartViewData(event));
    });

    analytics.subscribe("product_viewed", async (event) => {
      gtag("event", "view_item", Analyzify.getViewItemData(event));
    });

    analytics.subscribe("search_submitted", async (event) => {
      gtag("event", "search", {
        search_term: event.data.searchResult.query,
      });
    });

    analytics.subscribe("product_added_to_cart", async (event) => {
      gtag("event", "add_to_cart", Analyzify.getAddToCartData(event));
    });



    analytics.subscribe("payment_info_submitted", async (event) => {
      gtag("event", "add_payment_info", Analyzify.getPaymentInfoData(event));
    });

    analytics.subscribe("checkout_started", async (event) => {
      gtag("event", "begin_checkout", Analyzify.getCheckoutData(event) );
    });

    analytics.subscribe("checkout_completed", async (event) => {
      gtag("event", "purchase", Analyzify.getCheckoutCompletData(event));
    });


    analytics.subscribe("checkout_address_info_submitted", async (event) => {
      gtag("event", "checkout_address_info_submitted");
    });

    analytics.subscribe("checkout_contact_info_submitted", async (event) => {
      gtag("event", "checkout_contact_info_submitted");
    });

    analytics.subscribe("checkout_shipping_info_submitted", async (event) => {
      gtag("event", "checkout_shipping_info_submitted");
    });

目前shopify安装GA4后测试的方式?

  • 1: 安装插件taga ssistant

  • 2:可以通过谷歌分析 ”设置“ - ”媒体资源管理“ - ”DebugView“ 观察,或者 实时报告查看事件

注意: 通过自定义Javascript沙箱代码,在 ”DebugView“ 中是无法验证的