Hur man enkelt lägger till smarta app-banderoller i WordPress

Vi har fått många frågor från apputvecklare: finns det ett sätt att marknadsföra våra mobilappar direkt från vår WordPress-webbplats? Svaret är ja, och det är enklare än du kanske tror.

Ett av de enklaste sätten att göra detta är med smarta app-banners. Dessa eleganta små banners visas sömlöst överst på din webbplats när de visas på iPhones och iPads.

De är inte irriterande som pop-ups – istället smälter de naturligt in på din webbplats och ger besökarna en mild knuff att ladda ner eller öppna din app. Resultatet? Fler nedladdningar, bättre användarengagemang och en mer professionell mobilupplevelse.

Vi har testat olika metoder för att lägga till dessa banners i WordPress och hittat två metoder som fungerar perfekt för alla kunskapsnivåer. Oavsett om du föredrar ett plugin eller vill lägga till lite enkel kod, guidar vi dig genom båda alternativen steg för steg.

Varför lägga till smarta app-banners i WordPress?

Många webbplatsägare skapar en kompletterande mobilapp där besökare kan bläddra bland sitt innehåll på ett sätt som är optimerat för mobilen.

Eftersom dessa appar är designade för mobila enheter, erbjuder de ofta en bättre användarupplevelse. Du kan också visa påminnelser, personligt innehåll, erbjudanden, uppdateringar och mer med hjälp av push-meddelanden för mobila enheter. Allt detta innebär mer engagemang, konverteringar och försäljning.

Du kan uppmuntra iPhone- och iPad-användare att ladda ner din mobilapp med hjälp av en smart app-banner. Detta är en banner som visas högst upp på skärmen när en iOS-användare besöker din webbplats med Safari-webbläsaren.

Besökare kan klicka på bannern för att ladda ner din app från App Store. Om besökaren redan har din app, kommer bannern att be dem att öppna appen istället. På så sätt kan du få fler appnedladdningar och engagemang.

Om besökaren använder en icke-Apple-enhet eller en annan webbläsare, kommer WordPress automatiskt att dölja banderollen för dem.

Till exempel visar följande bild samma webbplats i Chrome mobilwebbläsare.

Med det sagt, låt oss se hur du kan lägga till smarta app-banners i WordPress. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

• Metod 1: Använda WPCode (Visa en Smart App Banner över hela WordPress)
• Metod 2: Använda Smart App Banner (Lägg till banners på specifika sidor och inlägg)
• Vanliga frågor om att lägga till smarta appbanderoller i WordPress

Metod 1: Använda WPCode (Visa en Smart App Banner över hela WordPress)

Det enklaste sättet att lägga till smarta app-banners på din WordPress-webbplats är att använda WPCode. Detta kostnadsfria plugin låter dig visa samma banner på varje sida och inlägg med en enda kodrad.

Med detta i åtanke är WPCode det perfekta valet om du vill marknadsföra en enskild iOS-applikation. Men om du vill visa olika banners på olika sidor rekommenderar vi att du använder metod 2 istället.

När du lägger till anpassad kod i WordPress, kommer vissa guider att be dig att redigera din webbplats functions.php-fil. Vi rekommenderar inte detta, eftersom även en liten felskrivning eller ett misstag kan orsaka vanliga WordPress-fel eller till och med göra din webbplats otillgänglig.

Genom att använda WPCode kan du lägga till anpassad kod i dina WordPress-temafiler utan några risker. Du kan också aktivera och inaktivera kodavsnitt med ett knapptryck.

Först måste du installera och aktivera det kostnadsfria WPCode-pluginet. För fler instruktioner, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

När du har aktiverat, gå till Kodavsnitt » Lägg till kodavsnitt. Klicka sedan på knappen ‘+ Lägg till anpassat kodavsnitt’ under alternativet ‘Lägg till din anpassade kod (nytt kodavsnitt)’.

Välj sedan ‘HTML Snippet’ som kodtyp från listan över alternativ som visas på skärmen.

Detta tar dig till sidan 'Skapa anpassat kodavsnitt', där du kan skriva in ett namn för kodavsnittet.

Detta är bara för din referens, så du kan använda vad du vill.

För nästa steg behöver du känna till ditt programs ID.

För att få denna information, öppna en ny flik i webbläsaren och gå till sidan Apple Services Marketing Tools. Skriv här in namnet på applikationen du vill marknadsföra och klicka på ikonen ‘Search’.

För att se alla iOS-appar som matchar din sökterm, scrolla helt enkelt till avsnittet 'Appar'.

Här hittar du appen du vill marknadsföra och klickar på den.

Längst ner på skärmen ser du en 'Innehållslänk'.

App-ID:t är värdet mellan id och ?. Du behöver denna information i nästa steg, så antingen lämna denna flik öppen eller anteckna app-ID:t.

Nu när du har app-ID:t, byt tillbaka till WordPress-instrumentpanelen. Du kan nu lägga till följande kodavsnitt i kodredigeraren och ersätta app-ID:t med den information du fick i föregående steg:

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

När det är gjort, scrolla till rutan 'Infogning'. Om det inte redan är valt, klicka på 'Automatisk infogning' och välj sedan 'Webbplatsomfattande sidhuvud' från rullgardinsmenyn.

När du är redo, scrolla till toppen av sidan och växla 'Inaktiv' till 'Aktiv'.

Slutligen klickar du bara på knappen 'Spara kodavsnitt' för att lagra dina ändringar.

Nu kommer den smarta app-bannern att visas på din WordPress-webbplats.

