Insertion de Google Adwords Conversion Tracking avec Javascript ou jQuery

Je suis assez nouveau pour javascript, et je trouve probablement mon problème. J'essaie de suivre les conversions AdWords qui se produisent dans 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 page. Le problème que j'ai, c'est quand j'essaie d'appriquerChild (ou d'ajouter dans jQuery) les deux éléments du script dans le code de Google (ci-dessous), la page 302 est redirigé vers une page Google vierge (ou du moins c'est sur 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, c'est le 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&amp;guid=ON&amp;script=0"/> </div> </noscript> 

Jolie chose standard. Donc, ce que j'essaie de faire, c'est d'insérer ceci dans la page de résultats à l'aide de la méthode de rappel (qui est fournie). Franchement, je suis redirigé, peu importe quand j'essaie d'insérer ce code en utilisant js ou jQuery (soit sur le chargement de la page d'origine ou dans le rappel), alors peut-être que le bit de rappel n'est pas pertinent, mais c'est pourquoi je ne l'écris pas Le code de la page.

J'ai essayé un certain nombre de façons différentes de faire cela, mais voici ce que j'ai actuellement (excusez la négligence. En essayant seulement de me pénétrer dans cette voie pour le 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&amp;guid=ON&amp;script=0"; $('body').append(scriptTag2); $('noscript').append(imgTag); } 

La chose vraiment étrange est que lorsque je n'insère qu'une des étiquettes de script (peu importe celle), elle ne redirige pas. Il ne redirige que lorsque j'essaie d'insérer les deux.

J'ai également essayé de mettre la première étiquette de script dans le code de page d'origine (car il ne fait aucun appel n'importe où, c'est simplement configurer des variables) et simplement insérer le fichier conversions.js et il continue de redéployer.

Si c'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 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 façon pour faire un sondage sur 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 réussie 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 AFAIK est l'une des approches les plus propres.

De nos jours, il est pratique d'utiliser la window.google_trackConversion 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/

Ce code simple a fonctionné pour moi (la version $ .getScript n'a pas).

 var image = new Image(1,1); image.src = 'http://www.googleadservices.com/pagead/conversion/' + id + '/?label=' + label + ' &guid=ON&script=0'; 

// Cela prend soin de lui pour jQuery. Le code peut être facilement adapté pour 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 vous l'appelez dans votre script sur l'événement ainsi:

 $("button").click( function() { googleTrackingPixel() }) 

Dans votre compte Adwords – si vous modifiez l'événement de suivi des conversions sur "Cliquez" au lieu de "Charger la page", il vous fournira un code qui crée une fonction. Il 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> 

Après avoir essayé tout le lien que Funka a fourni ( http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event ) était ce qui a fonctionné pour moi. Comme il l'a dit, il est effrayant d'écraser document.write, mais il semble que ce soit ce que vous devez faire à moins que vous ne puissiez charger le script avant la chargement de la page.

Puisque le script utilise document.write , il faut qu'il soit 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. }); 

Voir https://gist.github.com/c7a316972128250d278c

Comme vous l'avez vu, la balise de conversion de google appelle uniquement un redessin. Je devais m'assurer qu'il était appelé quand une partie d'une page a été redessinée. (En raison d'un mauvais design de site Web que je ne pouvais pas résoudre en ce moment.) J'ai donc écrit une fonction à appeler depuis un événement OnClick.

Essentiellement, tout ce que vous avez à faire est d'appeler doConversion ();

Voici ce que nous avons fini par:

  // 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); } 

J'ai essayé toutes les manières d'inclure manuellement la conversion. Js, tout a chargé le script, mais n'a pas encore exécuté ce qu'il fallait dans le script, il y a une solution simple.

Il suffit de mettre votre code de conversion dans un HTML séparé, et de le charger dans un iframe.

J'ai trouvé un 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. }; 

Appelez simplement ppcconversion () partout où dans le JS vous souhaitez l'enregistrer.

Tout ce que je fais, c'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 un formulaire d'inscription rempli et soumis, nous publions un script php à l'aide de jQuery, puis envoyons un message "Merci" à un div:

" $first_name , Merci d'avoir demandé plus d'informations. Un représentant vous contactera sous peu."

… suivi de la 1×1 gif Google fournit.

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&amp;label=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&amp;script=0"/>'; 

Vous devrez peut-être jeter un " document.location.reload(); " s'il n'est pas pris en charge par google