使用Javascript或jQuery插入Google Adwords转化跟踪

Question

我对JavaScript还比较陌生，所以遇到了些问题。我想要追踪嵌入在我们网站小部件内的AdWords转化数据。用户填写表单后，小部件会在不刷新页面的情况下将结果发布在同一DIV中。我的问题在于，当我试图使用 Google 提供的以下代码将两个脚本元素附加到 DOM 中时（用 appendChild 或者 jQuery 中的 append 方法），页面就变成了 302 重定向到一个空白的 Google 页面（至少 FireBug 是这样显示的）。 我可以为表单结果提供回调方法，并尝试在其中插入 AdWords 追踪代码。以下是 Google 提供的代码：

<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 993834405;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "bSpUCOP9iAIQpevy2QM";
/* ]]> */
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/993834405/?label=bSpUCOP9iAIQpevy2QM&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

这是很常规的事情。我想做的是使用提供的回调函数将其插入到结果页面中。但无论我是在原始页面加载时还是在回调中插入此代码（使用js或jQuery），都会被重定向，因此回调部分可能不相关，但这就是为什么我不能只将其粘贴到页面代码中的原因。

我尝试了许多不同的方法，但目前我有以下代码（请原谅我的笨拙。目前只是试图硬着头皮解决！）：

function matchResultsCallback(data){

    var scriptTag = document.createElement('script');
    scriptTag.type = "text/javascript";
    scriptTag.text = scriptTag.text + "/* <![CDATA[ */\n";
    scriptTag.text = scriptTag.text + "var google_conversion_id \= 993834405\;\n";  
    scriptTag.text = scriptTag.text + "var google_conversion_language \= \"en\"\;\n";   
    scriptTag.text = scriptTag.text + "var google_conversion_format \= \"3\"\;\n";
    scriptTag.text = scriptTag.text + "var google_conversion_color \= \"ffffff\"\;\n";
    scriptTag.text = scriptTag.text + "var google_conversion_label \= \"bSpUCOP9iAIQpevy2QM\"\;\n";
    scriptTag.text = scriptTag.text + "/* ]]> */\n";
    $('body').append(scriptTag);

    $('body').append("<script type\=\"text\/javascript\" src\=\"http://www.googleadservices.com/pagead/conversion.js\" />");
    //I have also tried this bit above using the same method as 'scriptTag' with no luck, this is just the most recent iteration.

    var scriptTag2 = document.createElement('noscript');
    var imgTag = document.createElement('img');
    imgTag.height = 1;
    imgTag.width = 1;
    imgTag.border = 0;
    imgTag.src = "http://www.googleadservices.com/pagead/conversion/993834405/?label=bSpUCOP9iAIQpevy2QM&amp;guid=ON&amp;script=0";

    $('body').append(scriptTag2);
    $('noscript').append(imgTag);
}

真奇怪，当我只插入其中一个脚本标签（无论是哪一个）时，它都不会重定向。只有在尝试插入这两个标签时才会重定向。

我还尝试过将第一个脚本标签放入原始页面代码中（因为它没有在任何地方进行调用，只是设置变量），然后仅插入conversions.js文件，但它仍然会重定向。

如果相关的话，我正在使用Firefox 3.6.13，并且在意识到我们使用v1.3之后，已经尝试了包括jQuery 1.3和1.5的代码。

我知道我遗漏了某些东西！有什么建议吗？

- Kevin Pope

---

目前我（大概）已经通过将AdWords代码转储到iframe中，并在回调发生时加载iframe来使其工作。不过我相信还有更优雅的方法。 - Kevin Pope

我无法超越 document.createElement('noscript');。哈哈。 - Andrew Bullock

注意，$(...).html(...) 函数将执行 JavaScripts，但据我所知，主要问题在于全局变量是用 "var" 关键字定义的。我不确定 append() 函数是否也能正确运行脚本。无论如何，最好使用 Microscopic 答案中的代码（但不包括 'var' 关键字）。 - Alexis Wilke

