自定义图片标记揭密（GTM）

如果你’重新开始学习GTM，您可能已经 这个 想到的问题（或您’ll have it soon). 您’已经对您的网站实施了一些Google Analytics（分析）跟踪，因此您’并不完全不熟悉GTM。但 问题 一直烦你。 什么是Google跟踪代码管理器中的自定义图像代码？

I’我在网上看到一些博客文章提到了这一点，但没有能够回答更具体问题的综合资源。在这篇博客中，我’ll show you what’在窗帘后面。

简而言之，自定义图片标签

自定义图片标签从特定的网址请求图片。有趣的是，通过发出请求’re actually 将信息传输到服务器。例如，如果您通过URL请求图像 //www.example.com/something?parameter1=good&parameter2=123，接收服务器处理 参数1 和   参数2 并采取相应措施（例如，将这些参数注册为事件）。

那样简单。

自定义图片标记只是Google跟踪代码管理器将数据从您的网站发送到其他跟踪工具的另一种方式，例如Facebook Pixel等

 

 

Google Analytics（分析），自定义HTML和其他标签均依赖JavaScript。在浏览器中禁用JavaScript时，这些常规标记将变得无用，并且’，自定义图片标记将成为当下的英雄。

标签是通过iFrame加载的（iFrame是借助<noscript>GTM代码段的一部分）。

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

这意味着无论浏览器中的JavaScript设置是什么，您都可以分派“自定义图片标记”（ 上 或 关 ）。

栏位和设定

坦白说，’自定义图片标签中的许多设置：

• 图片网址。
• 缓存清除参数.

所有其他设置几乎都是标准的（与其他标签相比）：标签触发优先级，标签排序等。

图片网址 是您应在其中输入图像地址以及传递数据所需的所有参数的字段的字段。例如， //www.example.com/something?parameter1=good&parameter2=123.

• 采用“//”（而不是http：// _）（例如，如果图片的协议相对版本可用） //www.example.com/something?parameter1=good&parameter2=123
• 选择“//”如果只有安全版本的跟踪像素可用。

快取清除  ensures that hits are registered from browsers that have cached versions of the image. 您 can use either the default 快取清除 Parameter (gtmcb) or set your own.

什么是缓存清除查询参数（gtmcb）？

One of the reasons why websites are loading fast enough is cache. It is a temporary storage location 上 your computer for files (CSS style sheets, JavaScript 脚本s, images, etc.) downloaded by your browser to display websites.

当您重新访问网站时，浏览器会同时检查哪些内容已更新，并且仅下载更新的文件或尚未存储在缓存中的内容。这样可以减少用户端和服务器端的带宽使用率，并使页面加载速度更快。

听起来很棒，对吗？

对于最终用户，是的。对于营销商/数字分析师/转换专家，并非总是如此。

如果你没有’如果不使用缓存清除功能，则“自定义图片标记”仅在首次加载时有效。在第二次加载尝试中，没有数据将被传输到接收服务器。为什么？因为该图像将已经保存在缓存中并可以从浏览器加载’内部存储器而不是外部服务器。

这意味着最新的数据将无法达到目标，例如Facebook像素’s server.

所以呢’解决方案？好吧，图片’URL每次加载时都必须不同，并且’在Cache Buster派上用场的地方。

