Jak łatwo dodać inteligentne banery aplikacji w WordPress

Otrzymaliśmy wiele zapytań od twórców aplikacji: czy istnieje sposób na promowanie aplikacji mobilnych bezpośrednio z Twojej witryny WordPress? Odpowiedź brzmi tak, i jest to łatwiejsze niż myślisz.

Jednym z najprostszych sposobów jest użycie inteligentnych banerów aplikacji. Te banery pojawiają się na górze Twojej witryny, gdy jest ona przeglądana na iPhone'ach i iPadach, zachęcając odwiedzających do pobrania lub otwarcia Twojej aplikacji. Możesz nawet wyświetlać banery użytkownikom Androida, korzystając z odpowiedniej wtyczki.

Inteligentne banery aplikacji nie są irytujące jak wyskakujące okienka. Zamiast tego naturalnie wtapiają się w Twoją witrynę i delikatnie zachęcają odwiedzających do pobrania lub otwarcia Twojej aplikacji. Rezultat? Więcej pobrań, lepsze zaangażowanie użytkowników i bardziej profesjonalne wrażenia mobilne.

Przetestowaliśmy różne metody dodawania tych banerów do WordPressa i znaleźliśmy dwa podejścia, które doskonale sprawdzają się na każdym poziomie umiejętności.

Pierwsza metoda wykorzystuje prosty fragment kodu do dodania natywnego banera Apple iOS, podczas gdy druga wykorzystuje wtyczkę, która obsługuje zarówno urządzenia iOS, jak i Android z pełną personalizacją projektu. Przeprowadzimy Cię krok po kroku przez obie opcje.

TLDR Szybkie podsumowanie: Inteligentne banery aplikacji to natywne banery iOS, które pojawiają się w Safari, zachęcając odwiedzających do pobrania lub otwarcia Twojej aplikacji. Najprostszym sposobem na dodanie ich w WordPressie jest darmowa wtyczka o nazwie WPCode.

Jeśli chcesz również wyświetlać banery użytkownikom Androida, możesz użyć wtyczki Mobile Smart App Banner, która obsługuje obie platformy i pozwala na pełną personalizację wyglądu banera.

Dlaczego dodawać inteligentne banery aplikacji w WordPress?

Używanie inteligentnego banera aplikacji w Twojej witrynie WordPress może pomóc Ci uzyskać więcej pobrań i zakupów Twojej aplikacji mobilnej.

Wielu właścicieli stron internetowych tworzy towarzyszącą aplikację mobilną, dzięki której odwiedzający mogą przeglądać ich treści w sposób zoptymalizowany pod kątem urządzeń mobilnych.

Ponieważ te aplikacje są zaprojektowane dla urządzeń mobilnych, często zapewniają lepsze wrażenia użytkownika. Możesz również wyświetlać przypomnienia, spersonalizowane treści, oferty, aktualizacje i inne za pomocą mobilnych powiadomień push. Wszystko to oznacza większe zaangażowanie, konwersje i sprzedaż.

Możesz zachęcić użytkowników iPhone'a i iPada do pobrania Twojej aplikacji mobilnej za pomocą inteligentnego banera aplikacji.

Jest to baner, który pojawia się na górze ekranu, gdy użytkownik iOS odwiedza Twoją witrynę za pomocą przeglądarki Safari.

Odwiedzający mogą kliknąć baner, aby pobrać Twoją aplikację ze sklepu App Store. Jeśli odwiedzający już ma Twoją aplikację, baner poprosi ich o otwarcie aplikacji zamiast tego. W ten sposób możesz uzyskać więcej pobrań aplikacji i zaangażowania.

Jeśli odwiedzający korzysta z urządzenia innego niż Apple lub innej przeglądarki internetowej, natywny inteligentny baner aplikacji Apple nie pojawi się.

Jednak, jak pokażemy w Metodzie 2, możesz użyć wtyczki do wyświetlania banerów pobierania aplikacji użytkownikom Androida i odwiedzającym korzystającym z innych przeglądarek.

Mając to na uwadze, zobaczmy, jak możesz dodać inteligentne banery aplikacji w WordPress. Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do wybranej metody:

Metoda 1: Używanie WPCode (Wyświetlanie inteligentnego banera aplikacji w całym WordPress)

Najprostszym sposobem dodania inteligentnych banerów aplikacji do Twojej strony WordPress jest użycie WPCode. Ten darmowy wtyczka pozwala wyświetlać ten sam baner na każdej stronie i wpisie za pomocą jednej linii kodu.

Podczas dodawania niestandardowego kodu do WordPress niektóre przewodniki poproszą Cię o edycję pliku functions.php Twojej witryny. Nie zalecamy tego, ponieważ nawet mała literówka lub błąd może spowodować typowe błędy WordPress lub nawet uniemożliwić dostęp do Twojej witryny.

