Så här lägger du enkelt till banners för smarta appar 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 på är med smarta app-banners. Dessa eleganta små banners visas sömlöst högst upp på din webbplats när de visas på iPhones och iPads, och uppmanar försiktigt besökare att antingen ladda ner din app eller öppna den om de redan har den.

Smarta app-banners är ett fantastiskt sätt att öka nedladdningarna, hålla användarna engagerade och ge en sömlös mobilupplevelse. Om du vill lära dig mer har vi hittat två enkla metoder för att lägga till dem på din WordPress-webbplats.

Varför add to Smart App Banners i WordPress?

Många website-ägare skapar en tillhörande mobil app där besökarna kan browsa deras content på ett sätt som är optimerat för mobilen.

Eftersom dessa appar är utformade för mobila enheter ger de ofta en bättre upplevelse för användarna. Du kan också visa påminnelser, personligt content, erbjudanden, updates och mycket mer med hjälp av mobila push notifications. Allt detta innebär mer engagement, konverteringar och försäljning.

Om du inte redan har en mobilapp kan du läsa vår kompletta guide om hur du konverterar en WordPress website till en mobilapp.

Du kan uppmuntra iPhone- och iPad-användare att downloada din mobila app med hjälp av en smart app-banner. Det här är en banner som visas högst upp på vyn när en iOS-användare besöker din site med webbläsaren Safari.

Besökare kan clicka på bannern för att downloada 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 downloads och engagemang för din app.

Om besökaren använder en annan device än Apple eller en annan web browser döljer WordPress automatiskt bannern för besökaren.

Exempelvis visar följande image samma website i den mobila webbläsaren Chrome.

Med detta sagt, låt oss se hur du kan add to banners för smarta appar i WordPress. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:

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

Det enklaste sättet att add to smarta app-banners till din WordPress website är genom att använda WPCode. Detta gratis plugin allow you att visa samma banner på varje page och post med hjälp av en rad kod.

Med detta i åtanke är WPCode det perfekta valet om du vill främja en enda iOS-applikation. Men om du vill visa olika banners på olika pages 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 webbplatsens functions.php-fil. Vi rekommenderar inte detta, eftersom även ett litet skrivfel eller 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 custom code till dina WordPress theme-filer utan några risker. Du kan också aktivera och inaktivera code snippets med ett klick på en knapp.

Först måste du installera och aktivera det gratis pluginet WPCode. För mer instruktioner, vänligen se vår guide för nybörjare om hur man installerar ett plugin för WordPress.

När du är aktiverad, head to Code Snippets ” Add Snippet. Klicka sedan på knappen ”Use Snippet” under alternativet ”Add Your Custom Code (New Snippet)”.

Detta tar dig till sidan ”Create Custom Snippet”, där du kan skriva in ett namn för code snippet. Detta är bara för din referens, så du kan använda vad du vill.

Efter det öppnar du dropdown ’Code Type’ och väljer ’HTML Snippet’.

För nästa steg behöver du veta ID:n för din ansökan.

För att få denna information, öppna en ny webbläsare tab och head till Apple Services Marketing Tools page. Här skriver du in namnet på den applikation du vill främja och klickar på ikonen ”Search”.

För att se alla iOS-appar som matchar din search term, rulla bara till ”Apps” section.

Här hittar du den app som du vill främja och ger den ett click.

Längst ner på vyn ser du en ”Content Link”.

Appens ID är värdet mellan id och ? Du behöver den här informationen i nästa steg, så lämna antingen den här tabben öppen eller obs/observera appens ID.

Nu när du har ID:n för appen kan du gå tillbaka till WordPress dashboard. Du kan nu add to följande snippet i code snippet editor och ersätta appens ID:n med den information du fick i föregående steg:

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

När det är gjort måste du rulla till boxen ”Insertion”. Om det inte redan är valt, klicka på ”Auto Insert” och välj sedan ”Site Wide Header” från dropdown-menyn.

När du är klar rullar du högst upp på sidan och togglar omkopplaren ”Inaktiverad” till ”Aktiv”.

Slutligen klickar du bara på knappen ”Save Snippet” för att lagra dina ändringar.

Nu visas banners för smarta appar på din website WordPress.

