Webform in Lightbox tonen op basis van zoekwoorden in Google

Door Donny op di, 06/07/2010 - 19:55

Al geruime tijd merk ik via Google Analytics dat er geregeld wat bezoekers op deze site langs door in Google of andere zoekmachines te hebben gezocht op de trefwoorden: "Carette" of "Donny".

Nu ben ik wat nieuwsgierig van aard en vraag ik me altijd af wat juist de reden is waarom men op zoek was naar mij.

Deze bezoekers zullen voortaan dus bij aankomt een Lightbox op hun scherm krijgen met een formulier waar ik hen deze vraag kan stellen :-)

Formulier in Lightbox op basis van trefwoorden in Google

Probeer het gerust zelf uit door in Google gebruik te maken van de trefwoorden: "Donny" of  "Carette" of beide.

Door volgende stappen te ondernemen kan je dit ook doen op je Drupal website:

  • Download en installeer de Lightbox module
  • Download en installeer de Webform module (Ik heb de laatste Dev versie geïnstalleerd)
  • Maak met de webform module het gewenste formulier aan.
  • Nu gaan we eerste de page.tpl.php aanpassen zodat er word gecontroleerd of de bezoeker via een zoekmachine is gekomen en zoja op welke trefwoorden hij daar gezocht heeft.
    (Het originele script heb ik gevonden op: digitalpoint)
    Volgend stukje PHP voegen we ergens bovenaan onze page.tpl toe:
    <?php
    // Keywords van zoekmachines ophalen
    $referrer = $_SERVER['HTTP_REFERER'];
    if(preg_match("/[\.\/](google|yahoo|bing|geegain|mywebsearch|ask|alltheweb)\.[a-z\.]{2,5}[\/]/i",$referrer,$search_engine)){
      $referrer_query = parse_url($referrer);
      $referrer_query = $referrer_query["query"];
      $q = "[q|p]";
      preg_match("/".$q."=(.*?)&/",$referrer,$keyword);
      
      // Keywords in een array steken om ze nadien te kunnen doorzoeken met in_array
      // Keywords naar lowercase zetten
      $keywords = explode(" ", strtolower(urldecode($keyword[1])));
    }
    ?>
  • De trefwoorden worden nu opgeslagen in de array $keywords.
  • Nu gaan we link in de pagina plaatsen die we gaan gebruiken om de Lightbox op te roepen.
    Voeg volgende link toe ergens in de body van je page.tpl.php, zelf heb ik hem geplaatst net achter het openen van de body tag. Aangezien we deze een display: none meegeven is hij toch niet zichtbaar.
    Vervang de node id 118 door de node id van jouw webformulier of de node die je wilt tonen in de Lightbox.
    <a href="node/118?format=simple" rel="lightframe[group|width:800px;][&nbsp;]" id="formpopup" title="contact" style="display: none;"></a>
  • Via de link kan je verschillende extra parameters meegeven zoals bv de hoogte, breedte van de Lightbox.
  • Zoals je kan zien heb ik ?format=simple toegevoegd aan de link. Indien we gewoon de node id zouden oproepen word er in onze Lightbox ook de rest van de site mee getoond, zoals bv alle blokken, menu's en andere opmaak.
    Om dit te vermijden gaan we een extra template bestand aanmaken dat we enkel gebruiken voor ons formulier.
    Maak een nieuw bestand in je template map aan, namelijk: simple.tpl.php
    Je kan hier een kopie van je page.tpl voor gebruiken en dan zelf bepalen wat je in de Lightbox wilt tonen.
  • Om dit extra template bestand nu op te roepen moeten er 2 zaken gebeuren:
    • ?format=simple aan je url voor de Lightbox toevoegen wat we dus al gedaan hebben
    • Onderstaand stukje PHP code ook in onze page.tpl toevoegen. Dit dien je helemaal bovenaan de pagina in te geven:
      <?php
      // Speciale page.tpl voor lightbox
      if ($_GET["format"] == "simple") {
        include ('simple.tpl.php');
        return;
      }
      ?>
    • Meer hierover kan je terugvinden op drupal.org
  • Als volgt gaan we de link aanroepen bij het laden van de pagina en de trefwoorden op geven, dit kunnen we doen door onderstaand stukje jQuery en PHP toe te voegen in het <head> gedeelte van onze page.tpl
    Zoals je kan zien doorzoek ik de array op "donny" en "carette". Indien één of beide van deze trefwoorden voorkomen zal via jQuery de Lightbox worden opgeroepen.

    <?php
    if(isset($keywords)) {
      // Doorzoek de trefwoorden
      if(in_array("donny", $keywords) || in_array("carette", $keywords)){
      ?>
      <script type="text/javascript">
        // <![CDATA[
        if (Drupal.jsEnabled) {
          $(document).ready(function () {
          $('#formpopup').triggerHandler("click");
        });
      }
      // ]]>
      </script>
      <?php
      }
    }
    ?>
  • We kunnen nu ook een bevestigingsboodschap achterlaten in het formulier. Maar dit zal weer terug getoond worden in de volledige layout van de website inclusief de blokken en menu's.
    Om dit op te lossen geven we als Redirect URL het volgende op zodat ook hier het extra template bestand word aanroepen:
    node/118?format=simple
Labels: 
Drupal
Lightbox
Google
Webform

2 comments

12
Okt

Door Joke (niet gecontroleerd) op di, 12/10/2010 - 09:46
afbeelding van Joke

Echt wel een leuk idee om meer zicht te krijgen over de zoekwoorden volgens google analytics. En wat is de bouncepercentage op die woorden "Donny" of "Carette"? Dan kan je weten of ze werkelijk naar jouw website aan het zoeken waren of niet :-)

#173
12
Okt

Door Donny op di, 12/10/2010 - 10:06
afbeelding van Donny

Thanks Joke, het bounce percentage voor deze trefwoorden ligt rond de 3%. De meeste bezoekers (info via formulier inzendingen) waren dus ooit op deze site langs geweest maar wisten de juiste domeinnaam niet meer en kwamen zo hier terug terecht.

Dit was eerder een probeersel (Voor een Drupal module die nog in mijn hoofd zit) en natuurlijk ook omdat ik erg nieuwsgierig was :-)

#176

Reactie toevoegen