Korzystając z WPCode, możesz dodawać niestandardowy kod do plików motywu WordPress bez żadnego ryzyka. Możesz również włączać i wyłączać fragmenty kodu jednym kliknięciem.

Najpierw musisz zainstalować i aktywować darmową wtyczkę WPCode. Aby uzyskać więcej instrukcji, zapoznaj się z naszym przewodnikiem dla początkujących na temat instalowania wtyczki WordPress.

Po aktywacji przejdź do Fragmenty kodu » Dodaj fragment. Następnie kliknij przycisk „+ Dodaj niestandardowy fragment” w sekcji „Dodaj swój niestandardowy kod (nowy fragment)”.

Następnie musisz wybrać „Fragment kodu HTML” jako typ kodu z listy opcji, które pojawią się na ekranie.

Spowoduje to przejście do strony „Utwórz niestandardowy fragment kodu”, gdzie możesz wpisać nazwę dla fragmentu kodu.

To tylko dla Twojej wiadomości, więc możesz użyć czegokolwiek chcesz.

Do następnego kroku będziesz potrzebować identyfikatora swojej aplikacji.

Aby uzyskać te informacje, otwórz nową kartę przeglądarki i przejdź do strony Apple Services Marketing Tools. Tutaj wpisz nazwę aplikacji, którą chcesz promować, i kliknij ikonę „Szukaj”.

Aby zobaczyć wszystkie aplikacje z systemem iOS pasujące do Twojego terminu wyszukiwania, po prostu przewiń do sekcji „Aplikacje”.

Tutaj znajdź aplikację, którą chcesz promować i kliknij ją.

Na dole ekranu zobaczysz „Link do treści”.

Identyfikator aplikacji to wartość między id a ?. Będziesz potrzebować tych informacji w następnym kroku, więc pozostaw tę kartę otwartą lub zanotuj identyfikator aplikacji.

Teraz, gdy masz już identyfikator aplikacji, wróć do pulpitu WordPress.

Możesz teraz dodać następujący fragment do edytora kodu, zastępując identyfikator aplikacji informacjami, które uzyskałeś w poprzednim kroku:

<meta name="apple-itunes-app" content="app-id=12345678">

Po wykonaniu tej czynności przewiń do pola „Wstawienie”.

Jeśli nie jest jeszcze zaznaczone, kliknij „Automatyczne wstawianie”, a następnie wybierz „Nagłówek całej witryny” z menu rozwijanego.

Kiedy będziesz gotowy, przewiń na górę strony i przełącz przełącznik „Nieaktywny” na „Aktywny”.

Na koniec wystarczy kliknąć przycisk „Zapisz fragment”, aby zachować zmiany.

Teraz inteligentny baner aplikacji pojawi się na Twojej stronie WordPress.

Jak wyświetlać różne banery na określonych stronach i wpisach

Jak widziałeś, łatwo jest dodać inteligentny baner do WordPressa za pomocą WPCode.

Ale co, jeśli chcesz promować różne aplikacje na różnych stronach?

Na przykład, być może prowadzisz bloga o stylu życia i masz aplikację z przepisami, którą chcesz promować w swoich wpisach związanych z jedzeniem. Jednocześnie możesz mieć aplikację fitness, którą chcesz promować na swoich stronach treningowych.

W takim przypadku zalecamy uaktualnienie do WPCode Premium (od 49 USD rocznie). Ten wtyczka posiada inteligentną logikę warunkową, która pozwala precyzyjnie kontrolować, gdzie każdy fragment kodu jest uruchamiany. Oznacza to, że możesz tworzyć wiele inteligentnych banerów aplikacji, a następnie wyświetlać je na dowolnej stronie lub wpisie. 

Najpierw przejdź na stronę WPCode i kup subskrypcję. Następnie możesz ją zainstalować, tak jak każdą inną wtyczkę WordPress.

Po tym przejdź do WPCode » Ustawienia w swoim panelu WordPress i wprowadź swój klucz licencyjny.

Informacje te znajdziesz, logując się na swoje konto na stronie WPCode lub sprawdzając e-mail z potwierdzeniem zakupu, który otrzymałeś przy zakupie WPCode. 

Po wykonaniu tej czynności przejdź do Fragmenty kodu » Dodaj fragment w swoim panelu WordPress. Tutaj najedź kursorem na sekcję „Dodaj własny kod”.

Gdy się pojawi, wybierz „Dodaj własny fragment”.

W kolejnym panelu kliknij „Fragment HTML”.

Następnie nadaj swojemu fragmentowi opisową nazwę, aby łatwo zidentyfikować promowaną aplikację.

Na przykład, możesz nazwać go „Inteligentny baner aplikacji – aplikacja z przepisami”.

