Insertion du suivi des conversions Google Adwords avec Javascript ou jQuery
Je suis assez nouveau pour javascript, et c'est probablement là que réside mon problème. J'essaie de suivre les conversions AdWords qui se produisent au sein d'un widget sur notre site. L'utilisateur remplit un formulaire et le résultat du widget est publié dans la même division sans actualisation de la page. Le problème que je rencontre est lorsque j'essaie d'ajouterChild (ou d'ajouter dans jQuery) les deux éléments de script dans le code de Google (voir ci-dessous), la page est redirigée vers une page Google vierge (ou du moins c'est ce à quoi il ressemble via FireBug). Je peux fournir une méthode de rappel pour les résultats du formulaire et c'est là que j'essaie d'insérer le code de suivi AdWords. Pour référence, il s'agit du code fourni par 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>
Jolies choses standard. Donc, ce que j'essaie de faire est d'insérer ceci dans la page de résultats en utilisant la méthode de rappel (fournie). Franchement, peu importe le moment où j'essaie d'insérer ce code en utilisant js ou jQuery (soit au chargement de la page d'origine, soit dans le rappel), le bit de rappel n'est peut-être pas pertinent, mais c'est la raison pour laquelle je ne le colle pas code de la page.
J'ai essayé différentes façons de le faire, mais voici ce que j'ai actuellement (excusez-moi. J'essaie juste de me frayer un chemin à travers ça en ce 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);
}
Ce qui est vraiment étrange, c'est que lorsque je n'insère qu'une des balises de script (peu importe laquelle), cela ne redirige pas. Il ne redirige que lorsque j'essaie d'insérer les deux.
J'ai également essayé de mettre la première balise de script dans le code de page d'origine (comme il ne fait aucun appel n'importe où, il ne s'agit que de définir des variables) et d'insérer simplement le fichier conversions.js tout en effectuant la redirection.
Si cela est pertinent, j'utilise Firefox 3.6.13 et j'ai essayé le code inclus avec jQuery 1.3 et 1.5 (après avoir réalisé que nous utilisions la v1.3).
Je sais que je manque quelque chose! Aucune suggestion?
Si vous utilisez jQuery dans vos pages, pourquoi n'utilisez-vous pas la méthode getScript de la même manière pour interroger le script de suivi des conversions après avoir défini les variables requises?
C’est ce que je fais habituellement une fois que j’ai reçu une réponse success de mes appels 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" );
Cela fonctionne très bien pour moi. Si vous voulez un exemple plus détaillé:
$.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 vous utilisez d'autres bibliothèques telles que Mootools ou Prototype, je suis sûr qu'elles ont des méthodes intégrées similaires. Cette note AFAIK est l'une des approches les plus propres.
De nos jours, il est pratique d’utiliser la balise asynchrone à http://www.googleadservices.com/pagead/conversion_async.js qui expose la fonction window.google_trackConversion.
Cette fonction peut être utilisée à tout moment. Par exemple, après avoir soumis un formulaire, comme dans votre cas.
Voir https://developers.google.com/adwords-remarketing-tag/asynchronous/
Mise à jour 2018
La situation a changé et il semble que vous ayez plus d'options maintenant avec le fichier gtag.js: https://developers.google.com/adwords-remarketing-tag/
ce code simple a fonctionné pour moi (la version $ .getScript ne l’a pas).
var image = new Image(1,1);
image.src = 'http://www.googleadservices.com/pagead/conversion/' + id + '/?label=' + label + ' &guid=ON&script=0';
// This s'en occupe pour jQuery. Le code peut être facilement adapté à d'autres bibliothèques 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)
})
}
// et tu l'appellerais dans ton script sur l'événement de la manière suivante:
$("button").click( function() {
googleTrackingPixel()
})
Dans votre compte Adwords, si vous modifiez l'événement de suivi des conversions en "Cliquez sur" au lieu de "Chargement de page", vous obtiendrez un code créant une fonction. Cela crée un extrait comme ceci:
<!-- 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>
Ensuite, dans votre code, vous appelez simplement:
goog_report_conversion();
Ou pour un lien ou une image, cliquez sur:
<a href="" onclick="goog_report_conversion();">click here</a>
J'ai essayé tous les moyens d'inclure manuellement conversion.js, tout cela a chargé le script, mais je n'ai pas exécuté davantage ce dont nous avions besoin dans le script, il existe une solution simple.
Il suffit de placer votre code de conversion dans un fichier HTML séparé et de le charger dans un iframe.
J'ai trouvé le code pour le faire à http://www.benjaminkim.com/ qui semblait bien fonctionner.
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.
};
ensuite, appelez simplement ppcconversion () où que vous souhaitiez l’enregistrer.
Comme vous l'avez vu, la balise de conversion google n'appelle que sur une mise à jour. Je devais m'assurer qu'il s'appelait lorsqu'une partie d'une page était redessinée. (En raison d'une mauvaise conception de site Web que je ne pouvais pas corriger pour le moment.) J'ai donc écrit une fonction pour appeler depuis un événement onClick.
En gros, tout ce que vous avez à faire est d’appeler doConversion ();
Voici ce que nous avons fini avec:
// 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);
}
Puisque le script utilise document.write, il doit être réécrit.
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.
});
Après avoir tout essayé, le lien fourni par Funka ( http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event ) a été ce qui a fonctionné pour moi. Comme il l'a dit, il est effrayant de remplacer document.write, mais Il semble que ce soit ce que vous devez faire, à moins que vous ne puissiez charger le script avant le chargement de la page.
Cela fonctionne pour moi:
window.google_trackConversion({
google_conversion_id: 000000000,
conversion_label : "xxxxxxxxxxxx",
google_remarketing_only: false,
onload_callback : function(){
//do something :)
}
});
Pour ceux qui recherchent toujours une bonne solution à ce problème, Google prend en charge les conversions AJAX en mode natif via son API Google Analytics.
Vous pouvez le faire en effectuant un appel API d'événement dans Google Analytics. Vous définissez un événement Analytics, associez-le à un objectif, puis importez-le dans AdWords en tant que conversion. C'est un peu long, mais c'est une solution propre.
Découvrez Cette page pour un tutoriel
Tout ce que je fais est de retourner le code (ou dans notre cas, une image) avec le message "succès" dans le rappel.
Lorsqu'un formulaire de contact est soumis, ou qu'un formulaire d'inscription est rempli et soumis, nous publions sur un script php en utilisant jQuery, puis envoyons un message de remerciement à un div:
"
$first_name, Merci de demander plus d'informations. Un représentant vous contactera sous peu."
... suivi du 1x1 gif fourni par Google.
Voici le 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]);
Et le 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"/>';
Vous devrez peut-être ajouter un "document.location.reload();" s'il n'est pas détecté par Google