Inom en webbutik i OpenCart kan banners visas i många former. De kan visas som en statisk bild, en karusell eller ett bildspel. Varje banner kan innehålla en eller flera bilder och den här gruppen av bilder kan tilldelas olika moduler beroende på storlek och funktion de arbetar.
När du vill placera en banner på din hemsida, lägger du först upp bilder till banners och tilldelar sedan dessa banderoller med att visa moduler.
I instrumentpanelen i OpenCart, navigera till System> Design> Banderoller. Låt oss sätta in vår första banner, lägga till ett namn på det och ställa in dess status. Nu har vi precis skapat en grupp för de bilder vi ska ladda upp.
Låt oss börja lägga till bilder genom att klicka på Lägg till banner knapp. Som vi ser kan vi lägga till en titel för varje webbshopspråk, kopiera eller skriva din länk och bläddra eller ladda upp bildfilen (JPG, PNG eller GIF). Vi kan tilldela så många bannerbilder som vi vill, men alla bilder ska ha samma storlek eller åtminstone förhållandet, eftersom dessa bilder kommer att växla eller glida inuti en banderollsmodul. (Bannerns namngivningskonvention kan vara förvirrande eftersom systemet använder termen baner för en uppsättning av banderollbilder och användningar baner för bild själv också.)
Ladda upp bilder för banners i OpenCart (Admin> System> Design> Banners)Som vi lärde oss ovan visas banners med moduler i OpenCart. Det finns tre vanliga moduler för att visa banners: Banderollmodul, Carousel och Bildspel. Alla har liknande funktioner: de animerar bilder i samma storlek och låter användaren klicka på dem.
en Banderollmodul visar banderoller genom blekning bannerbilder på ett ställe varje efter varje. Om du vill tilldela en banner till en banner platshållarmodul, Navigera till Extensions> Moduler> Banner> Redigera.
Klick Lägg till modul och det här låter oss anropa banners i en layout. Du måste välja vilken banner som ska visas, definiera Dimensionera, plocka a Layout var att visa, a Kolumnposition, ställa in Status och den Modulens ordning. Modulens storlek ska vara så att den passar in i kolumn det kommer att placeras. Systemet omvandlar de uppladdade bilderna enligt denna dimension. layouter är fördefinierade och deras namn är beskrivande. Placera kan ställas in vänster, höger, övre eller nedre (se detaljer om layoutpositioner här). Ordning definierar utbudet av visuellt utseende av fler moduler i en kolumn.
En banner kan endast tilldelas en modul när bannern redan är skapad.De Bildspelsmodul visar banner bilder som ett rörligt bildspel animering. Denna modul visas generellt på hemsidan med större landskapsbilder. Huvudparametrarna i denna modul - som typ av animering, hastighet eller dess utseende - definieras i temafilen, som vi inte behöver modifiera, eftersom vi använder den förinställda modulen.
Vi kan tilldela en redan satt och uppladdad banner till ett bildspel genom att gå till Utvidgningar> Moduler> Bildspel> Redigera. När vi lägger till en modul måste vi göra liknande inställningar som vi gjorde i banderollsmodulen ovan. Välj en banner att visa, lägg till dess storlek, plocka a layout och placera, ställa in status och den ordning. Se illustrationen nedan.
För att få den bästa visuella upplevelsen borde storleken på bannerbilderna tidigare laddade vara lika stor som modulen ska användas.De karusellmodul låter dig visa en uppsättning mindre bannerbilder bredvid varandra och animera dem att visa och gömma dem steg för steg medan de rör sig horisontellt.
Vi kan ställa in den här modulen på samma sätt som vi lagt till en banderoll till ett bildspel, även om en karusellmodul accepterar två saker:
Dessa bannermoduler är mycket användbara och inte många e-handelslösningar har dem som en del av kärnan, men de har begränsade förmågor t.ex. Du kan inte se antalet klick på banners. Om vi vill mäta klick kan vi använda Google Analytics för det (med tanke på att du redan har installerat spårningskoden).
Att klicka på en banner som omdirigerar till en sida på samma webbplats är en händelse i Google Analytics-termen. Det är därför vi använder händelsespårning funktionen i Google Analytics för att mäta klick på bannerbanners på webbplatsen i OpenCart. Här är ett exempel HTML för implementering av händelsespårning:
En händelse inträffar när en användare klickar på något. Händelsen spåras av _trackEvent ()
metod som innehåller följande information: kategori - grupp av objekt vi vill spåra (t ex bildspel), verkan - Typ av användarinteraktion (t.ex. banerklick), märka - en valfri sträng för ytterligare data, värde - valfri numerisk data för åtgärden. Som du kan se, hjälper en enkel rad med HTML-modifiering att spåra våra bannerklick.
Banderoll, bildspel och karusellmoduler har egna mallar i det använda tematets katalog. Vi behöver bara ändra några rader i modulmallfiler. Det här är vad vi behöver lägga till i taggar i mallfilerna:
onClick = "_ gaq.push (['_ trackEvent', 'banner type', 'Clicked', '']);"
För banners, hitta denna eller liknande kod i ditt tema din temamapp \ mall \ modul \ banner.tpl
fil:
">
och ersätt med detta:
"onClick =" _ gaq.push (['_ trackEvent', 'Banners', 'Clicked', '']); ">
Som du kan se lägger vi till banners som den kategori komponent, klickade som den verkan, och den unslashed version av banderaltitel som märka. Vi behövde inte välja ett värde, eftersom det är ett och i vårt fall det är vad vi behöver.
Bildspelsmallen, som finns på din temakatalog \ template \ module \ slideshow.tpl
, bör ändras från detta:
">
till detta:
"onClick =" _ gaq.push (['_ trackEvent', 'Slideshow', 'Clicked', '']); ">
Karusellmallen finns på din temakatalog \ mall \ modul \ carousel.tpl
och dessa linjer måste ändras från detta:
till detta:
Resultaten av klick kan ses om du går till Google Analytics och går till Beteende avsnitt> evenemang Översikt. Där ser vi kategorin (i vårt fall typ av banner), antalet klick och namnet på bannern.
Vi lärde oss att vi först måste ladda upp banderollbilderna till banner (grupp) s så att vi senare kan tilldela dem en bildmodul, som banner, bildspel eller karusell. Senare ändrade vi modulmallfilerna för att spåra klickhändelser med Google Analytics.
Om du har frågor, fråga dem i diskussionsområdet nedan.