如何从 GTM 自定义标记模板发送 POST 请求？

Question

我正在为 Google 标签管理器开发一个简单的自定义标签模板。它应该绑定到一些事件并将事件数据作为 POST 请求正文中的 JSON 发送到我们的服务器。

沙盒 GTM Javascript runtime provides the sendPixel() API。但是，它只提供 GET 请求。

如何从这个沙盒运行时中发送 POST 请求？

Answer 1

您可以结合使用 injectScript 和 copyFromWindow APIs，在此处 Custom Template APIs。

基本上，工作流程是这样的。

构建一个简单的脚本，其中包含附加到发送正常 XHR post 请求的 window 对象的函数。我制作和使用的脚本可以在这里找到：https://storage.googleapis.com/common-scripts/basicMethods.js
将该脚本上传到可公开访问的位置，以便您可以将其导入到您的模板中。
使用 injectScript API 将脚本添加到您的自定义模板。
injectScript API 希望您提供一个 onSuccess 回调函数。在该函数中，使用 copyWindow api 获取您在脚本中创建的 post 请求函数并将其保存为变量。
您现在可以像使用普通 JS 函数一样使用该变量发送 post 请求。

我上面包含的脚本还包括 JSON 编码和 Base64 编码功能，您可以通过 copyWindow api 使用相同的方式。

希望对您有所帮助。如果您需要一些特定的代码示例，我可以提供帮助。

Answer 2

根据@Ian Mitchell 的回答——我已经做了类似的解决方案。

这是可以在 GTM 模板代码段中使用的基本代码模式，例如场景：

const injectScript = require('injectScript');
const callInWindow = require('callInWindow');
const log = require('logToConsole');
const queryPermission = require('queryPermission');
 
const postScriptUrl = 'https://myPostScriptUrl'; //provide your script url
const endpoint = 'https://myEndpoint'; //provide your endpoint url
  
//provide your data; data object contains all properties from fields tab of the GTM template
const data = {
  sessionId: data.sessionId,
  name: data.name,
  description: data.description
};
 
//add appropriate permission to inject script from 'https://myPostScriptUrl' url in GTM template's privileges tab
if (queryPermission('inject_script', postScriptUrl)) {
  injectScript(postScriptUrl, onSuccess, data.gtmOnFailure, postScriptUrl);
} else {
  log('postScriptUrl: Script load failed due to permissions mismatch.');
  data.gtmOnFailure();
}
 
function onSuccess() {
  //add appropriate permission to call `sendData` variable in GTM template's privileges tab
  callInWindow('sendData', gtmData, endpoint);
  data.gtmOnSuccess();
}

重要的是要记住在 GTM 模板中添加所有必要的权限。使用代码部分中的相关选项后，适当的权限将自动显示在权限选项卡中。

您在 'https://myPostScriptUrl' 的脚本可能如下所示：

function sendData(data, endpoint) {
  var xhr = new XMLHttpRequest();
  var stringifiedData = JSON.stringify(data);

  xhr.open('POST', endpoint);
  xhr.setRequestHeader('Content-type', 'application/json');
  xhr.send(stringifiedData);

  xhr.onload = function () {
    if (xhr.status.toString()[0] !== '2') {
      console.error(xhr.status + '> ' + xhr.statusText);
    }
  };
}

Answer 3

加载外部脚本并不是绝对必要的。虽然仍然是一种解决方法，但您还可以通过“JavaScript 变量”类型变量将提取引用传递到标记中：

创建一个类型为“JavaScript Variable”的 GTM 变量，内容为“fetch”，从而引用“window.fetch”
向您的自定义标签添加一个文本字段，例如。 G。名为“js.fetchReference”。
在您的自定义标签中使用 data.fetchReference，就像您通常使用 window.fetch
确保标签实例实际引用了在步骤 2 中使用 {{js.fetchReference}}

我在 https://hume.dev/articles/post-request-custom-template/

上用屏幕截图记下了这一点

如何从 GTM 自定义标记模板发送 POST 请求？

How to send a POST request from GTM custom tag template?

google-tag-manager