<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>GA4 &#8211; 出海指南</title>
	<atom:link href="https://chuhaizhinan.com/tag/ga4/feed/" rel="self" type="application/rss+xml" />
	<link>https://chuhaizhinan.com</link>
	<description>出海就上出海指南, 最懂出海人的工具导航栏</description>
	<lastBuildDate>Wed, 04 Oct 2023 12:19:39 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://chuhaizhinan.com/wp-content/uploads/2023/05/cropped-出海指南.jpg</url>
	<title>GA4 &#8211; 出海指南</title>
	<link>https://chuhaizhinan.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>GA4使用指南｜5分钟学会追踪网站所有按钮</title>
		<link>https://chuhaizhinan.com/2023/10/04/ga4-2/</link>
					<comments>https://chuhaizhinan.com/2023/10/04/ga4-2/#respond</comments>
		
		<dc:creator><![CDATA[深圳艾维]]></dc:creator>
		<pubDate>Wed, 04 Oct 2023 12:19:39 +0000</pubDate>
				<category><![CDATA[独立站运营]]></category>
		<category><![CDATA[GA4]]></category>
		<guid isPermaLink="false">https://chuhaizhinan.com/?p=26993</guid>

					<description><![CDATA[这就是为什么我们喜欢使用All Elements作为触发器类型。此触发器类型能够侦听任何内容（例如图像、文件、按钮、空白区域等）和链接上发生的点击。它只是更通用、更通用]]></description>
										<content:encoded><![CDATA[
<p>按钮点击追踪可能是网站运营中最常见的需求之一。现在，通过GA4 和 Google 跟踪代码管理器(<a>GTM</a>)的配合，我们可以轻易实现追踪，甚至可以导入到google ads，辅助广告优化。</p>



<p>具体实现方法有很多，本文主要介绍使用GTM的方法。</p>



<p>1 <strong>获取尽可能多的关于按钮的信息</strong></p>



<p><strong>首先，我们需要创建一个<a>触发器</a>，或更具体地说，创建一个通用点击触发器。这将允许 GTM 监听与点击相关的事件。&nbsp;</strong></p>



<p>在 Google 跟踪代码管理器中，我们可以选择 2 个点击触发选项：</p>



<p><strong>•&nbsp;All Elements</strong></p>



<p><strong>•&nbsp;Just links</strong></p>



<p><strong>Just links</strong>是一种常见的方式，因为许多按钮本质上是用户点击的装饰链接。但是，如果您的按钮恰好不是链接，您将无法获得更多信息来跟踪。</p>



<p>这就是为什么我们喜欢使用<strong>All Elements</strong>作为触发器类型。此触发器类型能够侦听任何内容（例如图像、文件、按钮、空白区域等）和链接上发生的点击。它只是更通用、更通用。</p>



<p>创建一个新触发器并选择<strong>All Elements</strong>。</p>



<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="707" height="200" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-13.png" alt="" class="wp-image-26995" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-13.png 707w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-13-300x85.png 300w" sizes="(max-width: 707px) 100vw, 707px" /></figure>



<p>现在，GTM 可以识别何时发生点击，无论是链接点击还是任何元素点击。</p>



<p>然而，我们可能需要更多的信息，而不仅仅是知道存在点击交互。</p>



<p>要获取有关点击的信息，请转到 Google 跟踪代码管理器并启用与点击相关的所有内置变量。这些变量将为我们提供所需的大部分点击详细信息，例如<strong>Click Text</strong>，它会显示按钮上的文本。</p>



<p>在 GTM 工作区中，选择<strong>Variables</strong>，然后选择<strong>Configure</strong>。</p>



<p>启用所有单击变量。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="697" height="398" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-14.png" alt="" class="wp-image-26996" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-14.png 697w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-14-300x171.png 300w" sizes="(max-width: 697px) 100vw, 697px" /></figure>



<p>该信息将用于创建触发我们的标签的条件。</p>



<p>返回我们的产品页面，让我们单击<strong>Add to Cart</strong>按钮。（在这里，添加购物车仅仅是示例，你可以把这个方法应用在任何按钮）</p>



<p>前往 Google 跟踪代码管理器的调试界面。识别<strong>Summary</strong>下的<strong>Click</strong>事件并选择它。查看之前启用的变量向我们展示了什么信息。</p>



<p>这里我们需要找到足够独特的数据作为触发条件。</p>



<p>2 <strong>找到独特且可靠的数据</strong></p>



<p>在“调试”界面中，选择左侧面板中的<strong>Click</strong>事件，然后单击<strong>Variables</strong>选项卡。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="717" height="311" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-15.png" alt="" class="wp-image-26997" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-15.png 717w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-15-300x130.png 300w" sizes="(max-width: 717px) 100vw, 717px" /></figure>



<p>重点关注我们已启用的变量（<strong>Click Classes</strong>, <strong>Click ID</strong>, <strong>Click Target</strong>, <strong>Click Text</strong>, and <strong>Click URL</strong>），尽力识别按钮特有的数据。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="706" height="330" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-16.png" alt="" class="wp-image-26998" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-16.png 706w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-16-300x140.png 300w" sizes="(max-width: 706px) 100vw, 706px" /></figure>



<p>通常，许多按钮都是构建为链接的，这意味着您的 Click URL 变量值很有可能显示链接。您可以将其用于您的触发条件。</p>



<p>但是，很多时候并非所有维度的数据都齐全。在我们的示例中，Click URL没有值，这时我们可以使用另外两条信息：</p>



<p>•&nbsp;<strong>Click Classes</strong>，值为：<strong>single_add_to_cart_button button alt</strong></p>



<p>•<strong>&nbsp;Click Text</strong>，值为：<strong>Add to cart</strong></p>



<p>需要注意的是，<strong>Click Classes</strong>和<strong>Click Text</strong><strong>很有可能不是唯一值</strong>，该方法只适用于追踪网站所有同类按钮。</p>



<p>如果我们仅仅只需要追踪与 Ninja 产品的<strong>添加到购物车</strong>按钮，怎样才能做到这一点呢？</p>



<p>首先，我们需要确保该按钮是唯一的，并且在整个网站中不会重复。</p>



<p>为此，我们将使用 Chrome 开发人员工具。如果您不熟悉，只需按照以下步骤操作即可。</p>



<p>右键单击您的按钮并选择<strong>检查</strong>。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="693" height="298" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-17.png" alt="" class="wp-image-26999" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-17.png 693w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-17-300x129.png 300w" sizes="(max-width: 693px) 100vw, 693px" /></figure>



<p>这将使您能够访问浏览器的开发人员工具来查看按钮的 HTML 和 CSS 源代码。</p>



<p>单击键盘上的<strong>CTRL + F</strong>来过滤 HTML 文档。</p>



<p>复制并粘贴该类并将其粘贴到过滤器中。我们将复制粘贴<strong>single_add_to_cart_button&nbsp;</strong><strong>按钮 alt</strong>。</p>



<p>过滤器将显示您的网站上存在多少个此类。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="737" height="277" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-18.png" alt="" class="wp-image-27000" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-18.png 737w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-18-300x113.png 300w" sizes="(max-width: 737px) 100vw, 737px" /></figure>



<p>如果过滤器结果是<strong>1 of 1，</strong>这意味着该按钮的类仅有唯一一项。使用与此按钮相关的 GTM 点击类只会跟踪此按钮，而不会跟踪另一个按钮。</p>



<p>如果结果超过 1 个，而您只想追踪特定按键，不是同类的所有按键，则需要进一步过滤。</p>



<p>解决方案是在触发器中添加页面<strong>URL，</strong><strong>以仅跟踪位于 Flying Ninja海报所在位置的“添加到购物车”按钮</strong>。</p>



<p>3 <strong>设置触发器</strong></p>



<p>让我们回到All Elements触发器。</p>



<p>默认情况下，我们的触发器会帮助我们检测所有用户点击。我们需要从<strong>All Clicks</strong>切换为<strong>Some Clicks</strong>。</p>



<p>接下来是触发条件的设置，在我们的例子中是：<strong>Click Classes→contains→single_add_to_cart_button</strong></p>



<figure class="wp-block-image size-full"><img decoding="async" width="732" height="363" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-19.png" alt="" class="wp-image-27001" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-19.png 732w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-19-300x149.png 300w" sizes="(max-width: 732px) 100vw, 732px" /></figure>



<p>重命名您的触发器并保存。</p>



<p>4 <strong>创建标签</strong></p>



<p>首先，我们创建一个新的 GA4 事件代码。Tag Type选择<strong>Google Analytics</strong>:&nbsp;<strong>GA4 Event</strong>，再根据GA4的衡量ID对应选择<strong>Configuration Tag</strong>。如果没有预设的<strong>Tag</strong>，则选择<strong>None &#8211; Manually Set ID</strong>，再手动填入衡量ID即可。</p>



<p>然后我们需要命名我们的事件。建议<strong>button_click</strong>。遵从Google 的命名规则的最佳实践是小写字母加下划线。</p>



<p>此外，最好不要发明名称，而应该首先查看Google 跟踪的内容。增强测量中会跟踪点击次数，但没有任何特定于按钮点击的内容。他们将事件命名为<strong>Click</strong>，我们也可以使用它。</p>



<p>此时，我们可以像这样将事件发送到 GA4。</p>



<p>但是，我们希望向 GA4 发送有关此次点击的更多详细信息，因此我们将使用事件参数。</p>



<p>按钮的文本和页面位置对我们很有价值，因此我们将添加 2 个自定义参数。</p>



<p>我们的设置如下所示。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="748" height="495" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-20.png" alt="" class="wp-image-27002" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-20.png 748w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-20-300x199.png 300w" sizes="(max-width: 748px) 100vw, 748px" /></figure>



<p><strong>▶ 注意：</strong>我们讨论的命名事件的方法与命名事件参数的方法相同。建议使用推荐事件或增强测量列表中任何适合您需求的事件。如果您选择为事件参数使用自定义名称，并且想要在 GA4 报告（自定义维度）中使用，则参数的数量将被限制为 50 个。</p>



<p>Google 的推荐事件和增强型测量没有与按钮文本相关的参数。我们能找到的最接近的是<strong>link_text</strong>。link_text参数用于文件下载 。</p>



<p>你也可以自定义<strong>Parameter Name</strong>。例如，button_text，甚至click_text。</p>



<p>由于目标是显示按钮文本的值，因此我们可以从之前启用的<strong>Click Text</strong>变量中获取值。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="703" height="171" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-21.png" alt="" class="wp-image-27003" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-21.png 703w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-21-300x73.png 300w" sizes="(max-width: 703px) 100vw, 703px" /></figure>



<p>选择<strong>Click Text</strong>。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="669" height="383" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-22.png" alt="" class="wp-image-27004" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-22.png 669w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-22-300x172.png 300w" sizes="(max-width: 669px) 100vw, 669px" /></figure>



<p>如果我们还想知道按钮所在的页面。只需重复上述过程并在<strong>Value</strong>下选择<strong>Page</strong>页面 URL即可。</p>



<p>添加我们之前创建的所有触发器。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="735" height="478" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-23.png" alt="" class="wp-image-27005" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-23.png 735w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-23-300x195.png 300w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-23-400x260.png 400w" sizes="(max-width: 735px) 100vw, 735px" /></figure>



<p>保存您的标签。</p>



<p>启用Preview模式并单击Add to cart按钮。</p>



<p>您可以看到我们的标签已触发。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="739" height="292" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-24.png" alt="" class="wp-image-27006" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-24.png 739w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-24-300x119.png 300w" sizes="(max-width: 739px) 100vw, 739px" /></figure>



<p>在 GA4 的 DebugView 中，您将看到即将发生的事件。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="667" height="360" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-25.png" alt="" class="wp-image-27007" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-25.png 667w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-25-300x162.png 300w" sizes="(max-width: 667px) 100vw, 667px" /></figure>



<p>在参数旁边，您可以看到我们的<strong>link_text</strong>和<strong>page_location</strong>事件参数及其值。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="677" height="249" src="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-26.png" alt="" class="wp-image-27008" srcset="https://chuhaizhinan.com/wp-content/uploads/2023/10/image-26.png 677w, https://chuhaizhinan.com/wp-content/uploads/2023/10/image-26-300x110.png 300w" sizes="(max-width: 677px) 100vw, 677px" /></figure>



<p>至此，事件创建已经完成。最多不超过48小时，我们就可以在GA4的事件中找到它，也可以用它创建转化和受众。</p>



<p>更多跨境资讯及干货，请关注公众号：<strong>深圳艾维</strong></p>
]]></content:encoded>
					
					<wfw:commentRss>https://chuhaizhinan.com/2023/10/04/ga4-2/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
