如何在网站中添加 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生成的“点击事件代码”？答案是可以的，但是需要我们在自己的网站上做些设置。具体如下：

在您的网站上，打开要跟踪的按钮或链接所在网页的 HTML 代码。然后，在网页的 head 标记（即 <head></head>）之间插入事件代码段，并紧挨着放在全局网站代码之后。
现在，您需要直接在代码中为要跟踪的按钮或链接添加一个 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>

<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')" />

<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 函数。

检查转化跟踪代码

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

查看检查转化跟踪代码中的说明
下载适用于 Google Chrome 的 Google Tag Assistant，以便排查与转化跟踪代码有关的问题。