嗨，Alexis，我设置了一个测试页面，其中在页面的头部声明了var foo = 1234;。然后，通过Ajax调用jQuery('#myDiv').html('<script src="myTestScript.js"></script>');，发现确实可以访问foo的值，所以我不确定这是否是问题。（是的，myTestScript.js甚至在不同的域上） - Funka

对于我之前的评论，有一些后续：正如所述，我运行的测试确实可以访问我的变量，并且发现我能够很好地使用 alert 等功能，但有趣的是，我的尝试使用 document.write 却没有起作用（请参见本页面其他评论），这就是我怀疑这不会按我们所希望的方式工作的原因...使用 iframe 是我在其他几个地方看到的建议，所以我可能稍后会尝试一下，但现在我们将尝试仅使用通常在 noscript 块中看到的 1x1 隐藏像素，并查看它是否足够满足客户的需求... - Funka

jQuery + Ajax：https://dev59.com/questions/YF4d5IYBdhLWcg3wHPg9#27149886?noredirect=1#comment42795611_27149886 - Imnotapotato

Answer 1

现在使用异步标签 http://www.googleadservices.com/pagead/conversion_async.js 可以方便地暴露出 window.google_trackConversion 函数。这个函数可以随时使用，例如在提交表单后，就像您的情况一样。请参考 https://developers.google.com/adwords-remarketing-tag/asynchronous/。

---

2018更新

情况发生了变化，现在您使用gtag.js有更多的选择：https://developers.google.com/adwords-remarketing-tag/

- LeZuse

---

有人知道为什么那个AdWords页面只谈论再营销吗？我找不到任何官方文档建议在一般的电子商务转化中使用conversion_async.js。 - Boycott Russia

这确实是最佳解决方案！ - Milkmannetje

链接已失效。 - magnattic

Answer 2

如果你的页面中使用了jQuery，为何不使用getScript方法来设置所需变量后轮询转化跟踪脚本呢？这是我通常在收到AJAX调用成功响应后所做的事情。

var google_conversion_id = <Your ID Here>;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "<Your Label here>";
var google_conversion_value = 0;
if (100) {
    google_conversion_value = <Your value here if any>;
}
$jQ.getScript( "http://www.googleadservices.com/pagead/conversion.js" );

这对我来说完全没问题。如果您需要更详细的示例：

$.ajax({
    async:      true,
    type:       "POST",
    dataType:   "json",
    url:        <Your URL>,
    data:       _data,
    success:    function( json ) {

            // Do something
            // ...

            // Track conversion
            var google_conversion_id = <Your ID Here>;
            var google_conversion_language = "en";
            var google_conversion_format = "3";
            var google_conversion_color = "ffffff";
            var google_conversion_label = "<Your Label here>";
            var google_conversion_value = 0;
            if (100) {
                google_conversion_value = <Your value here if any>;
            }
            $.getScript( "http://www.googleadservices.com/pagead/conversion.js" );

        } // success
});

如果您使用其他库，如Mootools或Prototype，我相信它们也有类似的内置方法。据我所知，这是其中最干净的方法之一。

- miCRoSCoPiC_eaRthLinG

---

你需要将"var google_conversion_id"和其他变量更改为全局变量吗？例如"window.google_conversion_id = x"？ - Evgeny

测试这个解决方案时，它对我们来说并没有真正起作用。虽然Google转化JS已添加到页面中，但它似乎没有像通常插入到DOM中的Google转化代码那样工作。它不会注入DOM中的额外img像素或iframes，这些通常是转换代码插入DOM中的。我非常怀疑这个转化是否真正起作用。 - Yossi Ben Haim

@Yossi，我也有这个怀疑。我找到了这篇相关文章http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event，所以我自己分析了`conversion.js`脚本来验证它确实使用`document.write`---因此插入脚本的位置似乎确实很重要。（尽管，我不确定是否愿意覆盖document.write，正如他的解决方案所建议的那样...） - Funka

