it-swarm.com.de

Einfügen des Conversion-Tracking von Google Adwords mit Javascript oder jQuery

Ich bin ziemlich neu bei Javascript, und darin liegt wahrscheinlich mein Problem. Ich versuche, AdWords-Conversions zu verfolgen, die in einem Widget auf unserer Website auftreten. Der Benutzer füllt ein Formular aus, und das Ergebnis des Widgets wird ohne Aktualisierung der Seite in demselben Div veröffentlicht. Das Problem, das ich habe, ist, wenn ich versuche, beide Skriptelemente im Code von Google anzuhängen (oder in jQuery anzuhängen) (siehe unten), wird die Seite auf eine leere Google-Seite umgeleitet (oder zumindest sieht es durch FireBug aus). Ich kann eine Rückrufmethode für die Ergebnisse des Formulars bereitstellen, und hier versuche ich, den AdWords-Tracking-Code einzufügen. Dies ist der von Google bereitgestellte Code:

<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>

Ziemlich Standard. Was ich versuche zu tun, ist dies mit der Callback-Methode (die bereitgestellt wird) in die Ergebnisseite einzufügen. Ehrlich gesagt, ich werde umgeleitet, egal ob ich versuche, diesen Code mit js oder jQuery einzufügen (entweder beim Laden der ursprünglichen Seite oder im Rückruf). Vielleicht ist das Rückruf-Bit irrelevant, aber deshalb füge ich es nicht einfach in die Code der Seite. 

Ich habe verschiedene Wege ausprobiert, aber das ist, was ich momentan habe (entschuldigen Sie die Schlamperei. Versuchen Sie mir gerade, mich hier durchzuschlagen!):

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

Die wirklich seltsame Sache ist, dass, wenn ich nur einen der Skript-Tags einsetze (es spielt keine Rolle, welcher), es nicht umgeleitet wird. Es leitet nur um, wenn ich versuche, beide einzufügen.

Ich habe auch versucht, den ersten Skript-Tag in den ursprünglichen Seitencode einzufügen (da er nirgendwo anruft, nur Variablen setzt) ​​und nur die Datei conversions.js eingefügt wird, und die Weiterleitung trotzdem durchgeführt wird.

Wenn es relevant ist, verwende ich Firefox 3.6.13 und habe den enthaltenen Code mit jQuery 1.3 und 1.5 ausprobiert (nachdem erkannt wurde, dass wir Version 1.3 verwenden).

Ich weiß, dass mir etwas fehlt! Irgendwelche Vorschläge? 

52
Kevin Pope

Wenn Sie jQuery auf Ihren Seiten verwenden, können Sie das Conversion-Tracking-Skript nach dem Festlegen der erforderlichen Variablen nicht mit der Methode getScript derselben Methode abfragen.

Das mache ich normalerweise, sobald ich eine success response von meinen AJAX - Aufrufen erhalten habe.

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" );

Das funktioniert gut für mich. Wenn Sie ein detaillierteres Beispiel wünschen:

$.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
});

Wenn Sie andere Bibliotheken wie Mootools oder Prototype verwenden, sind sie sicherlich mit ähnlichen integrierten Methoden ausgestattet. Diese AFAIK ist einer der saubersten Ansätze.

39

Heutzutage ist es praktisch, das asynchrone Tag unter http://www.googleadservices.com/pagead/conversion_async.js zu verwenden, das die Funktion window.google_trackConversion verfügbar macht.

Diese Funktion kann jederzeit verwendet werden. Zum Beispiel nach dem Absenden eines Formulars wie in Ihrem Fall.

Siehe https://developers.google.com/adwords-remarketing-tag/asynchronous/


Update 2018

Die Situation hat sich geändert und es scheint, dass Sie jetzt mehr Optionen mit den gtag.js haben: https://developers.google.com/adwords-remarketing-tag/

52
LeZuse

dieser einfache Code funktionierte für mich (die $ .getScript-Version nicht).

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