W Edytorze kodu dodaj tag meta dla swojej pierwszej aplikacji.

Upewnij się, że zastąpiłeś identyfikator aplikacji poprawnym dla swojej aplikacji:

<meta name="apple-itunes-app" content="app-id=YOUR_FIRST_APP_ID">

Następnie przewiń do sekcji „Wstawianie” i wybierz „Automatyczne wstawianie”, jeśli nie jest już zaznaczone.

Po tym otwórz menu rozwijane „Lokalizacja” i wybierz „Nagłówek całej witryny”.

Następnie przewiń nieco niżej do sekcji „Inteligentna logika warunkowa”. 

Tutaj kliknij, aby aktywować ustawienie „Włącz logikę”.

Teraz nadszedł czas, aby utworzyć regułę inteligentnej logiki warunkowej.

Aby rozpocząć, otwórz menu rozwijane „Warunki” i wybierz „Pokaż”. Następnie kliknij „Dodaj nową grupę”.

Po tym kliknij pierwsze menu rozwijane (które domyślnie pokazuje „Zalogowany”).

To dodaje zupełnie nową sekcję.

W menu po lewej stronie wybierz „Gdzie”.

Następnie wybierz „Post/Strona”.

Po wykonaniu tej czynności kliknij drugie menu rozwijane i wybierz „Jest jednym z”, jeśli nie jest już zaznaczone.

Na koniec kliknij trzecie pole i wyszukaj konkretną stronę lub wpis, na którym chcesz wyświetlić ten baner aplikacji.

Chcesz pokazać ten baner na wielu stronach lub wpisach? W takim razie po prostu kliknij „Dodaj nową grupę”.

Możesz teraz powtórzyć te kroki, aby wybrać dodatkowe strony lub wpisy.

Gdy będziesz zadowolony z konfiguracji tego fragmentu, przewiń na górę strony i przełącz przełącznik „Nieaktywny” na „Aktywny”. Na koniec kliknij przycisk „Zapisz fragment”, aby zapisać zmiany.

Teraz powtórz ten proces dla każdej dodatkowej aplikacji, którą chcesz promować. 

WPCode będzie teraz wyświetlać odpowiedni inteligentny baner aplikacji na podstawie strony lub wpisu, który odwiedzający aktualnie przegląda.

Jak przetestować kod Smart App Banner w WordPress

Najlepszym sposobem na przetestowanie inteligentnego banera aplikacji jest odwiedzenie Twojej witryny na urządzeniu z systemem iOS przy użyciu mobilnej aplikacji Safari. W rzeczywistości inteligentny baner aplikacji nawet się nie pojawi, jeśli spróbujesz wyświetlić mobilną wersję swojej witryny WordPress z komputera.

Jeśli chcesz szybko sprawdzić, czy fragment kodu działa, jednym z rozwiązań jest użycie narzędzia Inspect tool w przeglądarce. Pozwala ono sprawdzić, czy kod <meta name> został wstawiony do sekcji <head> Twojej witryny, co sugeruje, że działa zgodnie z oczekiwaniami.

Aby to zrobić, przejdź do dowolnej strony lub wpisu na swoim blogu WordPress. Następnie kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierz „Inspect”.

Otworzy się nowy panel, pokazujący cały kod strony.

Po prostu znajdź sekcję <head> i kliknij jej strzałkę, aby ją rozwinąć.

Teraz poszukaj kodu <meta name="apple-itunes-app">, który dodałeś w poprzednim kroku.

Jeśli widzisz ten kod, inteligentny baner aplikacji powinien pojawić się na urządzeniach z systemem iOS.

Metoda 2: Używanie Mobile Smart App Banner (Dodawanie banerów dla iOS i Android)

Jeśli chcesz wtyczki, która obsługuje użytkowników iOS i Android, zalecamy użycie wtyczki Mobile Smart App Banner.

Jest to darmowa wtyczka, która automatycznie wykrywa urządzenie odwiedzającego i wyświetla odpowiedni link do sklepu z aplikacjami. 

Baner zawiera wbudowany przycisk „Zamknij”, dzięki czemu odwiedzający mogą go zamknąć, a także wykorzystuje pliki cookie do zapamiętania tej decyzji.

Pamiętaj, że baner nie będzie wyświetlany przez 7 dni po jego zamknięciu.

Najpierw musisz zainstalować i aktywować wtyczkę Mobile Smart App Banner. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Ustawienia » Mobile Smart App Banner w swoim panelu WordPress.

Tutaj zaznacz pole wyboru obok opcji „Włącz baner aplikacji”, aby aktywować baner na swojej stronie. 

Po wykonaniu tej czynności kliknij przycisk „Prześlij”.

Następnie wybierz obraz, którego chcesz użyć jako ikony aplikacji (zalecamy użycie obrazu o wymiarach 512x512 pikseli).