由于代码应该生成的<iframe未添加到页面中，因此此解决方案无法正常工作。 - jonathanKingston

我强烈反对使用任何类似于此的定制解决方案 - 我不确定为什么这被标记为正确答案！https://developers.google.com/adwords-remarketing-tag/asynchronous/ 上有所有正确操作所需的信息。 - matt1

Answer 3

这段简单的代码对我有效（$.getScript版本则无效）。

var image = new Image(1,1);
image.src = 'http://www.googleadservices.com/pagead/conversion/' + id + '/?label=' + label + ' &guid=ON&script=0';

- Antoine Tissier

---

我曾考虑过这样做，但我担心行末的 script=0 参数可能会产生“不良”副作用。此外，如果您在代码中编写它，使用 Microscopic 提出的 JavaScript 解决方案更有意义。 - Alexis Wilke

Answer 4

// 这个可以轻松处理jQuery。代码可以轻松地适应其他JavaScript库：

        function googleTrackingPixel() {
            // set google variables as globals
            window.google_conversion_id = 1117861175
            window.google_conversion_language = "en"
            window.google_conversion_format = "3"
            window.google_conversion_color = "ffffff"
            window.google_conversion_label = "Ll49CJnRpgUQ9-at5QM"
            window.google_conversion_value = 0

            var oldDocWrite = document.write // save old doc write

            document.write = function(node){ // change doc write to be friendlier, temporary
                $("body").append(node)
            }

            $.getScript("http://www.googleadservices.com/pagead/conversion.js", function() {

                setTimeout(function() { // let the above script run, then replace doc.write
                    document.write = oldDocWrite
                }, 100)

            })
        }

// 然后您可以在事件中像这样调用它：

$("button").click( function() {
   googleTrackingPixel()
})

- justinkempton

---

我曾经使用过类似的解决方案，但它非常不专业。//www.googleadservices.com/pagead/conversion_async.js是正确的选择。 - Andy Zarzycki

Answer 5

在您的Adwords账户中，如果您将转化跟踪事件从“页面加载”更改为“点击”，它将为您提供创建函数的代码。它会创建一个类似于这样的片段：

<!-- Google Code for Developer Contact Form Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
  /* <![CDATA[ */
  goog_snippet_vars = function() {
    var w = window;
    w.google_conversion_id = <Your ID Here>;
    w.google_conversion_label = "<Your value here if any>";
    w.google_remarketing_only = false;
  }
  // DO NOT CHANGE THE CODE BELOW.
  goog_report_conversion = function(url) {
    goog_snippet_vars();
    window.google_conversion_format = "3";
    window.google_is_call = true;
    var opt = new Object();
    opt.onload_callback = function() {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  }
  var conv_handler = window['google_trackConversion'];
  if (typeof(conv_handler) == 'function') {
  conv_handler(opt);
  }
}
/* ]]> */
</script>
<script type="text/javascript"
  src="//www.googleadservices.com/pagead/conversion_async.js">
</script>

然后在您的代码中，只需调用：

goog_report_conversion();

或者对于链接或图片，点击：

<a href="" onclick="goog_report_conversion();">click here</a>

- webmaster_sean

Answer 6

正如您所见，谷歌转化标记仅在重新绘制时调用。我必须确保它在页面的某个部分重新绘制时被调用。（由于一些糟糕的网站设计，我暂时无法修复。）因此，我编写了一个函数，以便从onClick事件中调用。

基本上，您只需要调用doConversion();

这就是我们最终得到的内容：

    // gothelp from from http://www.ewanheming.com/2012/01/web-analytics/website-tracking/adwords-page-event-conversion-tracking

    var Goal = function(id, label, value, url) {
    this.id = id;
    this.label = label;
    this.value = value;
    this.url = url;
    };

