使用Javascript或jQuery插入Google Adwords转换跟踪
我很新的JavaScript，其中可能是我的问题。 我正在尝试跟踪在我们网站上的小部件中发生的AdWords转化。 用户填写表单，并从小部件的结果发布在同一个div没有页面刷新。 我遇到的问题是，当我尝试appendChild（或追加jQuery）两个脚本元素在谷歌的代码（如下所示）页面302redirect到一个空白的Google页面（或至less这是通过FireBug的样子） 。 我可以为表单的结果提供callback方法，这就是我试图插入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="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> 很标准的东西。 所以，我想要做的是使用callback方法（提供）插入到结果页面。 坦率地说，无论我尝试使用js还是jQuery（无论是在原始页面加载还是在callback中）插入此代码，我都可以redirect，所以也许callback位是不相关的，但这就是为什么我不只是粘贴到页面的代码。
我已经尝试了许多不同的方法来做到这一点，但是这里是我现在所拥有的（原谅这个不合理的现象，只是试图通过这个方法来解决这个问题）：
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\=\"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); }
真奇怪的是，当我只插入其中一个脚本标记（它并不重要），它不会redirect。 当我尝试插入它们时，它只会redirect。
我也尝试把第一个脚本标签放到原始页面代码中（因为它不会在任何地方进行任何调用，只是设置variables），只是插入conversions.js文件，它仍然会redirect。
如果是相关的，我使用的是Firefox 3.6.13，并且已经尝试了包含jQuery 1.3和1.5的代码（在意识到我们使用的是v1.3之后）。
我知道我错过了一些东西！ 有什么build议么？
如果您在页面中使用jQuery，那么在设置所需variables后，为什么不使用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( "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( "pagead/conversion.js" ); } // success });
如果您使用其他库，如Mootools或Prototype，我相信他们有类似的内置方法。 这个AFAIK是最干净的方法之一。
现在，使用pagead/conversion_async.js上的asynchronous标记可以方便地使用这个标签，该标签公开了window.google_trackConversion函数。
这个function可以随时使用。 例如，在提交表单后，就像你的情况一样。
请参阅https://developers.google.com/adwords-remarketing-tag/asynchronous/
这个简单的代码为我工作（$ .getScript版本没有）。
var image = new Image(1,1); image.src = 'http://www.googleadservices.com/pagead/conversion/' + id + '/?label=' + label + ' &guid=ON&script=0';
/ /这为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("pagead/conversion.js", function() { setTimeout(function() { // let the above script run, then replace doc.write document.write = oldDocWrite }, 100) }) }
//你可以在你的脚本中调用它，如下所示：
$("button").click( function() { googleTrackingPixel() })
在您的AdWords帐户中 – 如果您将转化跟踪事件更改为“点击”而不是“网页加载”，则会为您提供创buildfunction的代码。 它创build一个像这样的片段：
<!-- 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>
尝试了Funka提供的所有链接之后（ http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event ）就是为我工作的。 就像他说覆盖document.write是可怕的，但是看起来这是你必须做的，除非你可以在加载页面之前加载脚本。
由于脚本使用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("pagead/conversion.js") .done(function() { // script is loaded. });
正如你所看到的，谷歌转换标签只需要重绘。 当页面的一部分被重新绘制时，我必须确保它被调用。 （由于一些不好的网站devise，我目前无法修复）所以我写了一个函数来调用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); }
我尝试了所有的方法来手动包含conversion.js，它都加载了脚本，但没有进一步执行我们在脚本中需要的东西，有一个简单的解决scheme。
只需将您的转换代码放在一个单独的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. };
那么只要调用ppcconversion（），无论你在哪里JS你想logging它。
我所做的只是将callback中的代码（或者在我们的例子中是一个图像）和“成功”消息一起返回。
当提交联系表单，或者填写并提交registry单时，我们会使用jQuery发布到php脚本，然后向div发送“thank-you”消息：
“
$first_name，感谢您索取更多信息，代表将尽快与您联系。”
…之后是Google提供的1×1 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&label=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&script=0"/>';
如果没有被Google拾取，你可能需要抛出一个“ document.location.reload(); ”
对于仍在寻找解决scheme的人来说，Google现在通过Google Analytics API支持AJAX转换。
您可以在Google Analytics中进行事件API调用。 您所做的是设置Google Analytics事件，将其与目标绑定，然后将该目标导入AdWords中作为转化。 这是一个漫长的过程，但这是一个干净的解决scheme。
看看这个页面的教程
这适用于我：
window.google_trackConversion({ google_conversion_id: 000000000, conversion_label : "xxxxxxxxxxxx", google_remarketing_only: false, onload_callback : function(){ //do something :) } });
