Google Tag Manager自定义变量为何无法传递对象内容？

问题原因 #

你遇到的情况并不是自定义HTML标签不支持对象数组，而是直接将对象数组作为字符串使用时，JavaScript会自动调用其默认的toString()方法。数组的toString()会把每个元素转为字符串，而对象的toString()返回的就是[object Object]，所以最终你看到的就是拼接后的"[object, Object],[object Object]"，网络请求自然也无法解析出正确的键值对。

而Google Analytics标签内部已经做了对象的序列化/处理逻辑，所以能正常识别你的变量内容。

解决方案 #

根据你的使用场景（发送网络请求），可以用以下两种方式正确处理这个对象数组：

1. 序列化为JSON字符串（适合POST请求）

如果你的接口接收JSON格式的请求体，直接用JSON.stringify()把对象数组转换成标准JSON字符串即可：

<script>
  // 获取自定义JS变量返回的对象数组
  const productInfo = {{你的自定义JS变量名称}};
  
  // 序列化为JSON字符串
  const productJson = JSON.stringify(productInfo);
  
  // 示例：发送POST请求
  fetch('你的后端接口地址', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: productJson
  })
  .then(response => response.json())
  .catch(error => console.error('请求出错:', error));
</script>

2. 转换为URL编码参数（适合GET请求）

如果需要把参数拼接到URL中（GET请求），需要遍历数组和对象，手动构建符合URL规范的参数串：

<script>
  const productInfo = {{你的自定义JS变量名称}};
  const urlParams = [];

  // 遍历每个产品对象
  productInfo.forEach((product, index) => {
    // 遍历对象的每个键值对，编码后拼接
    for (const key in product) {
      if (product.hasOwnProperty(key)) {
        const encodedKey = encodeURIComponent(`products[${index}][${key}]`);
        const encodedValue = encodeURIComponent(product[key]);
        urlParams.push(`${encodedKey}=${encodedValue}`);
      }
    }
  });

  // 拼接成完整的查询字符串
  const queryString = urlParams.join('&');
  const requestUrl = `你的后端接口地址?${queryString}`;

  // 发送GET请求
  fetch(requestUrl)
  .then(response => response.json())
  .catch(error => console.error('请求出错:', error));
</script>

3. 先验证变量是否正确获取

如果不确定是不是变量本身的问题，可以先在自定义HTML标签里加调试代码，确认变量内容：

<script>
  const productInfo = {{你的自定义JS变量名称}};
  console.log('获取到的产品数组:', productInfo);
  console.log('是否为数组:', Array.isArray(productInfo));
</script>

打开浏览器控制台，如果能看到完整的对象数组，说明变量本身没问题，只是使用方式需要调整。

内容的提问来源于stack exchange，提问作者user68703