【问题标题】：Inserting Google Adwords Conversion Tracking with Javascript or jQuery使用 Javascript 或 jQuery 插入 Google Adwords 转化跟踪
【发布时间】：2011-07-02 09:23:01
【问题描述】：

我对 javascript 很陌生，这可能是我的问题所在。我正在尝试跟踪在我们网站上的小部件中发生的 AdWords 转化。用户填写表单，小部件的结果将在同一个 div 中发布，无需刷新页面。我遇到的问题是，当我尝试在 Google 代码（如下所示）中附加Child（或在 jQuery 中附加）两个脚本元素时，页面被 302 重定向到空白 Google 页面（或者至少通过 FireBug 看起来是这样） . 我能够为表单的结果提供回调方法，这就是我尝试插入 AdWords 跟踪代码的地方。供参考，这是谷歌提供的代码：

<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);
}

真正奇怪的是，当我只插入一个脚本标签（不管是哪一个）时，它不会重定向。只有当我尝试同时插入它们时它才会重定向。

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

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

我知道我错过了什么！有什么建议？

【问题讨论】：

目前我（大概）通过将 adwords 代码转储到 iframe 并在回调发生时加载 iframe 来完成这项工作。不过，我敢肯定还有更优雅的方式。
无法克服document.createElement('noscript');。大声笑
请注意，$(...).html(...) 函数将执行 JavaScript，但据我所知，主要问题是全局变量是使用“var”关键字定义的。我不确定 append() 函数是否也能正确运行脚本。无论如何，最好使用微观答案中的代码（但没有“var”关键字。）
嗨，Alexis，我设置了一个测试页面，在页面头部声明了var foo = 1234;，并在其自己的script 中声明。然后，我用一些 Ajax 调用了jQuery('#myDiv').html('<script src="myTestScript.js"></script>');，发现是的，它能够访问foo 的值，所以我不完全确定这是问题所在。（是的，myTestScript.js 甚至在不同的域中）
我之前的评论的一些后续：如前所述，我运行的测试确实可以访问我的变量，并发现我能够alert它们就好了，等等，但有趣的是，我使用document.write 的尝试没有没有工作并且（请参阅我在此页面其他地方的other 评论）是为什么我怀疑这不会像我们希望的那样工作.. . 使用 iframe 是我在其他一些地方看到过的建议，所以我可能稍后再试，但现在我们将尝试只使用您通常在 noscript 块中看到的 1x1 隐藏像素，并且看看这对客户来说是否“足够好”......

标签： javascript jquery google-ads-api

【解决方案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/

【讨论】：

有谁知道为什么那个 adwords 页面只谈论再营销？我找不到任何官方文档推荐使用conversion_async.js 进行一般的电子商务转换。
这确实是首选解决方案！
链接已失效。

【解决方案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，我确信它们具有类似的内置方法。这个 AFAIK 是最干净的方法之一。

【讨论】：

嘿，谢谢。我确实最终通过 getScript jQuery 调用以这种方式完成了这项工作。不过，一旦我真正解决了它，就忘了更新它。 :-)
您不需要将“var google_conversion_id”和其他变量更改为全局变量吗？喜欢“window.google_conversion_id = x”？
测试这个解决方案，它并没有真正为我们工作。 google 转换 JS 已添加到页面中，但它的功能似乎与“正常”插入的 google 转换代码不同。它不会向 dom 注入额外的额外 img 像素或 iframe，这些像素或 iframe 通常由转换代码插入到 DOM 中。我强烈怀疑转换并没有真正起作用。
@Yossi，我的怀疑也是如此。我找到了这篇相关文章articles.adamwrobel.com/2010/12/23/…，所以我自己分析了conversion.js 脚本以验证是的，它确实使用了document.write --- 所以插入脚本的位置确实看起来重要的。（虽然，我不确定我是否愿意按照他的解决方案中的建议覆盖 document.write...）
我强烈建议反对任何这样的自定义解决方案 - 我不确定这如何被标记为正确答案！ developers.google.com/adwords-remarketing-tag/asynchronous 拥有正确执行此操作所需的一切。

【解决方案3】：

这个简单的代码对我有用（$.getScript 版本没有）。

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

【讨论】：

我想过这样做，但我担心行尾的script=0 参数可能会产生“坏”的副作用。另外，如果你用代码编写，那么使用 Microscope 提供的 JavaScript 解决方案会更有意义。

【解决方案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()
})

【讨论】：

我曾经使用过类似的解决方案，但它非常hacky。 //www.googleadservices.com/pagead/conversion_async.js 是要走的路

【解决方案5】：

在您的 Adwords 帐户中 - 如果您将转化跟踪事件更改为“点击”而不是“页面加载”，它将为您提供创建函数的代码。它会像这样创建一个 sn-p：

<!-- 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>

【讨论】：

【解决方案6】：

在尝试了一切之后，Funka 提供的链接 (http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event) 对我有用。就像他说覆盖document.write很可怕，但是除非您可以在页面加载之前加载脚本，否则这似乎是您必须做的事情。

【讨论】：

【解决方案7】：

由于脚本使用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

【讨论】：

【解决方案8】：

如您所见，谷歌转换标签只调用重绘。我必须确保在重绘页面的一部分时调用它。（由于一些糟糕的网站设计，我目前无法修复。）所以我编写了一个函数来从 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);
}

【讨论】：

当您说“仅在重绘时发生”时，您的意思是“刷新”吗？
抱歉耽搁了。是的。

【解决方案9】：

我尝试了所有手动包含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()。

【讨论】：

【解决方案10】：

我所做的只是在回调中返回代码（或者在我们的例子中是图像）以及“成功”消息。

当联系表单被提交，或者注册表被填写并提交时，我们使用 jQuery 发布到一个 php 脚本，然后输出一个“thank-you”消息到一个 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();”

【讨论】：

【解决方案11】：

对于仍在为此寻找良好解决方案的任何人，Google 现在通过其 Google Analytics API 原生支持 AJAX 转换。

您可以通过在 Google Analytics（分析）中调用事件 API 来实现。您要做的是设置一个 Analytics 事件，将其与一个目标相关联，然后将该目标作为转化导入 AdWords。这是一个漫长的过程，但它是一个干净的解决方案。

查看This Page 获取教程

【讨论】：

【解决方案12】：

这对我有用：

window.google_trackConversion({
    google_conversion_id: 000000000, 
    conversion_label : "xxxxxxxxxxxx",
    google_remarketing_only: false,
    onload_callback : function(){
        //do something :)
    }
});

【讨论】：