Så här testar du koden för Smart App Banner i WordPress

Det bästa sättet att testa smart app-bannern är att besöka din website på en iOS device med Safari mobile app. Faktum är att den smarta app-bannern inte ens kommer att visas om du försöker viewa mobilversionen av din WordPress site från skrivbordet.

Om du snabbt behöver kontrollera om code snippet fungerar är en lösning att använda din webbläsares Inspect-verktyg. Det allow you att se om <meta name>-koden har infogats i din sites <head>-section, vilket tyder på att den fungerar som förväntat.

Detta gör du genom att gå till en page eller ett post på din WordPress blogg. Högerklicka sedan var som helst på page och välj ”Inspect”.

En new panel öppnas som visar all kod på webbplatsen.

Hitta bara <head> section och klicka på pilen för att förstora.

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

Om du ser den här koden ska bannern för smarta appar visas på iOS-enheter.

Metod 2: Använda Smart App Banner (Add Banners till specifika sidor och poster)

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

I det här fallet rekommenderar vi att du använder tillägget Smart App Banner. Detta plugin allow you att visa olika banners på olika pages 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 tillägget Smart App Banner. Om du behöver hjälp kan du vänligen läsa vår guide om hur du installerar ett plugin för WordPress.

När du aktiverat den kan du add to en app-banner på specifika pages eller posts, på WordPress homepage eller på hela din website.

Låt oss börja med att 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å högkonverterande målsidor.

Börja med att gå till Settings ” Smart App Banner och skriv applikationens värde i fältet ”App ID:n”.

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 på att blogga online 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.

Efter det kan du antingen kontrollera boxen ”Show on all pages” eller låta den vara avmarkerad. Om du lämnar boxen avmarkerad kommer appens banner bara att visas på din homepage.

När du är nöjd med hur bannern är konfigurerad klickar du bara på knappen ”Save Changes” för att aktivera den.

Vill du istället add a smart app banner till specifika pages och posts? This allows you to control exactly where the banner appears on your website.

Om du till exempel är en affiliate-marknadsförare kan du främja olika appar på olika pages och sedan använda Google Analytics för att se vilka banners som ger flest konverteringar.

För att göra detta öppnar du helt enkelt den sida eller det inlägg där du vill lägga till bannern. Nu hittar du det nya avsnittet ”Smart App Banner” i WordPress innehållsredigerare.

Här lägger du bara till appens ID:n och valfri information om affiliate genom att följa samma process som beskrivs ovan.

När du är nöjd med den information du har enter klickar du bara på ”Update” eller ”Publicera” för att dina ändringar ska börja gälla.

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

Vanliga frågor om att lägga till banners för smarta appar i WordPress

Om du fortfarande har frågor, här är våra högst upp Vanliga frågor om hur du addar smarta banners till din WordPress website.

Vad är en smart app-banner?

Banners för smarta appar visas högst upp i webbläsaren Safari och ger appens användare alternativet att öppna en app eller downloada den från Apple App Store.

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

Varför kan jag inte se bannern för min smarta app på skrivbordet?

Bannern för smarta appar visas inte på stationära datorer, även om you view the mobile version of your site.

För att se bannern i action måste du besöka din site på en iPhone eller iPad med Safari mobil app.

Varför kan jag inte se bannern för smarta appar på min iPhone eller iPad?

Banners för smarta appar visas bara på enheter som run iOS 6 eller högre när du använder Safari-appen. Om du inte ser banderollen för smarta appar bör du börja med att kontrollera att du har de senaste versionerna av både iOS och Safari-appen.

Smart app-bannern upptäcker också om enheten kan stödja appen och om appen är available på your location. Om du inte ser bannern för smarta appar är det möjligt att din device har misslyckats med någon av dessa kontroller.

Varför har bannern för smarta appar försvunnit i Safari?

Om du dismissar bannern genom att clicka på knappen ”x” kommer den inte att visas igen som standard.

Beroende på din mobila enhet kan du behöva öppna en privat tabb i webbläsaren, clear din cache eller cookies eller utföra någon annan action för att återställa dina inställningar.

Vi hoppas att denna handledning 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 uppmaning till handling eller våra expertval för de bästa WordPress-verktygen för lead magnet för att öka konverteringarna.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.