javascript - sitio - gtag('' event conversion allow_custom_scripts '': true
Insertar el seguimiento de conversiones de Google Adwords con Javascript o jQuery (12)
Soy bastante nuevo en javascript, y probablemente ahí radique mi problema. Estoy tratando de rastrear las conversiones de AdWords que ocurren dentro de un widget en nuestro sitio. El usuario rellena un formulario y el resultado del widget se publica en el mismo div sin una actualización de página. El problema que estoy teniendo es cuando intento agregar o pegar en los dos elementos del script en el código de Google (que se muestra a continuación). La página se redirecciona a una página en blanco de Google (o al menos así se ve a través de FireBug) . Puedo proporcionar un método de devolución de llamada para los resultados del formulario, y ahí es donde intento insertar el código de seguimiento de AdWords. Como referencia, este es el código provisto por 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&guid=ON&script=0"/>
</div>
</noscript>
Bastante estándar. Entonces, lo que estoy tratando de hacer es insertar esto en la página de resultados usando el método de devolución de llamada (que se proporciona). Francamente, me redirigen no importa cuando intento insertar este código usando js o jQuery (ya sea en la carga de la página original o en la devolución de llamada), así que tal vez el bit de devolución de llamada sea irrelevante, pero es por eso que no solo lo pego en el código de la página.
He intentado varias formas diferentes de hacer esto, pero esto es lo que tengo actualmente (perdón por el descuido. ¡Solo estoy tratando de abrirme paso a través de esto en este momento!):
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);
}
Lo realmente extraño es que cuando solo inserto una de las etiquetas de script (no importa cuál), no redirige. Solo redirige cuando intento insertar ambos.
También intenté poner la primera etiqueta de script en el código de la página original (ya que no hace ninguna llamada en cualquier lugar, solo está configurando variables) e insertando el archivo converssions.js y aún así se redirige.
Si es relevante, estoy usando Firefox 3.6.13, y he probado el código incluido con jQuery 1.3 y 1.5 (después de darme cuenta de que estábamos usando v1.3).
¡Sé que me estoy perdiendo algo! ¿Alguna sugerencia?
// Esto lo cuida para jQuery. El código se puede adaptar fácilmente para otras bibliotecas de 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)
})
}
// y lo llamarías en tu script en el evento así:
$("button").click( function() {
googleTrackingPixel()
})
Como ha visto, la etiqueta de conversión de google solo solicita un redibujado. Tuve que asegurarme de que se llamara cuando se redibujó una parte de la página. (Debido a un mal diseño del sitio web que no pude solucionar en este momento). Así que escribí una función para llamar desde un evento onClick.
Básicamente, todo lo que tienes que hacer es llamar a doConversion ();
Aquí es a lo que terminamos con:
// 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);
}
Dado que el script utiliza document.write por lo que debe volver a escribirse
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.
});
Después de probar todo, el vínculo que Funka proporcionó ( articles.adamwrobel.com/2010/12/23/… ) fue lo que funcionó para mí. Como dijo, es aterrador sobrescribir document.write, pero parece que esto es lo que tienes que hacer a menos que puedas cargar el script antes de que se cargue la página.
En su cuenta de AdWords: si cambia el evento de seguimiento de conversiones a "Hacer clic" en lugar de "Cargar página", le proporcionará un código que crea una función. Crea un fragmento como este:
<!-- 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>
Luego, en su código, simplemente llame:
goog_report_conversion();
O para un enlace o imagen, haga clic en:
<a href="" onclick="goog_report_conversion();">click here</a>
Esto funciona para mí:
window.google_trackConversion({
google_conversion_id: 000000000,
conversion_label : "xxxxxxxxxxxx",
google_remarketing_only: false,
onload_callback : function(){
//do something :)
}
});
Hoy en día es conveniente usar la etiqueta asincrónica en http://www.googleadservices.com/pagead/conversion_async.js que expone la función window.google_trackConversion .
Esta función se puede usar en cualquier momento. Por ejemplo, después de enviar un formulario, como en su caso.
Consulte developers.google.com/adwords-remarketing-tag/asynchronous
Actualización 2018
La situación ha cambiado y parece que ahora tiene más opciones con gtag.js: https://developers.google.com/adwords-remarketing-tag/
Intenté todas las maneras de incluir conversion.js manualmente, todo cargó el script, pero no ejecutó más lo que necesitábamos dentro del script, hay una solución simple.
Simplemente ponga su código de conversión en un HTML separado y cárguelo en un iframe.
Encontré código para hacer eso en http://www.benjaminkim.com/ que parecía funcionar bien.
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.
};
entonces simplemente llame a ppcconversion () en cualquier lugar del JS que quiera registrarlo.
Si está utilizando jQuery en sus páginas, ¿por qué no usa el método getScript del mismo para sondear el script de seguimiento de conversiones después de establecer las variables requeridas?
Esto es lo que suelo hacer, una vez que recibo una respuesta exitosa de mis llamadas 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" );
Esto funciona bien para mí. Si quieres un ejemplo más detallado:
$.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
});
Si usa otras bibliotecas como Mootools o Prototype, estoy seguro de que tienen métodos integrados similares. Este AFAIK es uno de los enfoques más limpios.
Todo lo que hago es devolver el código (o en nuestro caso, una imagen) junto con el mensaje de "éxito" en la devolución de llamada.
Cuando se envía un formulario de contacto o se completa y envía un formulario de registro, lo publicamos en un script php usando jQuery, y luego enviamos un mensaje de agradecimiento a un div:
"
$first_name, gracias por solicitar más información. Un representante se pondrá en contacto con usted en breve".
... seguido por el gif 1x1 que proporciona Google.
Aquí está el 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]);
Y el 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"/>'';
Es posible que deba ingresar un " document.location.reload(); " si no está siendo recogido por google
este código simple funcionó para mí (la versión $ .getScript no).
var image = new Image(1,1);
image.src = ''http://www.googleadservices.com/pagead/conversion/'' + id + ''/?label='' + label + '' &guid=ON&script=0'';
Para cualquiera que todavía esté buscando una buena solución para esto, Google ahora admite las conversiones AJAX de forma nativa a través de su API de Google Analytics.
Puedes hacerlo haciendo una llamada a API de evento en Google Analytics. Lo que hace es configurar un evento de Analytics, vincularlo a un objetivo y luego importar ese objetivo en AdWords como una conversión. Es un proceso largo pero es una solución limpia.
Echa un vistazo a esta página para obtener un tutorial