第三方 cookie 阻止软件和广告拦截器的使用每天都在增长。这些工具可以有效地阻止 cookie 和第三方广告,这对追踪会产生很大影响。
广告商因此面临失去重要数据的风险,这些数据对于衡量和定位非常关键。由于 iOS 设备和 Safari 等浏览器会自动阻止第三方 cookie,这个问题在这些平台上尤为明显。
这种注重隐私的浏览趋势有可能颠覆跟踪策略,并使收集用户信息以进行分析和定制广告变得更加复杂。这正是导致 Facebook 像素追踪失效的问题所在。为了解决这个问题,出现了第一方服务器端跟踪解决方案。
什么是服务器端跟踪?
服务器端跟踪是一种直接从您的 Web 服务器收集并发送数据到分析平台的方法,绕过用户的浏览器,以避免像 cookie 阻止和广告拦截器等问题。
在服务器端跟踪中,我们也会放置 cookie,但它们被称为第一方 cookie。我们通过我们自己的域名而不是任何第三方平台来放置这些 cookie。这些 cookie 不会被广告拦截器或浏览器隐私设置阻止,因为它们对于您的网站功能至关重要。
通过Google Tag Manager与Stape实现服务器端第一方追踪
因为在服务器端跟踪中,数据是通过 HTTP 请求从 Web 容器发送到服务器容器(GTM 服务器容器)的。这通常是通过 HTTP 请求来完成的。
所以,让我们从 Web 容器开始设置这个数据发送过程。
设置 Web 容器将数据发送到服务器。
要做到这一点,请进入您的 Web 容器;从那里我们将开始设置将数据发送到服务器容器的过程。但是,为了实现这一点,我们将借助 GA4 标签模板。
我们使用 GA4 标签模板将数据从 Web 容器发送到服务器容器,因为它们有助于简化和优化跟踪用户互动的过程。
Facebook 广告 Pixel 设置
在像素跟踪中,您可以看到我们首先从“PageView”事件开始工作,在这里我们也将以相同的方式开始工作。为此,首先进入您的 GTM 标签部分,然后在那里创建一个新标签

在这里,选择“Google 标签”作为您的标签类型。通过这个,我们将把数据从 Web 容器发送到服务器。
现在让我们开始标签设置。

首先,在“标签 ID”位置输入您的 GA4 测量 ID。如果您有自己的 GA4,请在这里使用测量 ID;如果没有,您可以创建一个,或者根据 ID 使用任意数字。但最好的方式是使用您的 GA4 测量 ID。

X-fb-ck-fbp:通过这些参数,我们可以发送 Facebook 投放的“fbp”cookie。在客户端,_fbp cookie 是由 Facebook Pixel 或通过 fbclid URL 参数生成的。
由于像 SameSite cookie 这样的限制,服务器容器无法直接访问此 cookie;_fbp cookie 的值作为事件中的参数—具体来说,作为 x-fb-ck-fbp—发送到服务器容器。

在这里,您可以看到我们是如何创建变量的。首先,从 GTM 变量部分选择“第一方 Cookie”作为我们的 cookie 类型。然后在“Cookie 名称”中填写值“_fbp”。您也可以按照相同的方法创建“fbp” cookie 收集器变量。
X-fb-ck-fbc:通过这个变量,我们发送 Facebook 投放的另一个 cookie。这个 cookie 每次通过 Facebook 广告进入时都会被 Facebook 投放。在这里的图片中,您可以看到我们是如何创建这个变量的。

First_party_collection:当您将 “first_party_collection”: “true” 设置为真时,这意味着数据收集是从第一方——即您网站的域名——进行的,而不是通过第三方服务(如 Facebook、Google 等)。这很重要,因为第一方数据不会被常见的浏览器隐私设置或广告拦截器阻止,而这些设置通常会阻止第三方 cookie。
Event_time:在跟踪和分析中,event_time 指的是表示特定事件(如页面查看、按钮点击或购买)发生时间的时间戳。这个时间戳对于准确记录事件发生的具体时间至关重要,从而让您能够分析趋势、行为和绩效的变化。
要创建这个变量,首先进入您的变量部分,从用户定义的变量中创建一个新变量。选择“自定义 JavaScript”作为触发类型。然后粘贴代码并保存变量,以便在此使用。
function() {
return Math.round(new Date().getTime() / 1000);
}

