Czego dowiesz się z tego poradnika:
- co to jest lokowanie produktu;
- co wpływa na skuteczność lokowania;
- jak lokować produkt w artykule bloga;
- jakie są dobre praktyki lokowania produktu na blogu.
Krótko o lokowaniu produktu
Każdy z was na pewno spotkał się ze strategią marketingową zwaną lokowaniem produktu. W skrócie ta strategia polega na wykorzystaniu ogólnodostępnego dla konsumentów medium (film, telewizja, książka, vlog, blog), aby za jego pomocą pokazać produkt w przyjaznym kontekście.
Skuteczność takiej strategii zależy w dużym stopniu od popularności materiału, w który został wpleciony produkt. Zauważ, że w przypadku takich działań to nie produkt jest najważniejszy w oczach klienta, ponieważ nie jego pierwotnie szukał. Jego ścieżka zaczyna się w momencie kiedy szuka rozrywki, informacji lub porad i to jest dla niego w tym momencie najważniejsze. Z tego powodu osadzenie produktu musi być subtelne a wykorzystane medium – wartościowe i interesujące.
Decydując się na zastosowanie lokowania produktu, musisz zatem dążyć do uzyskania efektu przyjaciela, który w rozmowie przy kawie wspomni krótko o czymś, co sam z doświadczenia poleca.
W kontekście twojego sklepu najlepszym medium na lokowanie produktu będzie blog. Za jego pomocą możesz budować bazę wiedzy dotyczącą twojej branży. Najważniejsze jest to, aby twoje wpisy były wartościowe dla odwiedzających, ponieważ teraz walczysz o tych, którzy szukają darmowych porad lub informacji, a nie konkretnych produktów. Decydując się na lokowanie produktu, na początku skup się na stworzeniu tekstów, które przyciągną jak najwięcej użytkowników internetu. W dalszej części poradnika przekonasz się, że samo lokowanie nie jest wcale takie trudne.
Im więcej ludzi znajdzie i przeczyta twoje porady, tym więcej osób może zainteresować się produktami, o których przy okazji napisałeś na blogu.
Czego potrzebujesz
Na tym etapie zakładam, że wiesz jak prowadzić blog w systemie Shoper i jak korzystać z edytora treści w panelu administracyjnym. Do wykonania części praktycznej będziesz potrzebować:
- tekst artykułu – może to być jeden z twoich wpisów lub dowolny inny tekst. Umieść go w nowym, nieaktywnym wpisie, aby ewentualne pomyłki podczas nauki nie były widoczne dla odwiedzających sklep;
- id produktów – wybierz kilka produktów z twojej bazy i zapisz ich numery id. Mogą być tematycznie powiązane z przygotowaną treścią, co da lepszy efekt końcowy. Id odczytasz z listy produktów lub w edycji produktu w nagłówku z nazwą.
Jeśli masz już wszystko, możesz przejść do konkretów w dalszej części poradnika.
Jak to się robi?
Rozwiązanie, które proponuję, polega na stworzeniu specjalnych linków w treści artykułu, które doładują dynamicznie podstawowe informacje o wybranym produkcie. Będą one wyświetlane na dwa alternatywne sposoby, w zależności od tego, z jakiego urządzenia korzysta użytkownik:
- Podpowiedź kontekstowa (tzw. hint) – dla komputerów PC oraz laptopów (powyżej 768 px szerokości ekranu). Po wskazaniu kursorem na link zostanie wyświetlony klikalny „dymek” z produktem.
- Okno popup – dla urządzeń mobilnych (poniżej 768 px szerokości ekranu). Po kliknięciu linku zostanie wyświetlone okno z klikalną wizytówką produktu.
Jak wiadomo nic nie dzieje się „samo”. Jakimś sposobem te informacje muszą być doładowane i wyświetlone. To zadanie spełnia przygotowany na potrzeby poradnika kod JavaScript oraz CSS. W pierwszej kolejności musisz osadzić go w twoim stylu graficznym.
Opisana modyfikacja jest wprowadzana we własnym zakresie i nie jest objęta wsparciem technicznym.
Poniższy kod JS i CSS został napisany w oparciu o domyślny styl RWD. W założeniu ma on charakter uniwersalny, jednak może wystąpić potrzeba jego dostosowania, jeśli posiadasz styl niestandardowy/indywidualny. W tej sytuacji dokonuj zmian na nieaktywnej kopii stylu.
1. Skopiuj kod CSS:
/* product placement */
a[href*="#prod_id_"],
.product-placed{
display: inline-block;
position: relative;
}
.product-placed .items-wrap{
position: absolute;
bottom: 100%;
right: 0;
display: block;
opacity: 0;
transform: scale(0);
line-height: normal;
text-align: left;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
transform-origin: 100% 100%;
z-index: 1000;
font-size: 12px;
padding-bottom: 1em;
}
.product-placed .items-wrap:after{
content: "";
display: block;
width: 2em;
height: 2em;
border-right: 1px solid #d8d8d8;
border-bottom: 1px solid #d8d8d8;
background: #fff;
transform: rotate(45deg);
transition: border-color 0.3s ease-in-out;
position: absolute;
bottom: 0;
right: 2em;
margin-top: -0.5em;
border-radius: 0 0 4px 0;
}
.product-placed .items-wrap-inner{
color: #000;
border: 1px solid #d8d8d8;
background: #fff;
padding: 2em;
display: block;
text-align: left;
box-shadow: 0 0 4em 0 rgba(0,0,0,0.16);
border-radius: 4px;
transition: border-color 0.3s ease-in-out;
}
.product-placed .items-wrap:hover:after,
.product-placed .items-wrap:hover .items-wrap-inner{
border-color: @maincolor;
}
.product-placed.hover .items-wrap{
transform: scale(1);
opacity: 1;
}
a.placed-item{
color: @fontcolor;
}
.placed-item > .side-left{
width: 75px;
margin-right: 1em;
}
.placed-item > .side-right{
width: 220px;
}
.placed-item > .side-right > *{
display: block;
}
.placed-item .item-row{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.placed-item .evaluation,
.placed-item .item-name{
margin-bottom: 0.5em;
}
.placed-item .item-name{
line-height: 1em;
font-size: 1.2em;
}
.placed-item .evaluation:after{
content: "";
display: block;
clear: both;
}
.placed-item .evaluation .votestars{
float: left;
margin: 0;
}
.placed-item .evaluation .votestars img[class*="star"]{
width: 1.5em;
height: 1.5em;
background-size: contain;
margin: 0;
}
.placed-item .item-price{
font-size: 1.3em;
}
.placed-item .item-row ~ .item-price{
margin-top: 0.5em;
}
.placed-item .item-price > *{
display: block;
text-align: right;
}
.placed-item .item-price em{
font-weight: bold;
color: @maincolor;
font-style: normal;
}
.placed-item .item-price del{
margin-left: 0.3em;
}
/* eof product placement */1. Przejdź do panelu sklepu i edytuj aktywny styl graficzny.
2. W sekcji „Własny styl CSS” wklej skopiowany kod i zapisz zmiany.
Uwaga: jeżeli nie możesz zapisać zmian, skorzystaj z „Edytora HTML/CSS” dostępnego w menu „więcej” na wysokości nazwy stylu. Po jego uruchomieniu znajdź plik user.css i dodaj do niego skopiowany kod.
3. Skopiuj poniższy kod JS:
/* product placement */
var productPlacement = function(config){
var init = function(){
if ($(window).width() <= 768) {
mobileEvents();
}
else{
desktopEvents();
}
};
var desktopEvents = function(){
$('body').on('mouseenter', "a[href*='#prod_id_']", function(e){
var $btn = $(this);
var id = parseIds( $btn.attr("href") );
if ($btn.hasClass("product-placed")) {
return;
}
this.wait = setTimeout(function(){
productRequest(id, function(product){
$btn.addClass('product-placed');
var $c = renderContaienr();
var $p = renderProduct(product, false);
$btn.attr("href", product.url);
$btn.attr("target", "_blank");
$c.find(".items-wrap-inner").append($p);
$btn.append($c);
setTimeout(function () {
$btn.addClass("hover");
}, 10);
$btn.hover(function () {
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
});
});
}, 30);
});
$('body').on('mouseout', "a[href*='#prod_id_']", function(e){
if(typeof this.wait != 'undefined'){
clearTimeout(this.wait);
}
});
};
var mobileEvents = function(){
$('body').on('click', "a[href*='#prod_id_']", function(e) {
var id = parseIds( $(this).attr("href") );
var title = $(this).attr("title");
productRequest(id, function (product) {
var $p = $("<div/>").append( renderProduct(product, true) );
var productPlacementModal = new Shop.Modal({
showMask: true,
position: 'center',
positionType: 'absolute',
offset: 20,
header: typeof title == 'string' ? title : "",
content: $p.html()
});
productPlacementModal.createModal();
});
});
};
var productRequest = function(id, callback){
frontAPI.getProduct(function (product) {
callback(product);
}, {
lang: Shop.lang.name,
currency: Shop.values.currency,
id: id
});
};
var parseIds = function(href){
var ids = href.replace("#prod_id_", "");
ids = ids.split("-");
return parseInt(ids[0]);
};
var renderProduct = function(p, clickable){
var $item = $("<span class='item placed-item r--l-flex r--l-flex-vcenter'/>").append($("<span class='side-left'/>"), $("<span class='side-right'/>"));
if(typeof clickable != 'undefined' && clickable == true){
$item = $("<a href='"+p.url+"' target='_blank' class='item placed-item r--l-flex r--l-flex-vcenter'/>").append($("<span class='side-left'/>"), $("<span class='side-right'/>"));
}
var src = typeof p.main_image != 'undefined' ? p.main_image : "__overlay";
var $img = $("<i class='item-img'/>").append($("<img src='/environment/cache/images/150_150_productGfx_"+src+".jpg' alt=''/>"));
var $name = $("<span class='item-name'/>").text(p.name);
var $avail = config.showAvailability == true ? $("<span class='item-row item-avail'/>").html("<span>"+Shop.lang.quickview.availability+"</span><b>"+p.availability.name+"</b>") : "";
var $deliv = config.showDelivery == true ? $("<span class='item-row item-deliv'/>").html("<span>"+Shop.lang.quickview.delivery+"</span><b>"+p.delivery.name+"</b>") : "";
var $price = $("<span class='item-price'/>");
var $rate = config.showEvaluation == true ? renderRate(p) : "";
if(typeof p.price != 'undefined'){
if(config.priceMode == "brutto"){
$price.append(renderPrice(p.price.gross, "item-price-gross"));
}
else if(config.priceMode == "netto"){
$price.append(renderPrice(p.price.net, "item-price-net"));
}
}
$item.find(".side-left").append($img);
$item.find(".side-right").append($rate, $name, $avail, $deliv, $price);
return $item;
};
var renderPrice = function(price, cssClass){
var $tmp = $("<span class='"+cssClass+"'/>");
if(price.base_float > price.final_float){
$tmp.append(
$("<em/>").text(price.final),
$("<del/>").text(price.base),
);
}
else{
$tmp.append(
$("<em/>").text(price.final)
);
}
return $tmp.children().length > 0 ? $tmp : "";
};
var renderRate = function(data){
if(typeof data.rate != 'undefined'){
var rate = data.rate;
var bComma = Math.floor(rate);
var aComma = rate - bComma;
var $evaluation = $("<span/>", {
class: 'evaluation'
}).append(
$("<span class='votestars'/>"),
$("<span class='none'>").text(rate)
)
for(var i=1; i <= 5; i++){
var $img = $("<img/>", {
class: 'px1',
src: window.shoper.url("libraries/images/1px.gif"),
alt: ''
});
$evaluation.find(".votestars").append(
$img
);
if(rate > aComma){
$img.addClass("star1");
rate--;
}
else if(rate > 0){
if(aComma >= 0.25 && aComma < 0.75){
$img.addClass("star0-5");
}
else if(aComma >= 0.75){
$img.addClass("star1");
}
rate--;
}
else{
$img.addClass("star0");
}
}
return $evaluation;
}
return "";
};
var renderContaienr = function(){
var html = "<span class='items-wrap'><span class='items-wrap-inner'></span></span>";
return $(html);
};
var maxAttempt = 20;
var attempt = 0;
var _wait = function(){
if(maxAttempt <= attempt){
return;
}
attempt++;
if(typeof window.frontAPI != 'undefined'){
init();
}
else{
setTimeout(function () {
_wait();
}, 50);
}
};
_wait();
};
$(window).ready(function () {
productPlacement({
priceMode: "brutto",
showAvailability: true,
showDelivery: true,
showEvaluation: true
});
});
/* eof product placement */5. Przejdź do edycji stylu.
6. Wklej kod do zakładki „Własny skrypt JS” i zapisz zmiany.
Od tej pory, edytowany przed chwilą styl, jest uzbrojony w nową funkcjonalność lokowania produktu. Dodany kod JS powoduje, że do określonych linków załączone jest zdarzenie, które podczas wywołania pobiera dane na temat produktu poprzez FrontApi. Dane są „opakowane” w stosowany HTML który jest wstrzyknięty do treści. W stosownym momencie dane są pokazywane użytkownikowi (po wskazaniu kursorem lub na urządzeniach mobilnych po kliknięciu) i formatowane zgodnie z regułami CSS, dodanymi do stylu.
W tej chwili pozostało pokazać ci jak używać nowej funkcji. Wykorzystaj do tego przygotowane wcześniej materiały:
1. Przejdź do edycji wpisu.
2. W edytorze treści artykułu zaznacz wybrane słowa.
Nie zaznaczaj zbyt długich fraz. Powinno to być jedno lub dwa słowa dla optymalnego wyświetlania linku.
3. Z narzędzi edytora wybierz „Wstaw/Edytuj link”.
4. W polu „URL” należy teraz wpisać frazę, która powiąże słowo z konkretnym produktem wg wzoru: #prod_id_[id produktu]. Przykładowo, jeśli id twojego produktu to 61 to fraza będzie wyglądała następująco „#prod_id_61”.
5. Zapisz zmiany.
Tak skonstruowany link jest już powiązany z produktem. Sprawdź teraz uzyskany efekt na podglądzie artykułu. Domyślnie, jak widać, doładowywane są:
- zdjęcie,
- ocena,
- nazwa,
- dostępność,
- czas wysyłki,
- cena.
To jednak nie wszystko. Dla zaawansowanych są pewne furtki. Przygotowany przeze mnie skrypt posiada możliwość konfiguracji. Dzięki temu możesz wyłączyć wyświetlanie niektórych elementów. Przejdź do fragmentu, który inicjuje algorytm. Znajduje się on w końcowej części kodu JavaScript, który wcześniej został przez ciebie dodany do szablonu graficznego. Wygląda on następująco:
$(window).ready(function () {
productPlacement({
priceMode: "brutto",
showAvailability: true,
showDelivery: true,
showEvaluation: true
});
});
Jak widać funkcja productPlacement przyjmuje argument w postaci tablicy parametrów (pogrubiona część). Możesz je zmienić wg poniższych wskazówek:
| Parametr | Wartość, którą możesz wpisać |
| priceMode: | ”brutto” – zostanie wyświetlona cena brutto”netto” – zostanie wyświetlona cena netto”” – cena nie będzie wyświetlona |
| showAvailability: | true – informacja o dostępności będzie widocznafalse – informacja o dostępności nie będzie widoczna |
| showDelivery: | true – informacja o czasie wysyłki będzie widocznafalse – informacja o czasie wysyłki nie będzie widoczna |
| showEvaluation: | true – ocena będzie widocznafalse – ocena nie będzie widoczna |
Dobre praktyki
Stwórz wartościowy wpis
Pamiętaj, że skuteczność lokowania zależy od popularności twojego materiału i od jego jakości. Zanim napiszesz artykuł, zastanów się jakie problemy są charakterystyczne dla twojej branży. Czego w związku z tym mogą szukać twoi potencjalni klienci. Jeśli masz z nimi kontakt, słuchaj, z czym się zmagają i wykorzystaj to. Daj odwiedzającemu rzetelne i profesjonalne porady, dzięki którym polubi twój sklep.
Unikaj zbyt dużej ilości zalokowanych produktów
Wyobraź sobie tekst, który jest naszpikowany dużą ilością produktów i postaw się w roli odwiedzającego. Czytając taki materiał, bez trudu zauważysz, że jest to kolejna forma reklamy, a nie tekst, w którym szukasz rozwiązania problemu. Zbyt duża ilość zalokowanych produktów może przynieść skutek odwrotny do zamierzonego. Ogranicz się do kilku perełek z twojego asortymentu, które twoim zdaniem pomogą rozwiązać problem.
Promuj wpisy w portalach społecznościowych
Pokaż, że twoja działalność to nie tylko sprzedaż, ale również pomoc i edukacja twoich klientów. Dzięki temu wzrośnie również zaufanie do twojej marki.
Unikaj tworzenia linków ze zbyt długą frazą
Ze względu na techniczne uwarunkowania udostępnionego stylu zalecam, aby link zawierał jedno lub dwa słowa. Jeżeli podlinkujesz całe zdanie, może to spowodować załamanie linii tekstu w połowie szerokości układu, co nie wygląda estetycznie.
Testuj wpis, gdy jest nieaktywny
Pomyłka jest normalnym zjawiskiem, jednak odwiedzający nie muszą o tym wiedzieć. Tworząc nowy materiał, weryfikuj go na podglądzie i aktywuj po zakończeniu pracy.
Podsumowując…
Przedstawione rozwiązanie może być jednym z wielu sposobów na osadzenie produktu w artykule bloga. Kod, który został udostępniony, ma charakter otwarty, więc możesz go zmienić i dostosować do własnych potrzeb samodzielnie lub z pomocą twojego webmastera. Jednak największa trudność w wykorzystaniu strategii lokowania produktu to uzyskanie wartościowego i popularnego bloga. Wierzę, że twój profesjonalizm oraz znajomość swojej branży ułatwi ci osiągnięcie celu! Dzięki temu poradnikowi otrzymujesz kolejne narzędzie, które otwiera nowe możliwości.
Autor: Piotr Siebielec, Senior Frontend Developer w WebCoders.eu Sp. z o.o.
Posiada 8-letnie doświadczenie w branży sklepów internetowych. W firmie odpowiedzialny za projektowanie i wdrażanie warstwy widoku aplikacji oraz szablonów.
W swoim porfolio posiada niezliczoną ilość realizacji grafiki indywidualnej oraz setki wdrożeń seryjnych szablonów. Prywatnie amator dobrego kina, książki oraz gier komputerowych.
WebCoders.eu Sp. z o.o. to producent oprogramowania dla branży e-commerce. Swoje rozwiązania dla Shoper(R) dostarcza pod marką ShopGadget.pl.