Om de wensen in te kunnen passen in de huidige workflow hebben we eerste de huidige workflow in kaart gebracht. Het voordeel is dat het daarna erg makkelijk is aan te wijzen, zowel voor de klant als voor de developers, waar wat gewijzigd moet worden om tot het beoogde resultaat te realiseren. Overigens heb ik eerst nog gezocht naar een uitwerking van een diagram. Deze heb ik niet kunnen vinden. Daarom deel ik mijn versie hier, wellicht dat er iemand wat aan heeft. Overigens is het een concept versie. Dus er kunnen dingen verkeerd of onvolledig zijn.

Wilt u maatwerk aanpassingen aan de workflow van uw Magento webshop? Neem dan contact met ons op.

Als je een test maakt in GWO dan krijg je een aantal codes die je moet gebruiken in de webshop. Normaal gesproken zou je dit allemaal automatisch moeten kunnen installeren. Maar tegenwoordig werkt dat blijkbaar niet meer. Dit moet dus handmatig. Welke code waar thuis hoor was voor mij niet zo duidelijk, maar na wat testen heb ik het uit kunnen vogelen. Op de eerste regel van de code de je krijgt van Google staat een regel commentaar wat je al aardig opweg helpt. De volgende code moet namelijk in de invoer veld van “Controle Script”.

<!-- Google Website Optimizer Control Script -->

Vervolgens heb je twee verschillende code’s die dezelfde eerste regel hebben, dat ziet er zo uit.

  <!-- Google Website Optimizer Tracking Script -->

Ze zijn echter wel verschillend. Er staat namelijk ergens in het midden in hint waarmee je weet waar de codes thuishoren. Het gaat om de volgende twee regels die dus elk in de verschillende stukken code zitten.

_gaq.push(['gwo._trackPageview', '/0123456789/test']);

_gaq.push(['gwo._trackPageview', '/0987654321/goal']);

Let op de  woorden “test” en “goal”. Nu kan waarschijnlijk al raden welke waar ze horen. De “test” code moet in het veld van “Volg Script” de “goal” code moet vervolgens in het veld “conversie script”. That’s it.

Nadat je dit hebt gedaan kan je beginnen met testen. En natuurlijk het leukste gedeelte, de resultaten afwachten. Vergeet niet lang genoeg te wachten, dus totdat er een significante winnaar is gekozen door GWO. Als je dit niet doet kan je hele verkeerde resultaten krijgen en kan alles averechts werken.

Is het opzetten van een test nog steeds te lastig? Wij kunnen altijd advies geven of het compleet uit handen nemen. Neem daarvoor vrijblijvend contact met ons op.

Een andere mogelijkheid is om dit met Visual Website Optimizer te doen. Je kan hiermee nog makkelijker testen door gewoon onderdelen aan te klikken en bijvoorbeeld te verplaatsen. Dit werkt erg handig. Binnenkort waarschijnlijk meer hierover.

Stap 1: Maak en PNG bestand van exact 57×57 pixels en noem deze “apple-touch-icon.png”.

Stap 2: Upload het naar de root of een andere directory op de server.

Stap 3: Voeg het volgende element toe in de tag van de website.

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

Om vervolgens te testen hoe dit er uit ziet ga je naar safari en open je de website. Kies vervolgens voor meer opties, en kies voor “Zet in beginscherm”. Er zal nu een bookmark gemaakt worden in de homescreen van je device met het logo die je zelf hebt gemaakt. Je krijgt gratis een Apple glans over je logo. Dat ziet er dan bijvoorbeeld zo uit.

Om een bepaalde pagina via SSL te beveiligen moet de config.xml bestand van de betreffende module aangepast worden. Voor de contact pagina zou dat het volgende betekenen. Deze aanpassing zou moeten zorgen dat de verbinding beveiligd is.

<config>
    <frontend>
	<secure_url>
	  <contacts>/contacts</contacts>
	</secure_url>
    </frontend>
</config>

Voor de shopping cart ziet het er als volgt uit.

<config>
    <frontend>
	<secure_url>
	  <checkout_cart>/checkout/cart</checkout_cart>
	</secure_url>
    </frontend>
</config>

Om het netjes te doen is het beter om dit soort kleine wijzigen onder te brengen in een “project module”. Alle kleine aanpassingen die zo klein zijn dat ze niet een eigen module hebben kunnen hierin ondergebracht worden. Zo wordt de core niet aangepast en de module is eventueel te hergebruiken voor andere projecten.

