New versions of GAS Injector and Google Analytics Injector plugins

Today I got some time update two of my plugins regarding web analytics for WordPress sites. Both ”GAS Injector”, which add Google Analytics on Steroids functionality to your blog and Google Injector, which add regular Google Analytics functionality was updated with some new features and bug fixes.

GAS Injector version 1.3

GAS Injector got these new features:

  1. GAS Injector now use the GAS source version 1.11.0.
  2. I also added an option for adding more GAS hooks without the need of changing the plugin code.
  3. This version also got support for ”In Page Analytics” / ”Enhanced Link Attribution”.
  4. I removed the support for swedish translation of lables.
  5. Tested stability up to WordPress 3.8

 

Google Injector verson 1.1.1

A minor update with a bux fix and stability test:

  1. The plugin now exclude the visits from the Administrator. (bug fix)
  2. Tested stability up to WordPress 3.8

GAS Injector for WordPress plugin (ver 1.1.1)

GAS Injector WordPress plugin

Idag släppte jag en ny version av pluginet GAS Injector, version 1.1.1, som innehåller ett antal nya funktioner för mer valbarhet och anpassning samt språkstöd för svenska och engelska. Om du vill testa det så hittar du GAS Injector här: http://wordpress.org/extend/plugins/gas-injector/

Ny funktioner

I Google Analytics on Steroids finns det möjlightet att välja kategorietiketter om man inte vill använda de förvalda. Detta har jag möjliggjort i GAS Injector för respektive event tracking.

Jag har också gett användaren av pluginet möjligt välja bort händelsespårning för valfria typ. (ex: utgående länkar, formulär, video etc.)

GAS Injector WordPress plugin tracking options

En tredje funktion som nu finns är Debug-läge som man enkelt aktiverar med en checkbox. Kryssar man i den så kan men sedan via konsolen i exempelvis Chrome eller Firebug se vad som händer.

GAS Injector WordPress plugin debug mode

Siste men inte minst har det tillkommit en del hjälptexter och en förbättrad dokumentation.

Bloggar etiketter: , ,

Google Analytics on Steroids som plugin för WordPress

För dig som är intresserade av webbanalys och hur ditt innehåll används av dina besökare så skulle jag rekommendera att använda Google Analytics on Steroids (GAS). Förutom allt som du får ”out of the box” från Google Analytics vanliga skript, så får du även en uppsättning events som du kan hålla koll på för att få en bättre förståelse över hur användandet ser ut.

GAS-projektet som mitt plugin är baserat på finns på Github: https://github.com/CardinalPath/gas

GAS Injector – plugin för WordPress

GAS Injector är ett plugin för WordPress som låter dig enkelt installera Google Analytics on Steroids (GAS) på din WordPress blogg. Efter installationen klickar du bara på ”Inställningar/Settings” i menyn och fyller i din UA-XXXX-X kod som du hittar i ditt Google Analytics-konto samt den domän din blogg har så är du klar.

Pluginet hittar du här: http://wordpress.org/extend/plugins/gas-injector/

Alla min WordPress plugin hittar du här: http://wordpress.org/extend/plugins/search.php?q=hoyce&sort=

Den eventspårning som följer med är:

  • Klick på utgående länkar
    Varje gång någon klickar på en utgående länk, d.v.s. en länk som leder bort från din webbplats så ”försvinner besökaren”. Nu kan du se hur många som klickade på en länk som leder bort från din webbplats så att du får koll på hur stor del av besökarna som lämnade webbplatsen via de utgående länkarna och hur stor del som lämnade av andra skäl.
  • Interaktion i formulär
    När någon interagerar med dina formulär kan det vara värdefullt att se om och i så fall var de stannar upp och inte fullföljer ifyllnaden av formuläret. Det finns många exempel på att man förbättra genomströmningen genom att först inse var felet finns och sedan testa sig fram till succé. (Lär mer på: Webbformulär är dörren till din verksamhet från Axbom.se) Detta får du hjälp med av GAS.
  • Interaktion med video (Youtube och Vimeo)
    Vilka videofilmer tittar användarna på? Hur länge tittar de? Ser dem den viktigaste informationen? När pausar de? Svar på alla dessa frågor får man med GAS.
  • Klick på maillänkar
    Vilka maillänkar klickar besökarna på? Bra att veta när det gäller vilka kontaktkanaler som används.
  • Scrollning på sidor
    Hur långt ner läser/scrollar besökarna? Läser besökarna denna information som ligger längst ner? Svar på detta fås m.h.a. GAS

GAS event tracking i Google Analytics

Använd och få insikt du också!