现在,通过最后的参数,我们将使用服务器 URL。通过这个 URL,您的数据将被发送到服务器。在编写参数名称时要小心;按照我们的方法来做,就像我们之前做的那样。
现在是时候设置触发器了,为此,请向下滚动并选择“所有页面”作为触发器类型,因为这个标签应该在每个页面上工作,并且应该给我们一个页面查看事件。

ViewContent

选择标签类型后,现在让我们开始设置 ViewContent。

在选择标签后,在“测量 ID”中,我们放入相同的测量 ID,在“事件名称”处,我们放入事件名称。在此,我们正在设置“ViewContent”,但我们必须记住,我们是通过 GA4 发送这些数据的,因此我们必须遵循 GA4 的架构。因为 GA4 在查看一个产品后称之为“view_item”,而不是“ViewContent”。
但不用担心,从服务器端发送数据到 Facebook 时,这些问题会根据 Facebook 的规则进行修正。
现在是时候设置重要的参数了。为此,向下滚动并点击“事件参数”。

对于 Facebook 服务器端跟踪,我们需要发送这 8 个参数。在这个全新的事件中,我们还需要发送一些关于我们查看的产品的更多数据,如产品名称、产品 ID、货币和产品总值。
Facebook 广告 Pixel 设置
对于所有这些参数,您可以使用在浏览器端“ViewContent”跟踪中使用的相同变量。您只需更改参数名称。
现在为这个新标签设置触发器。

AddToCart

InitiateCheckout
每当我们的流量进入结账页面时,事件将在数据层中触发。
但是要考虑到并非每个人只购买一个产品。他们可能购买多个产品。因此,对于“InitiateCheckout”,我们必须选择一个合适的变量来解决这个问题。


Purchase

通过这种方式,您将能够在数据层中看到您的客户数据,因此我们必须将所有这些值发送给 Facebook。但我们必须使用哈希值将其发送到 Facebook。


最全面清晰的解释GTM 数据层概念

我们以这种方式创建了所有变量。

但是,如果您看到任何数据不是哈希形式的,那么您必须使用自定义 JavaScript 将其转换为哈希数据。
为此,首先以一种方式创建一个变量,用来收集您目标数据。

然后再次进入您的变量部分,选择“自定义 JavaScript”作为变量类型,并粘贴代码。
function() {
return sha256({{value}});
function sha256(r){if(r){r=r.toString();for(var $,_,o=Math.pow,f=o(2,32),t="length",a="",n=[],h=8*r[t],i=sha256.h=sha256.h||[],c=sha256.k=sha256.k||[],e=c[t],s={},u=2;e<64;u++)if(!s[u]){for($=0;$<313;$+=u)s[$]=u;i[e]=o(u,.5)*f|0,c[e++]=o(u,1/3)*f|0}for(r+="\x80";r[t]%64-56;)r+="\0";for($=0;$<r[t];$++){if((_=r.charCodeAt($))>>8)return;n[$>>2]|=_<<(3-$)%4*8}for(_=0,n[n[t]]=h/f|0,n[n[t]]=h;_<n[t];){var v=n.slice(_,_+=16),g=i;for($=0,i=i.slice(0,8);$<64;$++){var l=v[$-15],k=v[$-2],x=i[0],S=i[4],d=i[7]+(A(S,6)^A(S,11)^A(S,25))+(S&i[5]^~S&i[6])+c[$]+(v[$]=$<16?v[$]:v[$-16]+(A(l,7)^A(l,18)^l>>>3)+v[$-7]+(A(k,17)^A(k,19)^k>>>10)|0),p=(A(x,2)^A(x,13)^A(x,22))+(x&i[1]^x&i[2]^i[1]&i[2]);(i=[d+p|0].concat(i))[4]=i[4]+d|0}for($=0;$<8;$++)i[$]=i[$]+g[$]|0}for($=0;$<8;$++)for(_=3;_+1;_--){var w=i[$]>>8*_&255;a+=(w<16?0:"")+w.toString(16)}return a}function A(r,$){return r>>>$|r<<32-$}}
}

在这里,只需在红框中,将其更改为您想要转换为哈希形式的变量名称。
以这种方式,您需要创建更多新的变量,以便将它们转换为哈希形式。

还有 5 个重要参数我们可以发送给 Facebook。但这里的“交易 ID”是最有价值的参数,这是必须发送的。其他的,如果您的网站有相关数据,可以发送给 Facebook,否则可以忽略它。