Maak de twee bestanden aan met de volgende inhoud op de juiste locatie.

<?xml version="1.0"?>
<config>
    <modules>
        <Aquivemedia_Sslpages>
            <active>true</active>
            <codePool>local</codePool>
        </Aquivemedia_Sslpages>
    </modules>
</config>

<?xml version="1.0"?>
<config>
    <modules>
        <Aquivemedia_Sslpages>
            <version>0.1.0</version>
        </Aquivemedia_Sslpages>
    </modules>
    <frontend>
	<secure_url>
	    <checkout_cart>/checkout/cart</checkout_cart>
            <contacts>/contact</contacts>
	</secure_url>
    </frontend>
</config>

Om te controleren of Magento de module/bestanden goed ingeladen heeft kan je via de backend naar “Systeem > Configuratie > Geavanceerd” gaan. Als het goed geladen is staat de module in de lijst. Vergeet niet ook de cache te legen.

Binnenkort zal er een concrete opdracht/vacature verschijnen op Noorderhaven31.nl. Dat is de site van het verzamelkantoor waar we gevestigd zijn. Mocht je uit eigen initiatief geintereseerd zijn stuur dan even een mailtje of kom even langs.

Om een module te downloaden ga je als volgt te werk. Zoek de extensie op in Magento Connect die je wilt downloaden. En haal de “extension key” op. Gebruik niet de extension key knop op de hoofdpagina, maar ga eerst naar het tabblad releases, en pak de nieuwste versie. Deze zou je normaal gesproken gebruiken in de Magento Connect Manager. Gebruik dan de volgende url om de module te downloaden.

http://connect.magentocommerce.com/community/get/[naam_van_de_module].tgz

Vervang [naam_van_de_module] door het deel van de extension key wat achter de slash staat. Dus bij de volgende extension key: magento-community/magento_classic_theme_free-1.4.1.2 zou de url er als volgt uitzien.

http://connect.magentocommerce.com/community/get/magento_classic_theme_free-1.4.1.2.tgz

Plak vervolgens de url in de browser om de module te downloaden. Mocht je er niet uitkomen wat de url betreft laat dan even een reactie achter. Als het wel lukt kan je met Winrar is dit archief vervolgens uit te pakken.

Installatie van een dergelijke module is niet altijd erg straigtforward. In het bestand package.xml staat waar elk bestand hoort te staan. Dit is erg cryptisch en soms zelfs verwarrend. De planning is dat ik hierover later een artikel ga schrijven.

Hoe werkt het?

• Maak twee verschillende landingspagina’s
• Maak twee exact dezelfde advertenties in adwords
• Gebruik bij de bestemmings-URL van de beide advertenties de verschillende landingspagina URL’s
• Ga naar de instelling van je campagne en verander onder “Voorkeurspositie, weergavesnelheid (geavanceerd)”  de soort weergave naar “Standaard: advertenties gelijkmatig weergeven”

Adwords zorgt er nu voor dat in deze advertentiegroep ongeveer de helft van alle bezoekers naar iedere landingspagina wordt gestuurd. Nu is het een kwestie van de conversiepercentage’s van de verschillende advertenties in de gaten te houden. Ik beoordeel zelf de conversie pas  na een significant aantal bezoekers of conversies. Hoeveel dit is hangt af van veel factoren. In mijn geval was dit na een aantal dagen na 25 conversies.

Ook kan ik direct de uitkomst van mijn test verklappen. Des te simpeler de landingspagina was. Des te beter werd de conversie. Simpler in mijn geval was minder informatie text en minder menu knoppen.

Na een zoektocht via Google kwam ik verschillende oplossingen tegen. Je kan zelf de Magento functionaliteit uitbreiden door rechtstreeks de database aan te passen. Maar er zijn betere oplossingen. Op een franse blog kwam ik een oplossing tegen voor het maken van een mini-module. Ik zal voor het gemak de gebruikte namen hetzelfde laten.

Maak de volgende bestanden aan:

app/code/local/Magentix/CategoriesAttributes/etc/config.xml
app/code/local/Magentix/CategoriesAttributes/sql/categoriesattributes_setup/mysql4-install-0.1.0.php
app/etc/modules/Magentix_CategoriesAttributes.xml