function trackAdWordsConversion(goal, callback) {
// Create an image
var img = document.createElement("img");

// An optional callback function to run follow up processed after the conversion has been tracked
if(callback && typeof callback === "function") {
    img.onload = callback;
}
// Construct the tracking beacon using the goal parameters
var trackingUrl = "http://www.googleadservices.com/pagead/conversion/"+goal.id;
trackingUrl += "/?random="+new Date().getMilliseconds();
trackingUrl += "&value="+goal.value;
trackingUrl += "&label="+goal.label;
trackingUrl += "&guid=ON&script=0&url="+encodeURI(goal.url);
img.src = trackingUrl;

// Add the image to the page 
document.body.appendChild(img);

// Don't display the image 
img.style = "display: none;";
    }
function linkClick(link, goal) {
try {
    // A function to redirect the user after the conversion event has been sent
    var linkClickCallback = function() {
        window.location = link.href;
    };

    // Track the conversion
    trackAdWordsConversion(goal, linkClickCallback);

    // Don't keep the user waiting too long in case there are problems
    setTimeout(linkClickCallback, 1000);

    // Stop the default link click
    return false;
} catch(err) {
    // Ensure the user is still redirected if there's an unexpected error in the code
    return true;
}
}
function doConversion() {
var g = new Goal(YOUR CODE,YOUR_COOKIE,0.0,location.href);
return linkClick(this,g);
}

- BillRoth

---

当你说“只在重绘时发生”时，你是指“刷新”吗？ - nym

抱歉耽搁了。是的。 - BillRoth

Answer 7

我尝试了所有手动包含conversion.js的方法，它们都加载了脚本，但没有进一步执行我们在脚本中需要的内容，有一个简单的解决方案。

只需将您的转换代码放在单独的HTML中，并在iframe中加载它即可。

我发现在http://www.benjaminkim.com/上找到的代码似乎很有效。

function ppcconversion() {
var iframe = document.createElement('iframe');
iframe.style.width = '0px';
iframe.style.height = '0px';
document.body.appendChild(iframe);
iframe.src = '/track.html'; // put URL to tracking code here.
};

那么只需在JS中想要记录的位置调用ppcconversion()即可。

- CO4 Computing

Answer 8

尝试了Funka提供的所有链接之后（http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event），这个链接对我有效。就像他说的那样，覆盖document.write很可怕，但是除非你可以在页面加载之前加载脚本，否则似乎必须这么做。

- Sabrina Leggett

Answer 9

由于脚本使用了document.write，因此需要重新编写。

document.write = function(node){ // exactly what document.write should of been doing..
  $("body").append(node);
}
    window.google_tag_params = {
        prodid: pageId,
        pagetype: pageTypes[pageType] || "",
        value: "234324342"
    };
    window.google_conversion_id = 2324849237;
    window.google_conversion_label = "u38234j32423j432kj4";
    window.google_custom_params = window.google_tag_params;
    window.google_remarketing_only = true;

    $.getScript("http://www.googleadservices.com/pagead/conversion.js")
.done(function() {
      // script is loaded.
    });

请查看https://gist.github.com/c7a316972128250d278c

- adardesign

Answer 10

我所做的就是在回调函数中返回代码（或在我们的情况下，一张图片）以及“成功”消息。

当提交联系表单或填写并提交注册表单时，我们使用jQuery发布到php脚本，然后将“感谢您”的消息输出到一个div：

"$first_name，感谢您请求更多信息。代表将尽快与您联系。"

... 然后是Google提供的1x1像素的gif图像。

以下是jQuery代码：

$.post('script.php',{'first_name':first_name,'last_name':last_name,'email':email,'phone1':phone1,'password':password,},function(data){
var result=data.split("|");
if(result[0] ==='success'){
$('#return').html(result[1] + $result[2]);

而且PHP...

echo 'success|'.$first_name.', Thanks for requesting more information.
A representative will contact you shortly.|<img height="1" width="1" alt="" src="http://www.googleadservices.com/pagead/conversion/xxxxxxxx/imp.gif?value=0&amp;label=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&amp;script=0"/>';

如果Google没有检测到，您可能需要添加一个 "document.location.reload();"。

- boblangdon