Czego dowiesz się z tego poradnika:
- jak używać podstawowego modułu zapisu do newslettera w Shoper;
- jak powinny wyglądać wiadomości potwierdzające dodanie adresu e-mail do newslettera;
- jak dokonać drobnych modyfikacji wizualnych modułu newslettera;
- jakimi aplikacjami wzbogacić proces zapisu.
Oprogramowanie Shoper posiada standardową funkcjonalność obsługującą cały proces pozyskiwania adresów oraz wysyłki mailingu do subskrybentów. W początkowej fazie działania sklepu może bardzo skutecznie wspomóc budowę świadomości marki. Warto więc poznać te możliwości i zacząć je wykorzystywać. Poniższy poradnik pokaże od podstaw jak efektywnie skonfigurować sklep, by bez użycia narzędzi zewnętrznych służył także do obsługi newslettera.
Pamiętaj, że zakup w sklepie i podanie w związku z tym swoich danych nie oznacza zgody na wysyłkę wiadomości o charakterze marketingowym. Konsumentów chroni w tej materii prawo. Musisz zatem, czytelniku, zawsze uważać, by mailing wysłać tylko do tych osób, które wyraziły na to chęć.
Brzmi groźnie? Nie poddawaj się, nie rezygnuj na wstępie 🙂 Działający newsletter stanowić będzie bardzo potężny oręż w walce o klienta. Przy zachowaniu kilku ważnych zasad i podążając za pewnymi wskazówkami, możesz z jego pomocą zdobyć zaufanie i lojalność konsumentów. To zaprocentuje sukcesem twojego przedsięwzięcia!
Od czego zaczynamy? Od subskrybentów!
Podstawową kwestią w rozwoju newslettera jako procesu jest zdobycie subskrybentów. Pamiętaj, że w twoim regulaminie musi zostać zawarta informacja o tym, że udostępniasz możliwość zapisu z zamiarem wysłania do subskrybentów szeroko pojętych materiałów reklamowych. Gdy już o to zadbasz to przejdź do kolejnego kroku – technicznego umieszczenia modułu newslettera w sklepie. Proponujemy, aby wybrać do tego stronę główną sklepu, listę produktów oraz kartę produktu. We wszystkich przypadkach moduł umieść w sekcji dolnej, tuż nad stopką.
W tym artykule oprzemy się na przykładach umieszczenia modułu na stronie głównej.
Ustawiamy moduł w odpowiednim miejscu w edycji modułów, w obecnym szablonie graficznym (Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Moduły):
Pamiętaj, że musisz konsumenta zachęcić do zapisu. Nie zrobisz tego zapowiedziami informowania o nowościach i promocjach. Liczą się konkrety. W zależności od możliwości biznesowych zaoferuj rabat, zestawy próbek, zaproszenia na wydarzenia, unikalne e-booki czy inny atrakcyjny bonus. W tym przykładzie założymy, że nagrodą za zapis będzie jednorazowy rabat 10% na zakupy, na cały asortyment i bez terminu ważności.
Pole “Uwagi prawne” nie jest obowiązkowe, jeżeli tylko temat wysyłki wyczerpuje regulamin sklepu.
Samo wpisanie przez użytkownika adresu e-mail oraz kliknięcie ikonki potwierdzenia nie spowoduje automatycznie, że do subskrybenta będzie można wysyłać mailing. Musi on jeszcze potwierdzić chęć zapisu, wiadomość o tym zostanie automatycznie do niego wysłana na wprowadzony adres. Jest to system pozyskiwania subskrybentów double opt-in, w którym klient podaje swój adres w sklepie (na przykład w module do zapisu), a następnie potwierdza zapis do newslettera poprzez kliknięcie linku w mailu.
Wiadomość potwierdzającą zapis tworzysz lub edytujesz w Wygląd i treści > Szablony wiadomości automatycznych > Subskrypcja – dodanie.
Nie chcesz, aby do newslettera zapisywały się adresy fikcyjne? Przeczytaj o formularzu recaptchy!
Gdy subskrybent potwierdzi chęć zapisu, sklep wyśle mu kolejną wiadomość, Subskrypcja – potwierdzenie. To w tej wiadomości dołącz obiecany wcześniej bonus (kod rabatowy, link do e-booka itp.).
Uwaga! Kod (kupon) rabatowy musisz stworzyć we własnym zakresie w sklepie, zgodnie z artykułem.
Treść i tytuł takiej wiadomości jest bardzo istotna dla efektywności. Pamiętaj, że masz pełny wpływ na kształt i treść wskazanych wyżej wiadomości.
Szukasz inspiracji? Może natchnie cię artykuł o mailach transakcyjnych? Część z pomysłów możesz wykorzystać w wiadomościach dotyczących subskrypcji.
Startujemy zatem z testem 🙂 Zapisujemy się do newslettera:
Potwierdzamy zapis:
Sprawdzamy listę subskrybentów w Zwiększaj sprzedaż > Newsletter > Subskrybenci:
Działa 🙂 Suwak aktywności przesunięty na “tak” dowodzi, że subskrybent potwierdził chęć dodania adresu do naszej listy mailingowej.
Otrzymał także wiadomość:
Na co mogę sobie pozwolić w mailach z prośbą o potwierdzenie zapisu oraz z podziękowaniem?
O tym, że treść wiadomości automatycznych wysyłanych ze sklepu jest ważna, wspominać nie trzeba. Co jednak w nich zawrzeć i jakim językiem się posługiwać?
Skracamy dystans. Ma być miło i przyjaźnie, może być na luzie. Unikamy żartów – są bardzo subiektywne. Pamiętajmy też, że komunikaty muszą być konkretne i spójne. Klient/subskrybent nie może się zastanawiać, co tak naprawdę pracownicy sklepu mieli na myśli.
Przykład nr 1:
Fragment wiadomości: Będziemy wysyłać Ci interesujące informacje o nowościach w naszym sklepie, o wciąż zmieniających się trendach i ogólnie na co powinieneś/aś zwrócić uwagę.
Źle. Zdanie za długie, niepotrzebnie złożone i zakończone elementem nieokreślonym. Jeśli tylko możemy – unikajmy konieczności rozdzielania form męskich i żeńskich, lepiej zastąpić je zdaniami, które na płeć nie wskazują.
Fragment wiadomości: Będziemy wysyłać Ci interesujące informacje o nowościach w naszym sklepie, o zmieniających się trendach i ciekawostkach z branży.
Dobrze. Zdanie też złożone, ale zakończone konkretem. Lepiej się je czyta.
Przykład nr 2:
Fragment wiadomości: Prosimy, kliknij poniższy link w celu potwierdzenia zapisu twojego adresu email w naszej bazie subskrybentów.
Źle. Zdanie za długie, niepotrzebnie użyte określenie fachowe (subskrybent), słowo “baza” może odwiedzającego sklep przestraszyć.
Fragment wiadomości: Prosimy, kliknij poniższy link – to potwierdzi, że chcesz, abyśmy wysyłali Ci ciekawe rzeczy.
Dobrze. Konkret, który nie wprowadza w błąd i nie odstrasza.
Bardzo ważna jest też konsekwencja w obranym stylu. Klient może otrzymać maila ze sklepu także w innej okoliczności – być może złożył już jedno zamówienie, być może założył konto. Jeżeli zamierzasz oprzeć automatyczną korespondencję sklepu na zwrotach bezpośrednich takich jak Ty, Tobie, Ciebie (z małej bądź wielkiej litery) to pamiętaj, aby także w wiadomościach dotyczących zapisu do newslettera nie używać zwrotów typu Państwo, Pan, Pani.
Spełnij obietnicę umieszczoną na module z zapisem. Kod rabatowy? Link do e-booka? Nie zapomnij dodać tych elementów w wiadomości z podziękowaniem za potwierdzenie zapisu.
Pamiętaj też o ujednoliceniu stopki w wiadomościach automatycznych – ona też może budować identyfikację twojego sklepu. W tym pomoże stosowanie szablonu, o którym poniżej.
Zawrzyj w nim wybrany zwrot grzecznościowy, te dane kontaktowe, które uważasz za kluczowe oraz (opcjonalnie) informację sprzedażową. W powyższym przykładzie jest to “Sprawdź nasze nowości!” z podlinkowaniem do strony z nowościami w sklepie. Nie usuwaj znacznika {content}! jest on kluczowy dla poprawnego działania szablonu (content to właśnie treść maili typu Subskrypcja – dodanie czy Subskrypcja – potwierdzenie).
Możesz tworzyć kolejne szablony dla wiadomości automatycznych poprzez przycisk Dodaj szablon e-mail. Masz pomysł na odrębne szablony do maili transakcyjnych i do maili “newsletterowych”? Jak najbardziej możesz je zrealizować.
Dla zaawansowanych: W ramach treści HTML możesz stworzyć projekt graficzny szablonu ze zdjęciami, kolorami, indywidualnym układem treści. Pamiętaj jednak, aby w ramach treści tekstowej umieścić alternatywny komunikat. Część subskrybentów może mieć wyłączoną obsługę HTML na swoich kontach pocztowych.
Szablon odpowiedni dla danej wiadomości wybieramy w edycji każdej z nich:
Chcę, aby moduł zapisujący do newslettera był atrakcyjniejszy. Pomocy!
Kwestie wiadomości automatycznych mamy już za sobą. Co jednak gdy chcemy, aby moduł newslettera był atrakcyjniejszy dla oka, a nie dysponujemy bardziej rozbudowanym projektem graficznym sklepu? Mamy dla ciebie dwie propozycje.
Uwaga! Poniższe style działają tylko na szablonie „RWD-UNIWERSALNY”. Posiadasz wykupiony szablon lub indywidualny projekt graficzny? Nie gwarantujemy, że będą one funkcjonowały u ciebie poprawnie. Dodawanie własnych styli CSS nie jest objęte wsparciem technicznym.
Pomysł nr 1
Pierwszą propozycją wzbogacenia modułu jest zastosowanie stylu CSS, który ukaże moduł jako kolorową belkę szeroką na cały ekran:
Widok na urządzeniach mobilnych:
Wskazany efekt uzyskamy poprzez dodanie w Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Własny styl CSS poniższej treści:
/* Newsletter propozycja nr 1 */
#box_newsletter{
background-color: #636363;
padding: 15px;
box-shadow: -500px 0 #636363, 500px 0 #636363;
}
#box_newsletter .boxhead{
display: none;
}
#box_newsletter .boxintro{
float: left;
width: 50%;
text-align: right;
padding-right: 15px;
font-size: 12px;
color: #ffffff;
}
#box_newsletter .boxintro strong{
font-size: 18px;
padding-right: 5px;
}
#box_newsletter form{
margin: 0;
}
#box_newsletter form fieldset:nth-child(2){
font-size: 12px;
color: #fff;
width: 48%;
float: right;
}
#box_newsletter .newsletter-input{
width: 66%;
border-radius: 3px 0 0 3px;
border: 0;
}
#box_newsletter .btn{
background-color: #fb5642;
border-color: #fb5642;
}
#box_newsletter .btn img{
display: none;
}
#box_newsletter .btn span{
display: inline-block;
}
/* Styl dla mobile */
@media screen and (max-width: 767px) {
#box_newsletter{
box-shadow: none;
padding: 0px;
}
#box_newsletter .boxintro{
width: 100%;
text-align: center;
padding: 5px 0px;
}
#box_newsletter .btn{
width: 25%;
}
#box_newsletter .newsletter-input{
width: 75%;
}
#box_newsletter form{
padding: 15px;
}
#box_newsletter form fieldset:nth-child(2){
width: 100%;
float: right;
padding: 5px 0px 10px 0px;
}
}
/* Koniec: Newsletter propozycja nr 1 */
We wskazanym kodzie istnieje bardzo prosty sposób na ustawienie takich kolorów, jakie sobie życzymy. Możemy w nim edytować:
- kolor głównej belki (z podziałem na środek, lewy margines i prawy margines),
- kolor przycisku (z podziałem na wypełnienie i obramowanie),
- kolor tekstu (wstęp i uwagi prawne).
Za kolory odpowiadają poniższe elementy, ukazane na zrzucie ekranu powyższego stylu:
Zaznaczone elementy to wartości przedstawiające kolory w zapisie hex. Najprościej uzyskać je w Google, wpisując w wyszukiwarce frazę hex color i klikając enter. Jako pierwszy wynik pojawi się paleta kolorów, w którym można manualnie wybrać interesujący nas kolor. Jeżeli posiadasz zapis koloru w formacie RGB czy CMYK, to możesz go wpisać w odpowiednim miejscu. Kolor ukaże się na palecie wraz z wartością hex:
Przykładowy widok po zastosowaniu innych kolorów:
Pomysł numer 2
Drugą propozycją jest belka z napisem na tle szerokiego na cały ekran zdjęcia. Główną atrakcją tego pomysłu jest użycie pliku tła. Przykładowa wizualizacja:
Ten sposób modyfikacji modułu wymaga dodania pliku tła w Plikach graficznych w Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny.
Nazwa i rozszerzenie pliku są ważne, gdyż odniesienie do niego znajduje się w stylu css propozycji! Nazwij więc plik tak, abyś swobodnie i łatwo wprowadzał go do kodu.
Styl CSS odpowiedzialny za wskazany wygląd prezentuje się następująco:
/* Newsletter Propozycja nr 2 */
.bottom-footer.row .container {
max-width: 100%;
}
#box_newsletter {
background-image: url(../images/user/tlo-propozycja.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0;
text-align: center;
}
#box_newsletter .boxhead, #box_newsletter .innerbox {
max-width: 1180px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#box_newsletter .boxhead {
display: none;
}
#box_newsletter .innerbox {
padding: 60px 0;
width: 30%;
}
#box_newsletter .boxintro {
font-size: 20px;
margin-bottom: 20px;
margin-bottom: 20px;
color: #4a4a4a;
line-height: 24px;
}
#box_newsletter .newsletter-input{
border-radius: 3px 0 0 3px;
border: 1px solid #c0e3ff;
border-right: none;
width: 75%;
}
#box_newsletter form fieldset {
padding-top: 10px;
color: #717171;
}
#box_newsletter .btn {
background-color: #4091ff;
border-color: #4091ff;
border-radius: 0 3px 3px 0;
color: #fff;
text-transform: uppercase;
width: 25%;
}
#box_newsletter .btn:hover {
background-color: #fff;
border-color: #4091ff;
border-radius: 0 3px 3px 0;
color: #4091ff;
}
#box_newsletter .btn span {
display: inline;
color: unset;
}
#box_newsletter .btn img {
display: none;
}
@media screen and (max-width: 1200px) {
.bottom-footer.row .container {
width: 100%;
}
#box_newsletter .innerbox {
width: 50%;
}
}
@media screen and (max-width: 767px) {
#box_newsletter .innerbox {
width: 80%;
}
#box_newsletter .newsletter-input {
width: 70%;
}
#box_newsletter .btn {
width: 30%;
}
}
/* Koniec: Newsletter Propozycja nr 2*/
Poniżej opis tych fragmentów kodu, które możesz edytować i tym samym wpływać na wygląd modułu. Przyda się tutaj już omawiana tablica kolorów hex.
Proponujemy, aby plik graficzny był poziomym prostokątem o szerokości 1920 pikseli.
Przykład użycia innego zdjęcia:
Zbiorcza uwaga do powyższych propozycji – frazę “Zapisz się” (która występuje zamiast domyślnej ikonki koperty) definiujemy w Ustawienia > Ustawienia regionalne > Języki, w edycji języka polskiego:
Jeżeli prywatnie interesujesz się zagadnieniami HTML/CSS to możesz moduł newslettera wzbogacić wizualnie na wiele sposobów, tworzyć własne pomysły i propozycje. W przeciwnym wypadku możesz style z tego artykułu po prostu przekopiować, zmieniając tylko kolory z pomocą tabeli hex.
Moduł graficzny w postaci belki to bardzo często spotykany sposób na zachętę do zapisów i dobrze, że od niego zaczęliśmy. Nie jest jednak jedynym. Bardzo często spotykane są także pojawiające się (“wyskakujące”) okienka z informacją i możliwością zapisu do newslettera, zakrywające dużą część ekranu. Tak zwane pop-upy. Nie da się ich nie zauważyć. Aby je wyłączyć należy albo świadomie zamknąć “iksem”, albo dokonać zapisu. Ich skuteczność w dotarciu do oczu twoich potencjalnych subskrybentów jest zatem niemal stuprocentowa.
Chcę zatem wyskakujące okienko pop-up! Chcę, by pojawiało się zawsze i wszędzie!
Nie nie nie, z tym trzeba bardzo ostrożnie. Zniechęcają okienka:
- pojawiające się od razu po wejściu na stronę lub po 1-2 sekundach;
- pojawiające się na każdej podstronie, nawet jeśli już zostały zamknięte;
- trudne do zamknięcia z technicznych powodów;
- pozbawione zachęcającej informacji.
Aby wyeliminować te błędy wystarczy pamiętać o kilku zasadach:
- ustaw pojawianie się pop-upa na 5 lub nawet 10 sekund po załadowaniu strony, opcjonalnie po zescrollowaniu ekranu w dół do jej połowy;
- zadbaj, aby rozwiązanie było wdrożone solidnie i przetestuj je przed ostatecznym uruchomieniem;
- także tutaj, podobnie jak na belce do zapisu, przedstaw konkretne korzyści typu rabat, e-booki, próbki, upominki – w zależności od branży, twoich możliwości i sytuacji.
Przykłady interesujących użyć pop-upów:
Style CSS mogą nie być częścią twoich zainteresowań. W takiej sytuacji możesz skorzystać z gotowych aplikacji, dzięki którym w prosty sposób stworzysz pop-up. Polecamy:
Warto zapoznać się ze szczegółowym opisem aplikacji i wybrać bliższą oczekiwaniom (obie oferują szereg innych możliwości, niezwiązanych z newsletterem).
Atrakcyjne pop-upy możesz wykonać także korzystając z zewnętrznych narzędzi mailingowych, takich jak MailerLite czy Freshmail. Więcej na ten temat przeczytasz tutaj oraz tutaj. Lista mailingowa tworzyć się będzie wówczas w jednym z tych systemów, w zależności który z nich wybierzesz.
Tworzenie i wysyłka mailingu na platformie Shoper
Mailing stworzyć oraz wysłać możesz z poziomu panelu administracyjnego sklepu, w Zwiększaj sprzedaż > Newsletter > Newslettery. Pamiętaj o zachęcającym do otwarcia wiadomości tytule oraz interesującej dla klienta zawartości.
Pamiętaj, aby mailing wysyłać tylko do subskrybentów, jeżeli tylko twój regulamin nie wprowadza w tej kwestii dodatkowych regulacji! Staraj się też tworzyć treść tekstową (oprócz HTML), zawierającą słowny opis przekazywanych informacji. Być może któryś z twoich subskrybentów ma na skrzynce wyłączoną obsługę HTML. W takiej sytuacji przyszedłby do niego mail niemożliwy do odczytania lub sprawiający wrażenie pustego. Wysyłkę rozpoczyna kliknięcie w przycisk Wyślij na dole ekranu wiadomości.
Efektywność newslettera wysyłanego z systemu Shoper najlepiej mierzyć za pomocą Google Analytics po wcześniejszym otagowaniu linków, więcej informacji znajdziesz tutaj.
Shoper i jego standardowe narzędzie mailingowe – czy zda egzamin w każdym przypadku?
Funkcjonalność można w bardzo owocny sposób wykorzystać na początku działań marketingowych. Pozwoli na budowanie bazy, a także na skuteczną wysyłkę mailingu. W toku rozwoju działań jego używanie nie okaże się czasem straconym – kontakty można łatwo zaimportować do dedykowanych narzędzi mailingowych. Przy odrobinie pomysłu i kreatywności będzie służyło zarówno tobie jako administratorowi sklepu, jak i twoim subskrybentom.
Narzędzie nie spełni jednak oczekiwań w przypadku dużych baz mailingowych. To zewnętrzne narzędzia, takie jak wspomniane już Freshmail czy MailerLite, pozwolą w pełni rozwinąć twoje działania mailingowe, gdy skala zapisów do newslettera będzie już duża.
- rozbudowane funkcje analityczne;
- zaawansowane możliwości związane z bazą subskrybentów;
- możliwość tworzenia rozbudowanych szablonów wiadomości w prosty sposób;
- łatwość w konstruowaniu wiadomości;
- możliwość importu kontaktów z Shopera – kontakty zdobyte w sposób opisany w tym artykule nie zostałyby utracone!
- niska cena jak na tak szerokie możliwości.
Nie zapominaj o Newsletterze w toku przygotowywania działań marketingowych. Zbudowana baza mailingowa to przede wszystkim kapitał, ale także wyzwanie. Życzymy owocnych mailingów i rosnącej bazy ich odbiorców!