###2### Shopify安装GA4以及配置事件

共计 2217 个字符，预计需要花费 6 分钟才能阅读完成。

一、创建事件

在GA4面板选择配置-转化，点击新建转化事件分别创建事件名称为content_view、add_to_cart、check_out的三个转化事件

二、安装代码

theme.liquid head标签下添加以下代码（注：G-XXXXXX换成自己的GA4的衡量ID）

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());


  gtag('config', 'G-XXXXXX');
</script>

  <script>
  window.addEventListener('DOMContentLoaded', function(event){
    document.querySelectorAll('[name="add"]').forEach(function(e){
e.addEventListener('click', function()
{
  gtag('event', 'add_to_cart', {
  'event_category': 'add_to_cart'
});
});
});   
  });
</script>

<script>
  window.addEventListener('DOMContentLoaded', function(event){
    document.querySelectorAll('[name="checkout"]').forEach(function(e){
e.addEventListener('click', function()
{
  gtag('event', 'check_out', {
  'event_category': 'check_out'
});
});
});   
  });
</script>

<script>
  window.addEventListener("DOMContentLoaded", function(event)
  {
    if (window.location.href.includes('/products/'))
  {  
    gtag('event', 'content_view', {
  'event_category': 'content_view'
});   };  
       });
  </script>

设置-结账-自定义脚本添加以下代码（注：G-XXXXXX换成自己的GA4的衡量ID）

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());


  gtag('config', 'G-XXXXXX');
</script>


<script>
  {% if first_time_accessed %}
  gtag('event', 'purchase', {
  "send_to" : "G-XXXXXX",
  "transaction_id": "{{order.order_number}}",
  "value": {{total_price | times: 0.01}},
  "currency": "{{ order.currency }}",
  "tax": {{tax_price | times: 0.01}},
  "shipping": {{shipping_price | times: 0.01}},
  "items": [
  {% for line_item in line_items %}{
  "id": "{{line_item.product_id}}",
  "name": "{{line_item.title}}",
  "quantity": {{line_item.quantity}},
  "price": {{line_item.line_price | times: 0.01}}
  },{% endfor %}
  ]
  });
  {% endif %}
  </script>