Hur man testar Smart App Banner-koden i WordPress

Det bästa sättet att testa den smarta app-bannern är att besöka din webbplats på en iOS-enhet med mobilappen Safari. Faktum är att den smarta app-bannern inte ens visas om du försöker visa mobilversionen av din WordPress-webbplats från datorn.

Om du snabbt behöver kontrollera om kodavsnittet fungerar, är en lösning att använda webbläsarens Inspektera-verktyg. Det låter dig se om <meta name>-koden har infogats i din webbplats <head>-sektion, vilket tyder på att det fungerar som förväntat.

För att göra detta, gå till valfri sida eller inlägg på din WordPress-blogg. Högerklicka sedan var som helst på sidan och välj ‘Inspect’.

En ny panel öppnas och visar all kod för webbplatsen.

Hitta helt enkelt sektionen <head> och klicka på dess pil för att expandera.

Leta nu efter <meta name="apple-itunes-app">-koden som du lade till i föregående steg.

Om du ser den här koden, bör den smarta appbanderollen visas på iOS-enheter.

Metod 2: Använda Smart App Banner (Lägg till banners på specifika sidor och inlägg)

Ibland kanske du bara vill marknadsföra appar på specifika sidor och inlägg.

I detta fall rekommenderar vi att du använder pluginet Smart App Banner. Detta plugin låter dig visa olika banners på olika webbsidor och inkludera affiliate-data i dessa banners. Dessa funktioner gör det till ett utmärkt plugin för affiliate-marknadsförare.

Först måste du installera och aktivera pluginet Smart App Banner. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

När du har aktiverat kan du lägga till en app-banner på specifika sidor eller inlägg, WordPress startsida eller över hela din webbplats.

För att börja, låt oss titta på appens inställningar. Här kan du lägga till en banner på varje sida och inlägg eller lägga till en smart app-banner endast på landningssidor med hög konvertering.

För att börja, gå till Inställningar » Smart App Banner och ange appens värde i fältet 'App-ID'.

Du kan få denna information genom att följa samma process som beskrivs i Metod 1.

Om du använder affiliate-marknadsföring för att tjäna pengar online genom att blogga, kan du skriva in din affiliate-token i fältet ‘Affiliate data’. Informationen varierar, så du kan behöva logga in på din affiliate-portal eller prata med dina partners för att få rätt token.

Därefter kan du antingen markera rutan 'Visa på alla sidor' eller låta den vara omarkerad. Om du låter rutan vara omarkerad, kommer appbanderollen endast att visas på din startsida.

När du är nöjd med hur bannern är inställd, klickar du helt enkelt på knappen 'Spara ändringar' för att göra den live.

Vill du lägga till en smart appbanderoll på specifika sidor och inlägg istället? Detta gör att du kan styra exakt var banderollen visas på din webbplats.

Till exempel, om du är en affiliate-marknadsförare, kan du marknadsföra olika appar på olika sidor och sedan använda Google Analytics för att se vilka banners som ger flest konverteringar.

För att göra detta, öppna helt enkelt sidan eller inlägget där du vill lägga till bannern. Hitta nu det nya avsnittet ‘Smart App Banner’ i WordPress innehållsredigerare.

Lägg här bara till app-ID:t och valfri affiliate-information genom att följa samma process som beskrivs ovan.

När du är nöjd med den information du har angett, klickar du bara på 'Uppdatera' eller 'Publicera' för att göra dina ändringar live.

Sedan kan du helt enkelt upprepa dessa steg för att lägga till en smart app-banner på dina andra landningssidor.

Vanliga frågor om att lägga till smarta appbanderoller i WordPress

Om du fortfarande har frågor, här är våra vanligaste FAQ om hur du lägger till smarta banners på din WordPress-webbplats.

Vad är en smart app-banner?

Smarta app-banners visas högst upp i Safari-webbläsaren och ger appanvändare möjlighet att öppna en app eller ladda ner den från Apple App Store.

Eftersom de skapades av Apple har smarta appbanderoller en konsekvent design som många iOS-användare känner igen. De visas bara för personer som använder iPhones och iPads med iOS 6 eller senare.

Varför kan jag inte se min smarta app-banner på datorn?

Den smarta appbanderollen visas inte på stationära datorer, även om du visar mobilversionen av din webbplats.

För att se bannern i aktion måste du besöka din webbplats på en iPhone eller iPad med mobilappen Safari.

Varför kan jag inte se den smarta app-bannern på min iPhone eller iPad?

Smarta app-banners visas bara på enheter som kör iOS 6 eller senare när du använder mobilappen Safari. Om du inte ser den smarta app-bannern bör du först kontrollera att du har de senaste versionerna av både iOS och mobilappen Safari.

Den smarta app-bannern upptäcker också om enheten kan stödja appen och om appen finns tillgänglig på din plats. Om du inte ser den smarta app-bannern, är det möjligt att din enhet har misslyckats med en av dessa kontroller.

Varför har den smarta app-bannern försvunnit i Safari?

Om du stänger bannern genom att klicka på 'x'-knappen, kommer den inte att visas igen som standard.

Beroende på din mobila enhet kan du behöva öppna en privat webbläsarflik, rensa din cache eller cookies, eller utföra någon annan åtgärd för att återställa dina inställningar.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till smarta app-banners i WordPress. Du kanske också vill se vår guide om bästa praxis för call-to-action eller våra experters val för bästa WordPress-verktyg för lead magnets för att öka konverteringar.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.