高速缓存清除查询参数 ( gtmcb） Â是一个函数，该函数在每次自定义图片代码触发时返回一串数字，并将其作为查询参数添加到图片网址中，例如 //www.pixelreceiver.com/track?parameter1=usa&gtmcb=1199950751.

每次调用gtmcb时，它都会返回一个不同的值，因此Image URL将始终是不同的（这很好，因为您可以’ll避免浏览器缓存）。

所以呢 should you do regarding the gtmcb parameter in Custom Image Tag settings? 没有。保持原状。 Google跟踪代码管理器可以识别此功能，并自动将唯一编号添加到图片网址。

这里’s是一个自定义图像标签的示例，该示例将页面浏览事件发送到Facebook服务器。

您’我可能想知道我在上面的示例中使用了什么触发器。显然，我们不需要在所有页面上触发“自定义图片”代码，因为Facebook Pixel<script>已经在这样做了。相反，理想的开火时刻是 禁用JavaScript时。幸运的是，有一个自定义JavaScript变量：

 function() {
 return  真正 ;
}

它返回   真正 Â仅当启用JS时。所以我在触发器中使用了它并将其分配给了自定义图像标签。

您 can learn more about using Custom Image Tag with Facebook Pixel 在这篇博客文章中.

顺便说一句，您也可以使用GTM’s {{Random Number}}变量而不是gtmcb。

如何测试自定义图片标签？

这里有些细微差别。 Google跟踪代码管理器的预览和调试模式是一个了不起的工具，可帮助您在将代码部署到实时环境之前测试并确定问题。但是，那里’s 上 e  但 。一世t requires JavaScript enabled in your browser. No JS = No Preview and Debug mode.

那么如何在没有JS的情况下测试自定义图像标签呢？这是我调试自定义图像标签的两步过程。

＃1在所有页面上触发图像标签

首先，我想确保粘贴正确的图像URL，并且gtmcb每次加载时都会生成唯一的数字字符串。

1. 所以我只添加 所有页面 触发标签。
2. 启用/刷新预览和调试模式。
3. 刷新网站，然后检查是否触发了自定义图片标记。
4. 如果是，那我去浏览器’s Developers Tools >网络。在Google Chrome浏览器中，您可以转到以下位置找到开发人员工具 菜单> More Tools > Developer Tools

屏幕底部将显示带有各种工具的面板。单击网络选项卡，然后刷新页面。您’将会看到此表中出现很多行。这是什么’当您浏览网站时，这些都是在后台进行的。每行代表一个请求，您可以看到其大小，加载时间等。

目前，我们对我们的自定义图片标签感兴趣。您还记得我们在GTM中输入了什么图片网址吗？那是个 //www.facebook.com/tr?id=423329234239&ev=PageView&noscript=1， 所以让’s use the filter and find our that request. 这里 it is:

如您所见，gtmcb等于一串随机数。图片网址还包含一个像素ID（I’ve模糊出来）和事件名称（PageView）。

测试的第一步已完成。我们’ve检查了自定义图片代码是否触发并将数据传输到外部服务器（在我们的示例中为Facebook）。

现在，删除  所有页面  触发并确保只有 页面预览– 所有页面 –JavaScript已禁用 触发器链接到“自定义图像”标签。  所有页面  仅用于测试/调试目的。

将所有更改发布到实时环境。

＃2。在实时环境中进行测试

现在，让’进行一些现场测试。

1. 在浏览器中禁用JavaScript。我赢了’不要编写说明，因为每个浏览器都有不同的菜单。只是谷歌。
2. 在你之后’完成此操作后，在开发人员工具中打开“网络”选项卡。
3. 使用过滤器查找您的图片网址’标记中使用了（只需开始输入图片网址，您就会’我会很快找到你的’re looking for).
   
4. 如果没有错误与请求相关，则表明’是个好兆头。另外，检查是否 Facebook Pixel助手 报告成功的数据传输。
   

在哪里可以使用“自定义图像”标签？

第一个例子 我想到的是Facebook Pixel。它由两部分组成：<script> and <noscript>。第一个仅在浏览器中启用JavaScript（使用“自定义HTML”标记对其进行部署）时才有效，而另一个仅跟踪那些已禁用JS的用户。

因此，如果您还希望跟踪没有JavaScript的用户中的一小部分，’必须通过Google跟踪代码管理器中的“自定义图像代码”单独实施。

我已经发表 详细指南，说明如何实现.

第二个用例 将互动数据发送到Active Campaign。 Measureschool发布了一个 影片教学 关于这个话题。

简而言之，只要用户与您的网站/ Web应用程序交互（单击某些内容，查看内容等），就必须触发图像标签。每次加载图片时，都会将一堆参数传递给Active Campaign’s服务器。您以后可以按联系人的操作对联系人进行细分，并向他们发送电子邮件。

但是不要’t limit yourself to 上 ly these two examples. There are many more possibilities. 您 can even send Google Analytics 页面预览events with help of Custom Image Tag, 但 you’我必须要熟悉 Google Analytics（分析）评估协议.

错误和误解

我在GTM用户中发现了一些错误/误解：

1. 自定义图像标签并非旨在向您的网站添加图片。一世’我们曾见过几种情况，人们试图将实际图像添加到网站的页脚中。虽然它’s called an  图片 标记，其目的是加载一个很小的微小像素，该像素的URL用于传输数据。如果要将图像/图片添加到您的网站，请使用内容管理系统或要求开发人员执行此操作。
2. 自定义图像标签 只能在禁用JavaScript的情况下使用. This is not entirely 真正 . 您 can also fire image tags for users who have JavaScript enabled. The aforementioned Active Campaign example explains how to track 所有访客 并在自定义图片标签的帮助下发送相应的事件。

结论

当默认的Google Analytics（分析）或Custom HTML标签失败时，Google Tag Manager中的Custom Image Tag可让您跟踪交互。一世’我说的是在浏览器中禁用JavaScript的情况。

自定义图片代码会使用各种参数从给定的网址加载一个很小的图片（对于访问者而言是不可见的） //www.facebook.com/tr?id=173223234236923&ev=PageView&noscript=1这些参数足以使接收服务器将数据作为事件/交互/任何方式进行处理。因此，通过请求图像，您可以’重新发送跟踪数据。太好了吧？

自定义图片标签的最常见用例是：

• 针对禁用了JavaScript的访问者的Facebook像素跟踪（因为如果只是将整个像素代码粘贴到“自定义HTML”标签中， the Noscript part will be useless)
• 活动的活动事件跟踪。每当您的网站上发生重要的互动时，请触发自定义图片标签，然后根据这些事件创建细分。