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

Vi har fått många apputvecklare som frågar oss: finns det ett sätt att marknadsföra mobilappar direkt från din 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-banderoller. Dessa banderoller visas överst på din webbplats när de visas på iPhones och iPads, och uppmuntrar besökare att ladda ner eller öppna din app. Du kan till och med visa banderoller för Android-användare med rätt plugin.

Smarta app-banderoller är inte irriterande som popup-fönster. 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 banderoller i WordPress och hittat två metoder som fungerar perfekt för alla kunskapsnivåer.

Den första använder ett enkelt kodavsnitt för att lägga till Apples inbyggda iOS-banderoll, medan den andra använder ett plugin som stöder både iOS- och Android-enheter med fullständig designanpassning. Vi guidar dig genom båda alternativen steg för steg.

TLDR Snabb sammanfattning: Smarta app-banderoller är inbyggda iOS-banderoller som visas i Safari och uppmuntrar besökare att ladda ner eller öppna din app. Det enklaste sättet att lägga till dem i WordPress är med ett gratis plugin som heter WPCode.

Om du också vill visa banderoller för Android-användare kan du använda pluginet Mobile Smart App Banner, som stöder båda plattformarna och låter dig anpassa banderollens design helt.

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

Att använda en smart app-banderoll på din WordPress-webbplats kan hjälpa dig att få fler nedladdningar och köp av din mobilapp.

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 utformade för mobila enheter ger de ofta en bättre användarupplevelse. Du kan också visa påminnelser, personligt anpassat innehåll, erbjudanden, uppdateringar och mer med hjälp av push-notiser för mobila enheter. Allt detta innebär ökat engagemang, fler konverteringar och ökad försäljning.

Du kan uppmuntra iPhone- och iPad-användare att ladda ner din mobilapp med hjälp av en smart app-banderoll.

Detta är en banderoll 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 Apples inbyggda smarta app-banderoll inte att visas.

Men, som vi kommer att visa dig i Metod 2, kan du använda ett plugin för att visa appnedladdningsbanderoller för Android-användare och besökare som använder andra webbläsare också.

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)

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

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 ett litet stavfel 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 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 den kostnadsfria WPCode-pluginen. För fler instruktioner, se vår nybörjarguide om hur man installerar en 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å "Sök"-ikonen.

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 ner till rutan 'Infogning'.

Om det inte redan är valt, klicka på 'Auto Insert' och välj sedan 'Site Wide Header' 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 visar olika banderoller på specifika sidor och inlägg

Som du har sett är det enkelt att lägga till en smart banderoll i WordPress med WPCode.

Men tänk om du vill marknadsföra olika appar på olika sidor?

Till exempel, kanske du driver en livsstilsblogg och har en receptapp som du vill marknadsföra i dina matrelaterade inlägg. Samtidigt kanske du har en träningsapp som du vill marknadsföra på dina träningssidor.

I det här fallet rekommenderar vi att du uppgraderar till WPCode Premium (från 49 USD/år). Det här tillägget har smart villkorsstyrd logik som låter dig styra exakt var varje kodavsnitt körs. Det innebär att du kan skapa flera smarta app-banderoller och sedan visa dem på valfri sida eller inlägg. 

Gå först till WPCode-webbplatsen och köp en prenumeration. Du kan sedan installera den, precis som vilket annat WordPress-tillägg som helst.

Gå sedan till WPCode » Inställningar i din WordPress-instrumentpanel och ange din licensnyckel.

Du hittar den här informationen genom att logga in på ditt konto på WPCode-webbplatsen, eller genom att kontrollera köpbekräftelsemejlet du fick när du köpte WPCode. 

När det är gjort, gå till Kodavsnitt » Lägg till avsnitt i din WordPress-instrumentpanel. Håll muspekaren över avsnittet 'Lägg till din anpassade kod'.

När det visas, välj 'Lägg till anpassat avsnitt'.

I panelen som följer, klicka på 'HTML-avsnitt'.

Ge sedan ditt avsnitt ett beskrivande namn så att du enkelt kan identifiera vilken app det marknadsför.

Du kan till exempel namnge det 'Smart app-banderoll – receptapp'.

I kodredigeraren, lägg till metataggen för din första app.

Se till att du ersätter app-ID med det korrekta för din applikation:

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

Rulla sedan till avsnittet 'Infogning' och välj 'Automatisk infogning', om det inte redan är valt.

Öppna sedan rullgardinsmenyn 'Plats' och välj 'Hela webbplatsens sidhuvud'.

