使用Javascript或jQuery插入Google Adwords转换跟踪
我对javascript非常陌生,这可能就是我的问题所在。我试图跟踪在我们网站的小部件中发生的AdWords转换。用户填写表单,小部件的结果将在同一个div中发布,而无需页面刷新。我遇到的问题是,当我尝试在Google代码(如下所示)中追加Child(或在jQuery中追加)两个脚本元素时,页面会被302重定向到一个空白的Google页面(或者至少通过FireBug看起来是这样)。 我能够为表单的结果提供回调方法,这就是我试图插入AdWords跟踪代码的地方。供参考,这是谷歌提供的代码:使用Javascript或jQuery插入Google Adwords转换跟踪,javascript,jquery,google-ads-api,Javascript,Jquery,Google Ads Api,我对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&guid=ON&script=0"/>
</div>
</noscript>
/* */
相当标准的东西。因此,我尝试使用回调方法(提供的方法)将其插入结果页。坦率地说,无论何时尝试使用js或jQuery(在原始页面加载或回调中)插入此代码,我都会被重定向,因此回调位可能不相关,但这就是为什么我不只是将其粘贴到页面代码中的原因
我已经尝试了许多不同的方法来实现这一点,但以下是我目前所拥有的(请原谅我的草率。现在我只是想尝试一下解决这个问题!)
函数匹配结果回调(数据){
var scriptTag=document.createElement('script');
scriptTag.type=“text/javascript”;
scriptTag.text=scriptTag.text+“/**/\n”;
$('body').append(scriptTag);
$('body')。追加(“”);
//我也尝试过上面这一点,使用与“scriptTag”相同的方法,但运气不好,这只是最近的一次迭代。
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&;脚本=0”;
$('body').append(scriptTag2);
$('noscript').append(imgTag);
}
真正奇怪的是,当我只插入一个脚本标记时(不管是哪一个),它不会重定向。它只在我尝试插入这两个文件时重定向
我还尝试将第一个脚本标记放入原始页面代码中(因为它不在任何地方进行任何调用,只是设置变量),只插入conversions.js文件,它仍然执行重定向
如果相关的话,我正在使用Firefox 3.6.13,并且已经尝试了jQuery 1.3和1.5中包含的代码(在意识到我们使用的是v1.3之后)
我知道我错过了什么!有什么建议吗 如果在页面中使用jQuery,为什么不在设置所需变量后使用相同的方法轮询转换跟踪脚本 这是我通常做的,当我收到来自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" );
var google_conversion_id=;
var google_conversion_language=“en”;
var google_conversion_format=“3”;
var google_conversion_color=“ffffff”;
var google_conversion_label=“”;
var google_转换_值=0;
如果(100){
google_转换_值=;
}
$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
});
$.ajax({
async:true,
类型:“POST”,
数据类型:“json”,
网址:,
数据:_数据,
成功:函数(json){
//做点什么
// ...
//轨道转换
var google_conversion_id=;
var google_conversion_language=“en”;
var google_conversion_format=“3”;
var google_conversion_color=“ffffff”;
var google_conversion_label=“”;
var google_转换_值=0;
如果(100){
google_转换_值=;
}
$.getScript(“http://www.googleadservices.com/pagead/conversion.js" );
}//成功
});
如果您使用其他库,比如Mootools或Prototype,我确信它们具有类似的内置方法。这个AFAIK是最干净的方法之一。这个简单的代码对我来说很有用($.getScript版本没有)
在尝试了Funka提供的所有链接()之后,我觉得这一切都很有用。就像他说的覆盖文档很可怕。写,但是
这似乎是您必须要做的,除非您可以在页面加载之前加载脚本。因为脚本使用
文档。编写
,所以需要重新编写
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.
});
请参见我所做的就是返回代码(或者在我们的示例中,返回图像)以及回调中的“success”消息 提交联系人表单或填写并提交注册表单时,我们使用jQuery发布到php脚本,然后向div输出“谢谢”消息: “
$first\u name
,感谢您提供更多信息。代表将很快与您联系。”
。。。其次是谷歌提供的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&label=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&script=0"/>';
echo'success |'.$first_name',感谢您提供更多信息。
代表将很快与您联系;
如果google没有提取到“
document.location.reload();
”,您可能需要添加一个“文档。location.reload();
”//这将为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()
})
正如您所看到的,google转换标签只调用重画。我必须确保在重新绘制页面的一部分时调用它。(由于一些糟糕的网站设计,我目前无法修复。)因此,我编写了一个函数从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);
}
我尝试了所有手动包含的方法
$("button").click( function() {
googleTrackingPixel()
})
// 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);
}
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.
};
<!-- 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>
window.google_trackConversion({
google_conversion_id: 000000000,
conversion_label : "xxxxxxxxxxxx",
google_remarketing_only: false,
onload_callback : function(){
//do something :)
}
});