时间戳

首页 > 解决方案 > 如何将条带结帐中的值插入gtag？

javascript - 如何将条带结帐中的值插入gtag？

问题描述

我是 JavaScript 新手，但有一般的编程经验。我已经能够使用 Netlify 无服务器函数（类似于 AWS Lambda）成功破解一个接受条带结帐的网站。最后一步是加入 Google Ads 来跟踪转化。

对于 google 广告转化跟踪，success.html 页面上的事件片段类似于：

<!-- Event snippet for Subscribe conversion page -->
<script>
  gtag('event', 'conversion', {
      'send_to': 'AW-6543546/4_DFSJKHJFKEHESH',
      'value': 1.0,
      'currency': 'USD'
  });
</script>

在上面的代码中，'value': 应该设置为成功完成条带结账的结账价格。有两个相关文件使所有这些工作：

  1. /success?session_id={CHECKOUT_SESSION_ID}= - 完成购买后重定向到此页面
<html>
<head>

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

    gtag('config', 'AW-6543546');
  </script>
  <!-- Event snippet for Subscribe conversion page -->
  <script>
    gtag('event', 'conversion', {
        'send_to': 'AW-6543546/4_DFSJKHJFKEHESH',
        'value': 1.0,
        'currency': 'USD'
    });
  </script>

</head>

<body>
  <div class="css">
     <session_email></session_email>
  </div>
</body>

<footer>
</footer>

<script src="https://js.stripe.com/v3"></script>
  <script>
    var urlParams = new URLSearchParams(window.location.search);
    var sessionId = urlParams.get('session_id');
    
    if (sessionId) {
      const data = {
        sessionId: sessionId,
      };

      async function loadSuccess() {   

      const response = await fetch('/.netlify/functions/success', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      }).then((res) => res.json());

      console.log(response.session.amount_total/100);
      document.querySelector('session_email').textContent = response.session.customer_details.email;
      }

      loadSuccess();
    } 
  </script>

</html>
  1. success.js（用于检索成功的条带结帐付款的交易详细信息）
const stripe = require('stripe')(process.env.TEST_STRIPE_SECRET_KEY);

exports.handler = async (event) => {

  const { sessionId } = JSON.parse(event.body);
  
  const session = await stripe.checkout.sessions.retrieve(sessionId);
  // const customer = await stripe.customers.retrieve(session.customer);
  console.log(session);

  return {
    statusCode: 200,
    body: JSON.stringify({
      session: session,
    }),
  };
};

loadSuccess() 函数返回整个交易的 json，response.session.amount_total/100 是我需要插入到谷歌转换标签中的值。

在 google 标记中，我尝试过，'value': response.session.amount_total/100但在生成的 html 中，它将字符串值设置为 response.session.amount_total/100，而不是实际计算 response.session.amount_total/100 等于什么。

我认为这是因为 google 标记在检索 response.session.amount_total 的函数之前加载。或者谷歌标签根本无法从其他函数中获取 response.session.amount_total 的值。Chrome 调试说 Uncaught ReferenceError: response is not defined

我尝试将获取金额的整个脚本的位置从页脚更改为页眉，但没有运气。还有其他想法吗？

编辑：从https://medium.com/geekculture/how-to-measure-purchases-with-gtag-js-from-iframe-309932c19b6看起来可以将事件侦听器添加到将动态设置的 gtag 脚本“价值”参数。从网站的例子：

<script>
  window.addEventListener("message", (event) => {
    if (event.data && event.data.event === "purchase") {
      var data = event.data;
      dataLayer.push({ ecommerce: null });
      gtag('event', 'purchase', {
        "transaction_id": data.data.transaction_id,
        "value": data.data.value,
        "currency": "EUR",
        "coupon": data.data.coupon,
        "items":data.data.items
      });
    }
  });
</script>

这个例子可以应用于我自己的案例，还是有更简单的方法？任何人都可以帮助我如何编码吗？

标签： javascriptstripe-paymentsgoogle-tag-managergoogle-ad-manager

解决方案

推荐阅读