Event ID
在 GTM 中,事件 ID 通常是网站或应用上某个事件的唯一标识符,当用户与之互动时发生此事件。此 ID 用于记录和标识网站上的事件,以便在分析系统中(如 Google Analytics、Facebook Pixel)将正确的数据与其关联。
我们使用事件 ID 来进行去重,因为我们在一个地方以两种不同的方式发送数据:一种是浏览器端的客户端方式,另一种是服务器端的方式。如果我们不随事件发送事件 ID,那么我们的平台会开始将每一条数据都计为新的数据。因此,我们必须在每个事件中发送事件 ID。
为了将事件 ID 与事件一起设置,首先我们需要在 GTM 中添加一个新的模板。为此,请进入您的变量部分,从用户定义的变量中创建一个新变量。

在这里,选择变量类型时,我们需要发现新的变量。

所以从这里,选择搜索并选择“事件 ID”变量模板。现在在变量部分添加了新模板后,您可以将其用作您的变量类型。

事件 ID 变量创建完成。现在,请再次进入您的标签部分,因为我们现在需要将此变量与每个标签一起设置。让我们从 Facebook 像素模板开始。

在每个 Facebook 像素模板中,您可以在“更多设置”下添加此变量。以同样的方式,为每个标签设置事件 ID。
现在,您还需要在 GA4 标签中设置这个变量。因为通过这个标签,您将数据发送到服务器。所以这里同样需要事件 ID。

在 GA4 标签中,您可以像这样与其他参数一起简单地发送这个 event_id。
太棒了,您的 GTM Web 容器现在已经准备好将数据发送到服务器,而在之前的时间里,我们已经完成了服务器容器的设置,所以服务器容器也已准备好通过 GA4 客户端接收数据。
GTM 服务器容器设置

这是您服务器容器的视图。在这里,您可以看到 GA4(Web)客户端。
Google Tag Manager (GTM) 中的服务器容器客户端负责捕获来自浏览器容器的数据。当网站用户进行互动时,页面浏览或事件等数据由浏览器容器收集,然后通过 HTTP 请求发送到服务器容器。服务器容器的客户端处理这些数据,根据需要进行任何转换/增强,并将其记录到分析平台,如 Google Analytics 或 TikTok。此服务器端方法有助于提高性能,避免浏览器负担过重,并支持更安全的数据处理,以准确跟踪数据。
要检查您的服务器容器是否正常工作,首先点击服务器容器中的预览部分。

这是从服务器容器打开预览后的第一次视图。现在进入您的 GTM Web 容器,创建一个新的预览并在您的网站上进行一些操作。

在这里,您可以看到我们是如何从服务器获取数据到服务器容器的。然后我们可以通过 API 将其发送到我们的网站。
为此,首先,您需要像之前那样在服务器容器中添加一个标签模板。

现在返回到标签部分,创建一个新标签,作为标签类型,选择最近添加的 Facebook API。

这是您的 Facebook API 视图。为了完成设置,我们需要收集三样东西:一个“访问令牌”、第二个“Facebook 像素 ID”和测试事件代码。
为了获取这些,我们只需要再次回到我们的 Facebook 事件管理器设置。

现在从设置中向下滚动。




现在在触发器中,选择“自定义”作为类型,然后选择“某些事件”。接着,在下一个位置选择“事件名称”,然后在“匹配正则表达式(Matches RegEx)”中输入“page_view|view_item|add_to_cart|begin_checkout|purchase”。您也可以按照这个方法设置您的触发器。
通过在触发器配置中使用“匹配正则表达式(Matches RegEx)”,您可以在 GTM 中设置一个自定义触发器来跟踪多个事件。选择“匹配正则表达式”后,输入“事件名称”到第一个下拉菜单中,您可以允许触发器匹配特定的事件名称。
在第二个字段中输入“page_view|view_item|add_to_cart|begin_checkout|purchase”。这个正则表达式指示 GTM 在这些事件发生时启动。因为 | 符号用于分隔不同的事件名称,所以这个触发器会在这些事件中的任何一个发生时激活,使您能够在客户旅程的每个阶段记录操作,从页面查看到购买。
但是,如果在第一个位置找不到“事件名称”,请进入您的变量部分,从内置变量中选择“事件名称”,然后就完成了。

通过这个,您的服务器 API 设置现在完成了。这个服务器 API 将根据 Facebook 的规则收集每一条重要数据,并将其发送到 Facebook。为了检查它是否正常工作,您可以再运行一次预览。预览完成后,您可以发布两个容器。