Rulla sedan ner lite till för avsnittet 'Smart villkorsstyrd logik'. 

Klicka här för att aktivera inställningen 'Aktivera logik'.

Nu är det dags att skapa din regel för smart villkorsstyrd logik.

Till att börja med, öppna rullgardinsmenyn 'Villkor' och välj 'Visa'. Klicka sedan på 'Lägg till ny grupp'.

Klicka sedan på den första rullgardinsmenyn (som visar 'Inloggad' som standard).

Detta lägger till ett helt nytt avsnitt.

I menyn till vänster, välj 'Var'.

Välj sedan 'Inlägg/sida'.

När det är gjort, klicka på den andra rullgardinsmenyn och välj 'Är en av', om det inte redan är valt.

Klicka slutligen på det tredje fältet och sök efter det specifika inlägget eller sidan där du vill visa den här app-banderollen.

Vill du visa den här banderollen på flera sidor eller inlägg? Klicka sedan helt enkelt på 'Lägg till ny grupp'.

Du kan nu upprepa dessa steg för att välja ytterligare inlägg eller sidor.

När du är nöjd med hur det här avsnittet är inställt, rulla till toppen av sidan och växla omkopplaren 'Inaktiv' till 'Aktiv'. Klicka slutligen på knappen 'Spara avsnitt' för att lagra dina ändringar.

Upprepa nu den här processen för varje ytterligare app du vill marknadsföra. 

WPCode kommer nu att visa rätt smart app-banderoll baserat på den sida eller det inlägg som besökaren för närvarande tittar på.

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 kommer att 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 den 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 "Inspektera".

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 Mobile Smart App Banner (Lägg till banderoller för iOS och Android)

Om du vill ha ett tillägg som stöder både iOS- och Android-användare, rekommenderar vi att du använder tillägget Mobile Smart App Banner.

Det är ett gratis tillägg som automatiskt upptäcker besökarens enhet och visar rätt länk till appbutiken. 

Bannern innehåller en inbyggd ‘Stäng’-knapp så att besökare kan stänga bannern, och den använder cookies för att komma ihåg detta beslut.

Tänk på att bannern inte visas på 7 dagar efter att den stängts.

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

Efter aktivering, gå till Inställningar » Mobile Smart App Banner i din WordPress-instrumentpanel.

Här markerar du rutan bredvid alternativet ‘Aktivera app-banner’ för att aktivera bannern på din webbplats. 

När det är gjort, klickar du på knappen ‘Ladda upp’.

Välj sedan den bild du vill använda som din appikon (vi rekommenderar att använda en bild som är 512x512px).

Du kan också välja var bannern visas på skärmen genom att öppna rullgardinsmenyn ‘Bannerposition’ och välja ett alternativ från listan.

Vi har funnit att placering av bannern längst ner på skärmen är mindre påträngande och kan ofta leda till högre engagemang.

Efter det kan du skriva in ditt appnamn i fältet ‘Appnamn’ och ange en kort beskrivning i rutan ‘Appens undertitel’. 

Lägg sedan till din App Store-länk och Play Store-länk i de korrekta fälten.

Om du vill ändra hur bannern ser ut, scrolla bara till avsnittet ‘Färginställningar’. 

Här kan du ändra bakgrundsfärg, knappfärg, knapptextfärg och mer, med hjälp av de olika inställningarna.

Det finns också en förhandsgranskning i realtid, så att du enkelt kan prova många inställningar för att se vad som ser bäst ut. 

Alternativt kan du använda Apples inbyggda smarta app-banner i Safari, genom att avmarkera rutan bredvid ‘Aktivera iOS Smart App Banner’.

Du måste sedan ange ditt App Store ID, som du hittar med samma process som beskrivs i Metod 1. 

När detta är aktiverat kommer Safari-användare att se Apples inbyggda banner, medan användare på Chrome, Firefox och andra iOS-webbläsare kommer att se din anpassade banner istället.

När det är gjort, scrolla till botten av skärmen och klicka på ‘Spara ändringar’ för att göra din banner live.

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.

Fungerar smarta app-banners på Android-enheter?

Nej, Apples inbyggda smarta app-banners är exklusiva för iOS-enheter som använder Safari-webbläsaren. Android har ingen inbyggd motsvarighet.

Du kan dock använda ett WordPress-plugin som Mobile Smart App Banner för att visa anpassade appnedladdningsbanners för Android-besökare.

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 experttips för de bästa WordPress lead magnet-verktygen för att öka konverteringarna.

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