De inhoud van config.xml

<?xml version="1.0"?>
<config>
   <modules>
      <Magentix_CategoriesAttributes>
         <version>0.1.0</version>
      </Magentix_CategoriesAttributes>
   </modules>
   <global>
      <resources>
         <categoriesattributes_setup>
            <setup>
               <module>Magentix_CategoriesAttributes</module>
               <class>Mage_Catalog_Model_Resource_Eav_Mysql4_Setup</class>
            </setup>
            <connection>
               <use>core_setup</use>
            </connection>
         </categoriesattributes_setup>
      </resources>
   </global>
</config>

De inhoud vanmysql4-install-0.1.0.php

<?php
 
$installer = $this;
 
$installer->startSetup();
 
$installer->addAttribute('catalog_category', 'category_title', array(
                        'type'              => 'text',
                        'backend'           => '',
                        'frontend'          => '',
                        'label'             => 'Category Title',
                        'input'             => 'text',
                        'class'             => '',
                        'source'            => '',
                        'global'            => 0,
                        'visible'           => 1,
                        'required'          => 0,
                        'user_defined'      => 0,
                        'default'           => '',
                        'searchable'        => 0,
                        'filterable'        => 0,
                        'comparable'        => 0,
                        'visible_on_front'  => 0,
                        'unique'            => 0,
                        'position'          => 1,
                    ));
 
$installer->endSetup();

De inhoud van Magentix_CategoriesAttributes.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Magentix_CategoriesAttributes>
            <active>true</active>
            <codePool>local</codePool>
        </Magentix_CategoriesAttributes>
    </modules>
</config>

Nadat je dit hebt gedaan kan je inloggen in de magento backend, en de cache legen als deze aanstaat. Er zijn nu een aantal records toegevoegd aan de database wat zorgt dat er een nieuwe veld bij gekomen is bij de categorie beheer pagina.

Dit veld kan nu ingevuld worden. Om er ook nog wat aan te hebben moet er natuurlijk ook iets aan de frontend kant iets gebeuren. Open nu het volgende bestand:

/app/design/frontend/default//template/catelog/category/view.phtml

Als deze niet bestaat maak deze dan aan, en haal de inhoud of het bestand zelf van de volgende locatie:

/app/design/frontend/base/default/template/catelog/category/view.phtml

Verwijder de volgende regel:

 <h1><?php echo $_helper->categoryAttribute($_category, $_category->getName(), 'name') ?></h1>

En vervang het door het volgende:

<?php if($_category->getShortDescription()) : ?>
        <h1><?php echo $_category->getShortDescription(); ?></h1>
<?php else: ?>
    	<h1><?php echo $_helper->categoryAttribute($_category, $_category->getName(), 'name') ?></h1>
<?php endif; ?>

Als er niets is ingevoerd in het nieuw aangemaakte veld in de backend veranderd er niets. Als er wel iets ingevuld is verschijnt dit in de H1 tag boven de categorie. Meer duidelijkheid voor de bezoekers en goed voor SEO. Twee vliegen in één klap. Test dit natuurlijk altijd op een test server voordat je het toepast op een productie server.

Het is opzich makkelijk te integreren in een template door de volgende code in de “loop” te plakken.

<?php
echo '<a href="http://www.bloglovin.com/like/?b=' .get_bloginfo('wpurl') . '&#038;p=' . get_permalink() . '&#038;t=' . get_the_title() . '" onclick=\'window.open(this.href,&quot;bloglovin_like&quot;,&quot;height=320,width=480,toolbar=0,location=0,menubar=0,scrollbars=0,status=0&quot;); return false;\'--><img style="margin: 10px 0 10px 0; border: 0; padding: 0;" src="http://www.bloglovin.com/widget/bilder/like.gif" alt="" />';
?>

Maar de voor niet-techneuten kan dit nog wel eens lastig worden. Daarom heb ik een Bloglovin like button plugin geschreven voor WordPress. Na het downloaden en installeren is het mogelijk om in blog berichten en/of pagina’s de button weer te geven.

Direct downloaden

De plugin kan je downloaden hier download: Bloglovin like button plugin for WordPress. Installeer het door het uit te pakken en up te loaden naar de “/wp-content/plugins/” map. Verdere instructies staat in de readme.txt bestand.