Hoppas du får användning av detta plugin och därmed bättre koll på hur dina besökare interagerar med din webbplats och den information du delar med dig av.

Jag vill passa på att tacka de som utvecklar Google Analytics on Steroids (GAS), bra jobbat! 

Mvh // Niklas

Less CSS – drömmen för dig som implementerar webdesign

{less} CSS stötte jag på för fösta gången för ett par månader sedan då vi funderade över hur vi skulle lägga upp designarbetet  av www.kth.se (där jag arbetar till vardags) Less CSS är ett sk. dynamiskt stylesheet-språk som hjälper dig att strukturera upp din css-kod.

Fördelarna  

Det är inget snack om att less CSS hjälper dig att strukturera upp dina css-filer men det finns många andra fördelar också:

  • Nestlade regler
    Vi börjar med strukturen i alla fall eftersom den är så påtaglig. Att nestla sina regler skapar en lättöverskådlig och överblickbar kod som gör det enkelt att koda och underhålla.

    .bodyWrapper {
      padding: 0 @pageInset 0 0;
      clear: both;
    
      .bodyWrapper2 {
        float: right;
        overflow: hidden;
    
        #content {
          width: (@columnWidth * 3);
          padding-bottom: @spacing * 3;
    
          &.wide {
            width:100%;
            padding-bottom: @spacing *3;
          }
        }
      }
    }
  • Less-koden omvandlas sedan till förjande CSS:
    .bodyWrapper {
      padding:0 38px 0 0;
      clear:both;
    }
    
    .bodyWrapper .bodyWrapper2 {
      float:right;
      overflow:hidden;
    }
    
    .bodyWrapper .bodyWrapper2 #content {
      width:660px;
      padding-bottom:30px;
    }
    
    .bodyWrapper .bodyWrapper2 #content.wide {
      width:100%;
      padding-bottom:30px;
    }
  • Variabler
    Variabler är så klart ett bra tillskott till CSS då man enkelt kan specificera upp dem och ändra på ett ställe för hela siten. Variabler deklareras och används på följande sätt:

    @columnWidth: 220px;
    @blue: #1954a6;
    @tableBackgroundColor: @blue;
    @pageInset: 38px;
    @spacing: 10px;
  • Mixins
    Mixins är återanvändbara kodstycken som enkelt kan infogas där de ska användas. Det gör att du enkelt kan ändra på ett ställe och få det att slå igenom på alla ställen där det används samt att det gör dina filer betydligt mindre och strukturerade. Här kommer ett exempel:

    .centered {
      margin-bottom: 0;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
    }

    Sedan kan du enkelt använda detta mixin så här:

    .content {
      .centered;
    }
  • Ovanstående Less-kod omvandlas då till:
    .content {
      margin-bottom:0;
      margin-left:auto;
      margin-right:auto;
      margin-top:0;
    }
  • Funktioner och operationer
    Till sist har vi funktioner och operationer som gör att du kan bygga på ett steg till jämfört med mixins eftersom de blir mer dynamiska. Operationer gör att man enkelt kan återanvända variabler men genom att använda dessa som bas för exempelvis avstånd, storlekar etc. Funktionerna får så klart mer dynamik genom att du kan skicka med parametrar som du sedan använder.

    .linkArrow(@color: @linkArrowColor) {
      color: @color;
      font-size: @normalFont * 3;
    }

Nackdelarna 

Det finns så klart en del nackdelar också även om de inte är så betungande. Men det är klart att det är mindre komplext att bara skriva css rakt upp och ner i en .css fil än att behöva addera less.js eller installera någon av de kompilatorer som finns för bl.a. ruby, php, .net och Mac OS X.

Några saker att tänka på

Några generella/mjuka saker jag tycker man bör tänka på innan man sätter igång att implementera designen med less/css är:

  • Bestäm hur ni syntaxmässigt väljer att skriva er css-kod och håll er till det ni kommer fram till.
    Det finns många sätta att skriva less-kod på men det är viktigt för projektet att koden är konsekvent så att man effektiviserar arbetet med igenkänning när det finns flera personer i utvecklingsteamet.
  • Bestäm hur ni väljer att positionera era element m.h.a. margin och padding. En bra regel som har fungerat för oss är att ett givet element alltid får sin ”spacing” från det element det ligger i. Så om flera nyhetspuffar ligger i en lista så är det listan som bestämmer avståndet mellan nyheterna o.s.v.
  • Strukturera upp filerna och använd om det behövs, importfiler i större strukturer för mer överskådlighet.
    Exempel på detta kan vara:

     /css
         /mixins
                /table.less
                /headers.less
         /variables
                   /colors.less
                   /spacings.less
        standard.less

    Där standard.less är den fil som inkluderar alla de andra filerna och den fil som sedan kompileras till standard.css.
    standard.less skulle i detta fall kunna se ut så här:

    /* * * Import of .less files * * */
    
    @import "css/mixins/table.less";
    @import "css/mixins/headers.less";
    @import "css/mixins/colors.less";
    @import "css/mixins/spacings.less";

