Pytanie Wydawcy:
” Dzień dobry. Po wygenerowaniu kodu kreacji Pekao SA i wklejeniu go na stronę, na razie testową, strona nie jest widoczna, widoczny jest tylko baner. Dostawca strony firma WebWave sugeruje błąd po stronie kodu. „
Ten nietypowy problem wysłał do nas Pan Marek. Jest on o tyle ciekawy, że do tej pory nie dostawaliśmy od Was sygnałów o podobnych efektach. Zaciekawiony poprosiłem o adres strony testowej. I rzeczywiście – po jej uruchomieniu na chwilę mignęła treść strony, a potem całość została podmieniona na kreację graficzną Pekao SA.
Ale o co chodzi
Warto zacząć od tego, co to jest WebWave. Jest to jeden z wielu istniejących w internecie serwisów pozwalających na zbudowanie za darmo (lub w niskim koszcie) strony internetowej bez jakiejkolwiek znajomości HTML czy zagadnień programowania. Po prostu korzystamy z wizualnego edytora i gotowych bloków, które możemy dowolnie konfigurować i przestawiać. Niestety minusem takiego rozwiązania jest to, co jest jednocześnie jego plusem dla osób początkujących – nie mamy kompletnie wpływu na kod strony i na to co edytor z nim robi. I tu, jak się okazało, był pies pogrzebany…
Wyjaśnienie problemu
Kod przykładowej kreacji pobranej z Panelu Partnera LeadStar wygląda następująco:
<script type="text/javascript" src="https://leadstar.pl/cr_leadstar.js"></script>
<script>CRLeadStar.init({
id:357371,
type:1,
src: "https://leadstar.pl/creations/static/ff9a59978f55317fcad27655dbc4ac64.jpg",
url: "https://leadstar.pl/c?pid=117&tid=3270&gid=24726&ha=220146447",
trk: "https://leadstar.pl/rewrite/3f7bcd0b3ea822683bba8fc530f151bd",
width:300,
height:250,
epi1:"",
epi2:""
});</script>
Podobny kod wklejony w edytorze WebWave i przetworzony przez niego wygląda już następująco:
<script type="text/javascript" src="https://leadstar.pl/cr_leadstar.js"></script>
<script id="ww-objects-js-scripts" type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){CRLeadStar.init({
id:357371,
type:1,
src: "https://leadstar.pl/creations/static/ff9a59978f55317fcad27655dbc4ac64.jpg",
url: "https://leadstar.pl/c?pid=117&tid=3270&gid=24726&ha=220146447",
trk: "https://leadstar.pl/rewrite/3f7bcd0b3ea822683bba8fc530f151bd",
width:300,
height:250,
epi1:"",
epi2:""
});});
document.addEventListener('DOMContentLoaded', function(){});
</script>
Zwróciliście na coś uwagę? Tak! Kod kreacji został zmodyfikowany. W szczególności wywołanie „CRLeadStar.init” zostało obudowane kodem:
document.addEventListener('DOMContentLoaded', function(){ ... });
I to właśnie on powoduje dziwne działanie kodu kreacji. Kod ten powoduje tzw. asynchroniczne ładowanie skryptu, które w tym przypadku nie jest poprawnie obsługiwane.
Rozwiązanie
Po interwencji naszego Wydawcy w WebWave została poprawiona funkcjonalność. Podczas wklejania kodu na stronę należy odznaczyć dodatkowo opcję „Ładuj kod JS asynchronicznie”. To powinno naprawić problem. Jeżeli jednak korzystacie z innego edytora i nie macie takiej możliwości sugerujemy inne rozwiązanie: pule kreacji.
W Panelu Partnera w menu Narzędzia znajdziecie narzędzie, które szerzej opisywaliśmy w tym wpisie. Można przygotować pulę kreacji tylko z jedną konkretną kreacją. Są co najmniej dwie zalety tego rozwiązania:
- pule kreacji są oparte na innym kodzie, który jest odporny na ładowanie asynchroniczne,
- raz wstawiona pula kreacji pozwala podmieniać bannery kilkoma kliknięciami w panelu bez potrzebny podmiany kodu źródłowego strony!
Gorąco zachęcamy Was do zapoznawania się z dostępnymi narzędziami, jakie możecie znaleźć w LeadStar. Większość z nich opisywaliśmy już na łamach naszego bloga. I pamiętajcie, że jesteśmy tutaj dla Was. Jeżeli coś nie działa – piszcie! Wielu z Was przekonało się już, że działamy szybko i skutecznie.