Contact Form 7 & AdWords Conversion Tracking

Uit De Vliegende Brigade
Ga naar: navigatie, zoeken

Zie ook Contact Form 7 & Analytics Conversion Tracking.

Let op

Sinds de zomer van 2017 werkt AdWords Conversion Tracking eigenlijk niet meer. Gebruik daarom Analytics Conversion Tracking. Dit artikel is daarom niet meer actueel

Het probleem

Standaard gebruikt Contact Form 7 een AJAX-object om een dankjewel-boodschap weer te geven. Je hebt dus geen 'traditionele' dankjewel-pagina waar je een AdWords Conversion Tracking-snippet kunt plaatsen. Hoe lost je dit op?

Potentiële oplossingen

  1. Snippet incorporeren in thank-you-message (werkt niet meer): Incorporeer de conversion-tag (of het noscript-gedeelte) in het dankjewel-tekstveld. Dat scheen te werken in oudere versies, maar nu niet meer [1], in deze video rond 2:00
  2. on_sent_ok: Tot 2016/2017 leek dit de standaard-oplossing te zijn: Incorporeer de tracking-functie in de body van het formulier, en specificeer onder Additional Settings een on_send_ok-event waarin deze functie wordt aangeroepen. Om een of andere reden is deze functionaliteit uitgefaseerd door de fabrikant van Contact Form 7. Eind 2017 werkt het wel, maar de plugin klaagt steeds dat het een fout is. Zie de casus hieronder voor details.
  3. Hook: Voor Analytics kun je de betreffende functie aanroepen ahv. de juiste hook. Dat werkt vermoedelijk niet voor AdWords [2][3]
  4. Aparte dankjewel-pagina: Je kunt desgewenst een aparte dankjewel-pagina specificeren [4]. Dit wordt afgeraden maar belangrijker nog: Je kunt niet zomaar per formulier een aparte dankjewel-pagina specificeren. Dat maakt dit op z'n best een halve oplossing
  5. Gebruik Analytics Conversion Tracking: Lijkt een goede oplossing te zijn, maar is het mogelijk niet: Je kunt niet op een gemakkelijke manier verschillende formulieren tracken
  6. Gebruik een andere formulier-plugin: Vermits ik dat zelf kan bepalen, is dit de beste oplossing die ik ken. Contact Form 7 is niet meer van deze tijd.

on_sent_ok-oplossing (casus zomer 2017)

Deze implementatie is een tweetrapsraket:

  • De functies uit de snippet is ondergebracht in de body van het formulier
  • De aanroep van de hoofdfunctie, is ondergebracht in het Additional Settings-veld van het formulier.

Deze implementatie is gebaseerd op optie 2 uit deze handleiding. Bij het aanmaken van de conversion snippet, kun je in AdWords inderdaad kiezen tussen Page load en Click. Zoals al eerder aangegeven, wordt deze functionaliteit verwijderd uit Contact Form 7.

Formuliercode

Formuliercode op een WordPress-site
<div class="col span_6">

<p>Wie können wir Ihnen weiterhelfen?<br />
    [textarea* your-message] </p>

<p>Optional können Sie eine Datei anhängen.
[file file-255 limit:8mb filetypes:pdf|jpg|jpeg|zip|png|doc|docx|xls|xlsx|txt|rtf|otf|ptt|pttx id:bestand]</p>

</div>

<div class="col span_6 col_last">

<p>Ihr Name<br />
    [text* your-name] </p>

<p>Ihre Emailadresse <br />
    [email* your-email] </p>

<p>Ihre Telefonnummer<br />
    [text* Telefoon]</p>

</div>

<div class="col span_12">

<p style="margin-top:25px;">[submit "Nachricht senden"]</p>

<!-- Google Code for Ingevuld formulier landing page 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 = XXXXXXXXX;
    w.google_conversion_label = "XXXXXXXXXXXXXXXXXXX";
    w.google_remarketing_only = false;
  }

  // DEZE FUNCTIE AANROEPEN ON_SENT_OK

  goog_report_conversion = function(url) {
    goog_snippet_vars();
    window.google_conversion_format = "3";
    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>

</div>

Additional Settings

Deze code is ingevoerd onder Additional Settings:

on_sent_ok: "typeof goog_report_conversion === 'function' && goog_report_conversion();"

Werking

Dit betreft de pagina met het formulier. De truuk is, dat de snippet altijd aanwezig is op het formulier. Het wordt alleen niet altijd geëxecuteerd. Dat kun je in de broncode van zo'n formulierpagina zien, maar je kunt het ook zoals hier zien, mbv. Google Tag Assistant. Je kunt aan de mededeling No HTTP Response... aflezen dat de code wel gevonden is, maar niet uitgevoerd wordt
Op het moment dat een bezoeker het formulier succesvol verstuurt, wordt de code onder Additional Settings uitgevoerd. Deze bevat de aanroep van de hoofdfunctie van het snippet. De No Response-melding is nu verdwenen, en de snippet is geëxecuteerd
Het werkt

Meldingen Google Tag Assistant

De meldingen van Google Tag Assistant in detail:

No HTTP response detected

Het staat er in grijs, maar is ongeveer de essentie: De code staat op de pagina, maar wordt niet uitgevoerd.

Missing CDATA comments

Dit is wat Mike Martel van Keetrax.com ervan zegt:

It’s true that due to the way WordPress formats the code, the CDATA comments become invalid.
Google Tag Assistant will notify you of this. However, this shouldn’t prevent the AdWords
code from working.

Conversion Value: not set

In moderne versies van de AdWords-snippet, wordt deze waarde niet vermeld. Ik vermoed dat Tag Assistant wat dat betreft achterloopt.

Code should be placed directly above the closing body-tag

Inderdaad: In de ideale wereld is er een betere plek voor deze tag. Het is niet anders - En het beïnvloed de werking enkel in nogal theoretische omstandigheden.

on_sent_ok-oplossing + 2 formulieren (casus winter 2017)

Zelfde situatie als hiervoor, maar nu voor een andere site, met twee formulieren. Lukt het om beide formulieren los van elkaar te tracken?

Details:

  • Twee formuleren: Contactformulier KG en Contactforumulier KG Amsterdam
  • Bijbehorende conversion-labels: epkCCLre_... en I1QaCP_...
  • Bij beide on_sent_ok-events wordt dezelfde code uitgevoerd: on_sent_ok: "typeof goog_report_conversion === 'function' && goog_report_conversion();" - Gaat dat ok?

Bronnen