Jag skulle starkt rekommendera att testa less CSS, det tar inte lång tid att sätta upp för att prova och jag tror att du snart märker att det både går snabbare samt att du får en bättre överblick i den nya strukturen.

Kommentera gärna!Har du några tips eller andra tankar, erfarenheter etc? Skriv i så fall en kommentar och dela med dig av dina erfarenheter.

Bloggar etiketter: , , , , , ,

WordPress stickers från Matt Mullenweg – grundare av WordPress

Wordpress stickers

Det hela började med att jag surfade runt på nätet för att se vad det fanns för gadgets runt varumärket WordPress och hittade då en blogg där en kille hade en hel uppsjö av WordPress-klistermärken. Jag försökte då hitta en site där man kunde köpa sådana men kunde inte hitta någon. Jag gick då tillbaka till bloggen och hittade en kommentar som löd i stil med: -”Skicka ett mail till Mat Mullenweg och be att han skickar några klistermärken”.

För den som inte vet vem Matt Mullenweg (@photomatt) är så har han grundat WordPress (founding developer of WordPress) och företaget Automattic. Jag tänkte att jag har inget att förlora så jag skickade ett mail men trodde varken att jag skulle få ett svar eller några klistermärken med tanke på hur många järn i elden Matt har. En av anledningarna att jag intresserat mig för WordPress mer än någonsin under detta år är att jag har varit med och byggt en stor ”multiuser” instans och i den en hel del plugins. Jag har inte varit själv i detta och tyckte det skulle vara roligt att få dela med sig av lite schysta klistermärken i teamet jag jobbar med.

Men så idag kom de!

Idag på morgonen kom ett paket som såg ganska suspekt ut men det var adresserat till mig så jag öppnade det och till min förvåning och skratt drog jag ut en hel bunt med WordPress-klistermärken av all de slag.

Jag vill passa på att tacka och ge en eloge till Matt och hans gäng för att de tar sig tid och uppmuntrar de som använder deras plattform!

Bloggar etiketter: , ,

En prototyp av pissappen – den potentiella storsäljaren

När tröttheten slog till vid en kaffepaus under fredagen den 1 april så kom jag på en brilliant idé. Vi pratade om appar, iPads och annat mobilt som vi hade tagit med oss från Webbdagarna och då slog denna idé ner som en blixt från klar himmel.

De flesta och framför allt alla killar har väl sett gummiplattan som ligger i pissoaren. Den som har till syfte att få killar att pricka rätt när de urinerar på krogtoaletter. Genom att lägga plattan i pissoaren tycker killarna det är kul att försöka träffa mitt i och det får till följd att det blir mindre spill för krogpersonalen att ta rätt på när kvällen är slut.

Det var då som jag kom på den, idén om att man borde bygga pissappen, en potentiell storsäljare. Den som gör att tekniknördar får större användning av sin iPad än någon gång tidigare. Jag har inte hunnit utveckla den slutgiltiga appen än så länge men jag tänkte dela med mig av mina prototyper som jag har skissat och byggt ihop.

1 st iPad och plastfolie

Prototypmåltavlan är applicerad på iPad:en

Närbild på prototypmåltavlan

Under testfasen vill man kanske ha ett skydd i form av plastfolie

Med närmare eftertanke, nu när iPad2 rullas ut så skulle denna app vara den ultimata avslutningsappen man installerar och använder och sedan säger hej då till sin gamla iPad(1) platta.
Dessutom så har jag en vidareutveckling som kanske kan komma i version 2.0 av Pissappen eftersom iPad2 har inbyggd webbkamera. Med den skulle man kunna fota alla som är med och skapa en ”high score”-lista med foto 😉

 

Vad tror ni?

Bloggar etiketter: , ,

Det bästa från webbdagarna 2011

Webbdagarna som gick av stapel här i veckan var enligt mitt tycke en blandning av högt och lågt. Det låga bestod ofta i långa företagspresentationer och en orgie av siffror och procentsatser. Det fanns dock också en hel del otroligt inspirerande och intressefångande presentationer av duktiga talare. Här följer ”the best of the best” från Webbdagarna.

Morris Packer – från Morris Motorcycles