// Dies kümmert sich um jQuery. Code kann leicht für andere Javascript-Bibliotheken angepasst werden:

        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)

            })
        }

// und Sie würden es in Ihrem Skript für das Ereignis wie folgt aufrufen:

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

In Ihrem AdWords-Konto: Wenn Sie das Conversion-Tracking-Ereignis in "Klick" statt "Seite laden" ändern, erhalten Sie Code, mit dem eine Funktion erstellt wird. Es erstellt einen Ausschnitt wie folgt:

<!-- 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>

Dann rufen Sie in Ihrem Code einfach an: 

goog_report_conversion();

Oder für einen Link oder ein Bild klicken:

<a href="" onclick="goog_report_conversion();">click here</a>
4
webmaster_sean

Ich habe alle Möglichkeiten ausprobiert, um conversion.js manuell einzubinden, das Skript wurde geladen, aber es wurde nicht weiter ausgeführt, was wir im Skript benötigten.

Fügen Sie einfach Ihren Konvertierungscode in einem separaten HTML-Code ein und laden Sie ihn in einen iframe. 

Ich fand einen Code, um das unter http://www.benjaminkim.com/ zu tun, der gut zu funktionieren schien.

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.
};

dann rufen Sie einfach ppcconversion () auf, wo immer Sie es in der JS aufnehmen möchten.

1
CO4 Computing

Wie Sie gesehen haben, ruft das Google Conversion-Tag nur eine Neuzeichnung auf. Ich musste sicherstellen, dass es aufgerufen wurde, als ein Teil einer Seite neu gezeichnet wurde. (Aufgrund eines schlechten Website-Designs, das ich im Moment nicht beheben konnte.) Deshalb habe ich eine Funktion geschrieben, um von einem onClick-Ereignis aus aufzurufen.

Alles was Sie tun müssen, ist doConversion () aufzurufen.

Hier sind wir am Ende mit:

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

Da das Skript document.write verwendet, muss es neu geschrieben werden 

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

Siehe https://Gist.github.com/c7a316972128250d278c

1
adardesign

Nachdem ich alles versucht hatte, stellte der Link Funka ( http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event ) für mich zusammen. Wie er sagte, ist es unheimlich, document.write zu überschreiben, aber Es scheint, dass Sie das tun müssen, es sei denn, Sie können das Skript vor dem Laden der Seite laden.

1
Sabrina Leggett

Das funktioniert für mich:

window.google_trackConversion({
    google_conversion_id: 000000000, 
    conversion_label : "xxxxxxxxxxxx",
    google_remarketing_only: false,
    onload_callback : function(){
        //do something :)
    }
});
0
infinito84

Für alle, die noch nach einer guten Lösung suchen, unterstützt Google jetzt AJAX Conversions jetzt nativ über ihre Google Analytics-API.

Sie können dies tun, indem Sie in Google Analytics eine Ereignis-API aufrufen. Sie richten ein Analytics-Ereignis ein, verknüpfen es mit einem Ziel und importieren dieses Ziel dann als Conversion in AdWords. Es ist ein langwieriger Prozess, aber es ist eine saubere Lösung.

Check out Diese Seite für ein Tutorial 

0
Mark

Ich muss nur den Code (oder in unserem Fall ein Bild) zusammen mit der Meldung "Erfolg" im Rückruf zurückgeben.

Wenn ein Kontaktformular oder ein ausgefülltes und ausgefülltes Anmeldeformular eingereicht wird, veröffentlichen wir mit jQuery ein PHP-Skript und geben dann eine Dankesnachricht an ein div aus:

"$first_name, Vielen Dank, dass Sie weitere Informationen angefordert haben. Ein Mitarbeiter wird sich in Kürze mit Ihnen in Verbindung setzen."

... gefolgt von dem 1x1-Gif, das Google bietet.

Hier ist die 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]);

Und der 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"/>';

Möglicherweise müssen Sie ein "document.location.reload();" einfügen, wenn es nicht von google abgeholt wird

0
boblangdon