Możesz również wybrać, gdzie baner ma się pojawić na ekranie, otwierając listę rozwijaną „Pozycja banera” i wybierając opcję z listy.

Odkryliśmy, że umieszczenie banera na dole ekranu jest mniej inwazyjne i często prowadzi do większego zaangażowania.

Następnie możesz wpisać nazwę swojej aplikacji w polu „Nazwa aplikacji” i krótki opis w polu „Podtytuł aplikacji”. 

Następnie dodaj swój link do App Store i link do Play Store w odpowiednich polach.

Jeśli chcesz zmienić wygląd banera, po prostu przewiń do sekcji „Ustawienia kolorów”. 

Tutaj możesz zmienić kolor tła, kolor przycisku, kolor tekstu przycisku i inne, korzystając z różnych ustawień.

Dostępny jest również podgląd w czasie rzeczywistym, dzięki czemu możesz łatwo wypróbować wiele ustawień, aby zobaczyć, co wygląda najlepiej. 

Alternatywnie możesz użyć natywnego banera inteligentnej aplikacji Apple w Safari, odznaczając pole wyboru obok opcji „Włącz natywny baner inteligentnej aplikacji iOS”.

Następnie musisz wprowadzić swój identyfikator App Store, który możesz znaleźć, wykonując te same czynności opisane w Metodzie 1. 

Gdy ta opcja jest włączona, użytkownicy Safari zobaczą natywny baner Apple, podczas gdy użytkownicy Chrome, Firefox i innych przeglądarek iOS zobaczą zamiast tego Twój niestandardowy baner.

Po wykonaniu tej czynności przewiń na dół ekranu i kliknij „Zapisz zmiany”, aby opublikować swój baner.

FAQ dotyczące dodawania inteligentnych banerów aplikacji w WordPress

Jeśli nadal masz pytania, oto nasze najczęściej zadawane pytania dotyczące dodawania inteligentnych banerów do Twojej witryny WordPress.

Czym jest inteligentny baner aplikacji?

Inteligentne banery aplikacji pojawiają się na górze przeglądarki Safari i dają użytkownikom aplikacji możliwość otwarcia aplikacji lub pobrania jej z Apple App Store.

Ponieważ inteligentne banery aplikacji zostały stworzone przez Apple, mają spójny wygląd, który wielu użytkowników systemu iOS rozpoznaje. Pojawiają się one tylko u osób korzystających z iPhone'ów i iPadów z systemem iOS 6 lub nowszym.

Dlaczego nie widzę mojego inteligentnego banera aplikacji na komputerze?

Inteligentny baner aplikacji nie pojawi się na komputerach stacjonarnych, nawet jeśli przeglądasz mobilną wersję swojej witryny.

Aby zobaczyć baner w akcji, musisz odwiedzić swoją witrynę na iPhonie lub iPadzie, korzystając z mobilnej aplikacji Safari.

Dlaczego nie widzę inteligentnego banera aplikacji na moim iPhonie lub iPadzie?

Inteligentne banery aplikacji pojawiają się tylko na urządzeniach z systemem iOS 6 lub nowszym, gdy korzystasz z mobilnej aplikacji Safari. Jeśli nie widzisz inteligentnego banera aplikacji, zacznij od sprawdzenia, czy masz najnowsze wersje zarówno systemu iOS, jak i mobilnej aplikacji Safari.

Inteligentny baner aplikacji wykrywa również, czy urządzenie obsługuje aplikację i czy aplikacja jest dostępna w Twojej lokalizacji. Jeśli nie widzisz inteligentnego banera aplikacji, możliwe, że Twoje urządzenie nie przeszło jednego z tych sprawdzeń.

Dlaczego inteligentny baner aplikacji zniknął w Safari?

Jeśli odrzucisz baner, klikając przycisk „x”, domyślnie nie pojawi się on ponownie.

W zależności od urządzenia mobilnego może być konieczne otwarcie prywatnej karty przeglądarki, wyczyszczenie pamięci podręcznej lub plików cookie, lub wykonanie innej czynności w celu zresetowania ustawień.

Czy inteligentne banery aplikacji działają na urządzeniach z systemem Android?

Nie, natywne inteligentne banery aplikacji Apple są dostępne wyłącznie na urządzeniach z systemem iOS korzystających z przeglądarki Safari. Android nie ma wbudowanego odpowiednika.

Możesz jednak użyć wtyczki WordPress, takiej jak Mobile Smart App Banner, aby wyświetlać niestandardowe banery pobierania aplikacji odwiedzającym Androida.

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak dodawać inteligentne banery aplikacji w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat najlepszych praktyk dotyczących wezwań do działania lub naszymi ekskluzywnymi wyborami najlepszych narzędzi do generowania leadów w WordPress, które przyspieszą konwersje.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.