使用 Javascript 或 jQuery 插入 Google Adwords 转换跟踪
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5085132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inserting Google Adwords Conversion Tracking with Javascript or jQuery
提问by Kevin Pope
I'm pretty new to javascript, and therein probably lies my problem. I'm trying to track AdWords conversions that occur within a widget on our site. The user fills in a form and the result from the widget is published in the same div without a page refresh. The issue I'm having is when I try to appendChild (or append in jQuery) both script elements in Google's code (shown below) the page gets 302 redirected to a blank Google page (or at least that's what it looks like through FireBug). I'm able to provide a callback method for the results of the form, and that's where I'm trying to insert the AdWords tracking code. For reference, this is the code provided by Google:
我对 javascript 很陌生，这可能是我的问题所在。我正在尝试跟踪发生在我们网站上的小部件中的 AdWords 转化。用户填写表单，小部件的结果发布在同一个 div 中，无需刷新页面。我遇到的问题是，当我尝试在 Google 的代码中 appendChild（或在 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&guid=ON&script=0"/>
</div>
</noscript>
Pretty standard stuff. So, what I'm trying to do is insert this into the results page using the callback method (which is provided). Frankly, I'm redirected no matter when I try to insert this code using js or jQuery (either on original page load or in the callback) so maybe the callback bit is irrelevant, but it's why I'm not just pasting it into the page's code.
很标准的东西。所以，我想要做的是使用回调方法（提供）将其插入到结果页面中。坦率地说，无论何时我尝试使用 js 或 jQuery（在原始页面加载或回调中）插入此代码，我都会被重定向，因此回调位可能无关紧要，但这就是为什么我不只是将其粘贴到页面的代码。
I've tried a number of different ways to do this, but here's what I currently have (excuse the sloppiness. Just trying to hack my way through this at the moment!):
我已经尝试了多种不同的方法来做到这一点，但这是我目前所拥有的（请原谅草率。目前只是试图破解我的方法！）：
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&guid=ON&script=0";
$('body').append(scriptTag2);
$('noscript').append(imgTag);
}
The really odd thing is that when I only insert one of the script tags (it doesn't matter which one), it doesn't redirect. It only redirects when I try to insert both of them.
真正奇怪的是，当我只插入一个脚本标签（哪个都无关紧要）时，它不会重定向。它仅在我尝试插入它们时重定向。
I've also tried putting the first script tag into the original page code (as it's not making any calls anywhere, it's just setting variables) and just inserting the conversions.js file and it still does the redirect.
我还尝试将第一个脚本标记放入原始页面代码中（因为它没有在任何地方进行任何调用，它只是设置变量）并且只是插入了 Conversions.js 文件，它仍然执行重定向。
If it's relevant I'm using Firefox 3.6.13, and have tried the included code with both jQuery 1.3 and 1.5 (after realizing we were using v1.3).
如果相关，我使用的是 Firefox 3.6.13，并且已经尝试使用 jQuery 1.3 和 1.5 包含的代码（在意识到我们使用的是 v1.3 之后）。
I know I'm missing something! Any suggestions?
我知道我错过了一些东西！有什么建议？
采纳答案by miCRoSCoPiC_eaRthLinG
If you're using jQuery in your pages, why don't you use the getScriptmethod of the same to poll the conversion tracking script after setting the required variables?
如果您在页面中使用 jQuery，为什么不在getScript设置所需变量后使用相同的方询转换跟踪脚本？
This is what I usually do, once I've received a success responsefrom my AJAX calls.
这是我通常做的，一旦我收到了来自我的 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" );
This works just fine for me. If you want a more detailed example:
这对我来说很好用。如果你想要一个更详细的例子：
$.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
});
If you use other libraries such as Mootools or Prototype, I'm sure they have similar in-built methods. This AFAIK is one of the cleanest approaches.
如果您使用其他库，例如 Mootools 或 Prototype，我确信它们具有类似的内置方法。这个 AFAIK 是最干净的方法之一。
回答by LeZuse
Nowadays it is convenient to use the Asynchronous Tag at http://www.googleadservices.com/pagead/conversion_async.jsthat exposes the window.google_trackConversionfunction.
现在在http://www.googleadservices.com/pagead/conversion_async.js公开window.google_trackConversion函数的地方使用异步标记很方便。
This function can be used at any time. For example after submitting a form, like in your case.
此功能可随时使用。例如在提交表单后，就像你的情况一样。
See https://developers.google.com/adwords-remarketing-tag/asynchronous/
请参阅https://developers.google.com/adwords-remarketing-tag/asynchronous/
Update 2018
2018 年更新
Situation changed and it seems that you have more options now with the gtag.js: https://developers.google.com/adwords-remarketing-tag/
情况发生了变化，现在 gtag.js 似乎有更多选择：https: //developers.google.com/adwords-remarketing-tag/
回答by Antoine Tissier
this simple code worked for me (the $.getScript version didn't).
这个简单的代码对我有用（$.getScript 版本没有）。
var image = new Image(1,1);
image.src = 'http://www.googleadservices.com/pagead/conversion/' + id + '/?label=' + label + ' &guid=ON&script=0';
回答by justinkempton
// This takes care of it for jQuery. Code can be easily adapted for other javascript libraries:
// 这会为 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)
})
}
// and you would call it in your script on the event like so:
// 并且您可以在事件的脚本中调用它，如下所示：
$("button").click( function() {
googleTrackingPixel()
})
回答by webmaster_sean
In your Adwords account - if you change the conversion tracking event to "Click" instead of "Page Load" it will provide you with code that creates a function. It creates a snippet like this:
在您的 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>
Then in your code you just call:
然后在您的代码中，您只需调用：
goog_report_conversion();
Or for a link or image click:
或者点击链接或图片：
<a href="" onclick="goog_report_conversion();">click here</a>
回答by Sabrina Leggett
After trying everything the link Funka provided (http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event) was what worked for me. Like he said it's scary to overwrite document.write, but It seems like this is what you have to do unless you can load the script before the page load.
在尝试了 Funka 提供的所有链接（http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event）后，对我有用。就像他说的，覆盖 document.write 很可怕，但似乎这是你必须做的，除非你可以在页面加载之前加载脚本。
回答by adardesign
Since the script uses document.writeso it needs to be re-written
由于脚本使用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.
});
回答by BillRoth
As you have seen, the google conversion tag only calls on a redraw. I had to make sure it was called when a part of a page was redrawn. (Due to some bad website design that I could not fix at the moment.) So I wrote a function to call from an onClick event.
如您所见，谷歌转换标签只调用重绘。我必须确保在重绘页面的一部分时调用它。（由于一些糟糕的网站设计，我目前无法修复。）所以我写了一个函数来从 onClick 事件调用。
Essentially, all you have to do is to call doConversion();
本质上，您所要做的就是调用 doConversion();
Here is what we ended up with:
这是我们最终的结果：
// 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);
}
回答by CO4 Computing
I tried all the ways to manually include conversion.js, it all loaded the script, but didn't further execute what we needed inside the script, there's a simple solution.
我尝试了所有手动包含conversion.js的方法，它都加载了脚本，但没有进一步执行脚本中我们需要的内容，有一个简单的解决方案。
Just put your conversion code in a separate HTML, and load it in an iframe.
只需将您的转换代码放在单独的 HTML 中，然后将其加载到 iframe 中。
I found code to do that at http://www.benjaminkim.com/that seemed to work well.
我在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.
};
then just call ppcconversion() wherever in the JS you like to record it.
然后只需在 JS 中的任何地方调用 ppcconversion() 来记录它。
回答by boblangdon
All I do is return the code (or in our case, an image) along with the "success" message in the callback.
我所做的就是在回调中返回代码（或者在我们的例子中是图像）以及“成功”消息。
When a contact form is submitted, or a registration form filled out and submitted, we post to a php script using jQuery, then output a "thank-you" message to a div:
当提交联系表单或填写并提交的注册表单时，我们使用 jQuery 发布到 php 脚本，然后向 div 输出“谢谢”消息：
"
$first_name, Thanks for requesting more information. A representative will contact you shortly."
“
$first_name, 感谢您索取更多信息。我们的代表会尽快与您联系。”
... followed by the 1x1 gif Google provides.
... 其次是 Google 提供的 1x1 gif。
Here's the jQuery:
这是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]);
And the php...
和 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&label=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&script=0"/>';
You might need to throw in a "document.location.reload();" if it isn't being picked up by google
document.location.reload();如果谷歌没有找到它，你可能需要输入一个“ ”
