如何在网站中添加 Google Ads 点击事件代码?

您可以使用 Google Ads 转化跟踪功能,在用户点击您网站上的某个按钮或链接时进行跟踪。例如,您可以在用户点击“立即购买”按钮或点击您移动网站上的电话号码时进行跟踪。

本文介绍如何添加和修改谷歌广告转化跟踪代码,以便跟踪客户在您网站上的点击操作。如果希望在网页加载时跟踪转化,请遵循这些说明进行操作。

准备工作

请您先确认以下事项,然后再向网站添加转化跟踪代码:

  • 确保这是适合您的转化跟踪类型。
  • 能够修改您的网站。请确保有人能够将相应代码添加到您的网站代码中,可以是您自己,也可以是网站开发者。

操作说明

在下面选择您要使用的转化跟踪代码版本,即可查看对应的操作。您只能从 Google Ads 获取网站级代码段,因此建议您改用这一新版本。旧版 Google Ads 中的代码仍然有效。

添加 Google Ads 转化代码,肯定是我们已经在Google Ads中设置了一种转化方式,例如:我们希望获取转化是根据用户点击了我们网站“预约演示”按钮,点击一次算作一次转化。

我们就需要在“工具与设置”中添加一个转化模型,添加完成之后,就可以到“代码”设置中获取代码,将代码添加到自己的网站上去。

设置一个转化模型

要为预约服务设置转化跟踪,您的网页使用的代码中必须有全局网站代码和事件代码段。要添加该代码和代码段,请选择您的网页使用的框架,然后按照说明操作。

跟踪网站的点击事件如网站上每个页面都有的:“Book a Demo”。该按钮的id是“btn2”.

需要跟踪的点击事件
需要跟踪的点击事件

添加全局代码

全局网站代码会将访问者添加到您的基本再营销名单中,并在您的网域上设置新 Cookie,用以存储将用户引导至您网站的广告点击的相关信息。您必须在您网站的每个网页上都安装此代码。

全局网站代码
全局网站代码

添加事件代码:

事件代码段与全局网站代码协同发挥作用,用于跟踪应作为转化加以统计的操作。请选择是要在网页加载时还是要在用户点击时跟踪转化。 

事件代码分两种,第一种“网页加载”比较简单,我们只需要将该代码添加到表单提交成功后的页面即可。

事件代码-网页加载
事件代码-网页加载

事件代码第二种是点击,该代码需要根据您网页具体要跟踪哪一个按钮,进行代码编辑,不可以拿来就用,一定要修改!

添加事件代码
添加事件代码-点击

修改后的“点击”事件的代码如下:

<!-- Event snippet for 预约服务 conversion page
In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
<script>
    window.addEventListener("DOMContentLoaded", function(event) {
        document.querySelectorAll('#btn2').forEach(function(e){
            e.addEventListener('click',function(){
                gtag('event', 'conversion', {'send_to': 'AW-10807613862/SskoCNb_lY4DEKazvKEo'});
            });
        });
    });
</script>

最后将代码添加到自己的网站上就可以了。

将全局代码添加到网站上。

完成!

补充:2022-01-19

可不可以不修改Google Ads生成的“点击事件代码”?答案是可以的,但是需要我们在自己的网站上做些设置。具体如下:

  1. 在您的网站上,打开要跟踪的按钮或链接所在网页的 HTML 代码。然后,在网页的 head 标记(即 <head></head>)之间插入事件代码段,并紧挨着放在全局网站代码之后。
  2. 现在,您需要直接在代码中为要跟踪的按钮或链接添加一个 onclick 属性。具体使用何种代码取决于该链接或按钮在网站上的显示形式,即它们是文字链接、图片还是按钮图片。
  • 将代码添加到文字链接中:下面的代码说明了如何为使用 <a> 标记的链接添加点击跟踪功能。在下面的代码中,需要将“http://example.com/your-link”替换为您所用链接的目标网址,或者将“800-123-4567”替换为您网站上的电话号码,再将“Download now!”或“Call now!”替换为您所用的链接文字。应添加到链接标记的代码以黄色突出显示。
<a onclick="return gtag_report_conversion('http://example.com/your-link');"
href="http://example.com/your-link">Download now!</a>

or

<a onclick="return gtag_report_conversion('tel:800-123-4567');" href="tel:800-123-4567">Call now!</a>
  • 将代码添加到按钮:此代码向您展示如何使用标记向按钮添加点击跟踪功能。 在下面的代码中,将“http://example.com/your-link”替换为链接的目标 URL,或将“800-123-4567”替换为您网站上的电话号码。
<button onclick="return gtag_report_conversion('http://example.com/your-link')">Submit</button>

<button onclick="return gtag_report_conversion('tel:800-123-4567')">Call now!</button>
  • 将代码添加到按钮图片中:在下面的代码中,需要将“download_button.gif”替换为您所用的按钮图片,将宽度和高度替换为该按钮的对应参数,并将“http://example.com/your-link”替换为您所用链接的网址,或者将“800-123-4567”替换为您网站上的电话号码。
<img src="download_button.gif" alt="Download Whitepaper"
        width="32" height="32"
        onclick="return gtag_report_conversion('http://example.com/your-link')" />

or

<img src="call_button.gif" alt="Call now!"
        width="32" height="32"
        onclick="return gtag_report_conversion('tel:800-123-4567')" />

为确保转化跟踪能够正常发挥作用,您需要按照上述示例将事件代码段以及相应的 onclick 代码添加到您的链接或按钮所在的网页。这样可以指示 Google Ads 仅在用户点击相应链接或按钮时才记录转化。

重要提示

当用户点击相应链接、按钮或按钮图片并将您的网站或电话链接(例如“http://example.com/your-link”、“tel:800-123-4567”)作为参数值传递时,您的网站必须调用 gtag_report_conversion 函数。

检查转化跟踪代码

如果您想确认转化跟踪代码是否已添加、转化跟踪功能是否正常发挥作用,或者您认为代码可能存在问题,可采取以下步骤: