Insertion du suivi de conversion Google Adwords avec Javascript ou jQuery

Question

Je suis assez novice en javascript, et c'est probablement là que réside 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 le même div sans rafraîchissement de la page. Le problème que je rencontre est le suivant : lorsque j'essaie d'ajouter un appendChild (ou un append en jQuery) aux deux éléments script dans le code de Google (illustré ci-dessous), la page est redirigée vers une page Google vierge (ou du moins c'est ce à quoi cela ressemble via FireBug). Je suis en mesure de 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, voici 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>

C'est plutôt standard. Donc, ce que j'essaie de faire, c'est d'insérer ce code dans la page de résultats en utilisant la méthode de rappel (qui est fournie). Franchement, je suis redirigé quel que soit le moment où j'essaie d'insérer ce code à l'aide de js ou de jQuery (soit au chargement initial de la page, soit dans la méthode de rappel). La méthode de rappel n'est peut-être pas pertinente, mais c'est pourquoi je ne me contente pas de le coller dans le code de la page.

J'ai essayé un certain nombre de façons différentes de le faire, mais voici ce que j'ai actuellement (excusez le manque de rigueur). J'essaie juste de me frayer un chemin à travers tout ç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&amp;guid=ON&amp;script=0";

    $('body').append(scriptTag2);
    $('noscript').append(imgTag);
}

Ce qui est vraiment étrange, c'est que lorsque je n'insère qu'une seule des balises script (peu importe laquelle), il n'y a pas de redirection. Il ne redirige que lorsque j'essaie d'insérer les deux.

J'ai également essayé de mettre la première balise script dans le code de la page d'origine (car elle ne fait aucun appel nulle part, elle ne fait que définir des variables) et d'insérer simplement le fichier conversions.js et la redirection se fait toujours.

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 la v1.3).

Je sais qu'il me manque quelque chose ! Des suggestions ?

Answer 1

De nos jours, il est pratique d'utiliser la balise asynchrone à http://www.googleadservices.com/pagead/conversion_async.js qui expose le window.google_trackConversion fonction.

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 gtag.js : https://developers.google.com/adwords-remarketing-tag/

Answer 2

Si vous utilisez jQuery dans vos pages, pourquoi n'utilisez-vous pas la fonction getScript méthode de la même 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 un réaction de succès 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 disposent de méthodes intégrées similaires. C'est l'une des approches les plus propres.

Answer 3

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

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

Answer 4

// Cela s'occupe de tout 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'appelleriez dans votre script sur l'événement comme ceci :

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

Answer 5

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