Jag blev så glad när denna man, Morris Packer kom upp scenen och bara ägde. Luta dig tillbaka och lyssna på denna resa från en tweet till… ja, titta och se.

Tre riktigt bra, roliga och inspirerande föreläsningar

Detta är tre bra föreläsningar av Sogetis Andreas Sjöström, Cybercoms Björn Elmberg och till sist galningarna från Creuna, Martin Deinoff och Fredrik Marcus
OBS: Spola fram till 28:30

Internet om fem år med Jocke Jardenberg, väl värd att se!

OBS: Spola fram till 1:12:48

Summa sumarum så var Webbdagarna bra men jag efterlyser mer djup, framför allt när man delar upp konferensen i olika spår. Det är också kul att se att konferensens arrangör, Internetworld tog publikens respons via Twitter på allvar.

Konverteringsspåret på Webbdagarna

Konverteringsspåret på Webbdagarna sänds nu live från http://jardenberg.se/live/

5 WordPress plugins du måste ha!

När jag installerar WordPress på en ny site så finns det fem plugins som jag alltid installerar direkt. För mig känns det nästan som att de ingår i WordPress-plattformen numera. Förutom dessa plugins är det en självklarhet att använda Akismet som följer med men detta måste aktiveras med sin API-nyckel först innan det kan användas.

WordPress Plugin

 

  1. WordPress.com Stats
    När man har skapat en ny site är det kul att se hur många besökare man har på enkelt sätt via sitt administrationsgränssnitt.
  2. Hotfix
    För inte så länge sedan släptes detta plugin som används för att snabbt komma till rätta med buggar i nya versioner av WordPress-plattformen. Hotfix pluginet uppdateras med buggfixar mellan releaserna av WordPress vilket göra att det är både enkelt och snabbt att hålla sin site säkrad och buggfri.
  3. All in One SEO Pack
    All in One SEO Pack är ett välanvänt plugin för att se till att få med de viktiga element som sökmotorerna vill ha på varje sida. Detta plugin hjälper dig som är redaktör att hålla ditt innehåll sökmotoroptimerat och därmed sökbart.
  4. Google Analytics Injector
    Om man vill koppla sitt Google Analytics-konto till sin WordPress blogg/site så kan man väldigt enkelt göra det med hjälp av Google Analytics Injector. Du skriver bara in din spårningskod (tracking code) och sen är det klart. Jag är väl kanske lite subjektiv eftersom jag har byggt detta plugin men det må så vara.
  5. Like
    När man bygger en site/blogg och förhoppningsvis vill förmedla något via den så finns det en hel del ”Share”-plugins som gör det enkelt att sprida sitt innehåll till andra sociala medier. Ett av dessa plugins som jag verkligen gillar  är Like. Like lägger till en Like/Gilla-knapp som visar hur många som har gillat sidan/inlägget. När besökaren klickar på den så publiceras denna ”Gilla” på besökarens egen aktivitetsström på Facebook.  (detta kräver att besökaren är inloggad i Facebook men vem är inte det :) )
Kommentera gärna!Har du några tips på bra plugins som du tycker man bör ha med i sin WordPress-installation, kommentera gärna och skriv några rader i så fall.

Bloggar etiketter: , , , , , , ,

WordPress, plugins & bättre koll på communityn

 

På senare tid har jag lagt ner en hel del energi på plattformen WordPress både i form av att utveckla plugins men också att i större utsträckning få koll på dess community. Förutom att ha ett intresse för det man gör när man ska lära sig något nytt område så tjänar man väldigt mycket tid och energi på att följa ”likasinnade” på Twitter, Facebook och andra sociala medier.

WordPress plugins

Jag brukar tidigt identifiera ett par nischade bloggar inom ämnet och dessa kommer självklart ofta från de personer man har hittat i de  sociala kanalerna.

Två egenutvecklade WordPress plugins och ett till på väg

När man sitter och utvecklar något som själv behöver så känner man så klart nyttan av det men känslan när även andra laddar ner och får användning av det man har gjort känns ännu bättre.

Att vara med och bidra är helt enkelt en drivkraft i sig!

De två plugins som jag nu har gjort är:

…och det plugin som jag håller på att bygga tillsammans med, Patric Jansson och Peter Reuterås är ett plugin för att extrahera sin ”Star Craft II”-profil från Battle.net till sin blogg. Detta plugin är så klart ett ”just for fun plugin” men jag tror det skulle kunna få bra spridning då det är många som har bloggar i samband med sitt spelande.

Kommentera gärna!Har du några tips på bra plugins som man skulle kunna bygga och dela med sig av, kommentera gärna och skriv några rader i så fall.

Bloggar etiketter: , , , , , ,