Landningssidor landing-pages

Med funktionen för landningssidor kan du snabbt och enkelt importera en design och ett innehåll direkt till en AEM sida. En webbutvecklare kan förbereda HTML och ytterligare resurser som kan importeras som en hel sida eller som endast en del av en sida. Funktionen är användbar för att skapa landningssidor för marknadsföring som bara är aktiva under en begränsad tid och som behöver skapas snabbt.

På den här sidan beskrivs följande:

Förberedelsen av designpaketet för import beskrivs i Utöka och konfigurera designimporteraren. Integrering med Adobe Analytics beskrivs i Integrera landningssidor med Adobe Analytics.

Vad är landningssidor? what-are-landing-pages

Landningssidor är ensidiga eller flersidiga webbplatser som utgör"slutpunkten" för en marknadsföringsstrategi, till exempel med e-post, lösenord/banners, sociala medier. En landningssida kan tjäna olika syften, men alla har en sak gemensamt - besökaren bör utföra en uppgift och som definierar landningssidans framgång.

Med funktionen för landningssidor i AEM kan marknadsförare arbeta med webbdesigners på byråer eller interna kreativa team för att skapa siddesign som enkelt kan importeras till AEM och fortfarande kan redigeras av marknadsförarna och publiceras under samma ledning som resten av de AEM sajterna.

I AEM skapar du landningssidor genom att utföra följande steg:

Startsidor för datorer desktop-landing-pages

En exempellandningssida i AEM ser ut så här:

Mobila landningssidor mobile-landing-pages

En landningssida kan också ha en mobilversion av sidan. Om du vill ha en separat mobilversion av landningssidan måste importdesignen ha två html-filer: index.htm(l) och mobile.index.htm(l).

Importproceduren för landningssidan är densamma som för en normal landningssida. Designen för landningssidan har en extra HTML-fil som motsvarar den mobila landningssidan. Även den här HTML-filen måste ha en arbetsyta div med id=cqcanvas precis som startsidan för skrivbordslayouten HTML och den stöder alla redigerbara komponenter som beskrivs för startsidan för skrivbordslayouten.

Startsidan för mobilen skapas som en underordnad sida till startsidan för skrivbordslandningen. Du öppnar den genom att navigera till landningssidan på webbplatser och öppna den underordnade sidan.

Startsideskomponenter landing-page-components

Om du vill göra delar av HTML som importeras redigerbara i AEM kan du mappa innehåll på landningssidorna HTML till AEM direkt. Designimporteraren förstår följande komponenter som standard:

Dessutom kan du utöka detta och ge stöd för anpassade komponenter. I det här avsnittet beskrivs komponenterna i detalj.

Text text

Med komponenten Text kan du ange ett textblock med en WYSIWYG-redigerare. Mer information finns i Textkomponent.

Följande är ett exempel på en textkomponent på en landningssida:

Titel title

Med titelkomponenten kan du visa en titel och konfigurera storleken (h1-6). Mer information finns i Titelkomponent.

Följande är ett exempel på en titelkomponent på en landningssida:

Bild image

I bildkomponenten visas en bild som du antingen kan dra och släppa från Innehållssökning eller klicka för att överföra. Mer information finns i bildkomponenten.

Följande är ett exempel på en bildkomponent på en landningssida:

Call to Action (CTA) call-to-action-cta

En landningssiddesign kan ha flera länkar - vissa av dessa kan vara avsedda som"Anrop till åtgärd".

Call to action (CTA) används för att få besökaren att vidta omedelbara åtgärder på landningssidan, som"Subscribe Now","View this video","Limited Time Only" och så vidare.

Båda CTA-komponenterna har liknande alternativ. Klicka genom länk har ytterligare RTF-alternativ. Komponenterna beskrivs i detalj i följande stycken.

Klicka genom länken click-through-link

Denna CTA-komponent kan användas för att lägga till en textlänk på landningssidan. Länken kan klickas för att ta användaren till den mål-URL som anges i komponentegenskaperna. Det ingår i gruppen"Call to Action".

Etikett Den text som användarna ser. Du kan ändra formateringen med textredigeraren.

Mål-URL Ange den URI som du vill att användarna ska besöka om de klickar på texten.

Återgivningsalternativ Beskriver återgivningsalternativ. Du kan välja bland följande:

CSS Ange en sökväg till din CSS-formatmall på fliken Format.

ID På fliken Format anger du ett ID för komponenten så att den identifieras unikt.

Följande är ett exempel på en klickning genom länken:

Grafisk länk graphical-link

CTA-komponenten kan användas för att lägga till grafik med länk på landningssidan. Bilden kan vara en enkel knapp eller en grafisk bild som bakgrund. När användaren klickar på bilden dirigeras användaren till den mål-URL som anges i komponentegenskaperna. Det ingår i gruppen Call to Action.

Etikett Den text som användarna ser i bilden. Du kan ändra formateringen med textredigeraren.

Mål-URL Ange den URI som du vill att användarna ska besöka om de klickar på bilden.

Återgivningsalternativ Beskriver återgivningsalternativ. Du kan välja bland följande:

CSS Ange en sökväg till din CSS-formatmall på fliken Format.

ID På fliken Format anger du ett ID för komponenten så att den identifieras unikt.

Här följer ett exempel på en grafisk länk:

Handläggningsblankett call-to-action-cta-lead-form

Ett lead-formulär är ett formulär som används för att samla in profilinformation för en besökare/lead. Denna information kan lagras och användas senare för att skapa en effektiv marknadsföring utifrån informationen. Informationen innehåller vanligtvis titel, namn, e-postadress, födelsedatum, adress, ränta osv. Det ingår i gruppen CTA-lead.

Ett exempel på ett CTA-formulär ser ut så här:

CTA-formulär bygger på flera olika komponenter:

I föregående exempel visas ett exempelformulär. Det består av komponenten Leadformulär (start och slut), med fälten Förnamn och E-post-ID som används för indata och ett Skicka -fält

Följande komponenter finns tillgängliga för CTA Lead-formuläret:

Inställningar som är gemensamma för många komponenter i huvudformuläret settings-common-to-many-lead-form-components

Även om var och en av de ledande formulärkomponenterna har olika syften, består många av liknande alternativ och parametrar.

När du konfigurerar någon av formulärkomponenterna är följande flikar tillgängliga i dialogrutan:

Formulärexponenter för lead lead-form-components

I följande avsnitt beskrivs de komponenter som är tillgängliga för formulär för lead-anrop-till-åtgärd.

Om Tillåter användare att lägga till Om-information.

Adressfält Tillåter användare att ange adressinformation. När du konfigurerar den här komponenten måste du ange elementnamnet i dialogrutan. Elementnamnet är namnet på formulärelementet. Detta anger var i databasen data lagras.

Födelsedatum Användare kan ange födelsedatum.

E-post-ID Tillåter användare att ange en e-postadress (identifiering).

Förnamn Tillhandahåller ett fält där användare kan ange sitt förnamn.

Genus-användare kan välja sitt kön i en listruta.

Efternamn Användare kan ange efternamnsinformation.

Leadformulär Lägg till den här komponenten för att lägga till ett leadformulär på landningssidan. Ett lead-formulär innehåller automatiskt fälten Början av lead-formulär och Slut på lead-formulär. däremellan lägger du till leadformulärskomponenterna som beskrivs i det här avsnittet.

Komponenten Lead-formulär definierar både början och slutet av ett formulär med elementen Formulärstart och Formulärslut . Dessa är alltid kopplade för att säkerställa att formuläret är korrekt definierat.

När du har lagt till lead-formuläret kan du konfigurera början eller slutet av formuläret genom att klicka på Redigera i motsvarande fält.

Början av lead-formulär

Det finns två flikar tillgängliga för konfigurationen Form och Advanced:

Tack! Sidan som ska refereras till av besökarna för att de har angett sina indata. Om formuläret lämnas tomt visas det igen när det har skickats.

Starta arbetsflöde Avgör vilket arbetsflöde som ska aktiveras när ett lead-formulär skickas.

Post-alternativ Följande alternativ är tillgängliga:

Formuläridentifierare Formuläridentifieraren identifierar lead-formuläret unikt. Använd formuläridentifieraren om du har flera formulär på en sida. Kontrollera att de har olika identifierare.

Läs in sökväg är sökvägen till nodegenskaper som används för att läsa in fördefinierade värden i lead-formulärfälten.

Detta är ett valfritt fält som anger sökvägen till en nod i databasen. När den här noden har egenskaper som matchar fältnamnen förinläses motsvarande fält i formuläret med egenskapsvärdet. Om det inte finns någon matchning innehåller fältet standardvärdet.

Klientvalidering Anger om klientvalidering krävs för det här formuläret (servervalidering sker alltid). Detta kan du göra med komponenten Forms Captcha.

Valideringsresurstyp Definierar resurstypen för formulärvalidering om du vill validera hela lead-formuläret (i stället för enskilda fält).

Om du validerar det fullständiga formuläret ska du även inkludera något av följande:

Åtgärdskonfiguration Beroende på vad du har valt i Post-alternativ ändras åtgärdskonfigurationen. Om du till exempel väljer Skapa lead kan du konfigurera vilken lista leadet ska läggas till i.

Skapa en landningssida creating-a-landing-page

När du skapar en landningssida måste du utföra tre steg:

Användning av designimporteraren use-of-the-design-importer

Eftersom import av sidor innefattar förberedelse av HTML, verifiering och testning av sidorna är importen av landningssidor avsedd som en administrationsuppgift. Som administratör behöver de användare som utför importen behörighet att läsa, skriva, skapa och ta bort på /apps. Om användaren inte har dessa behörigheter misslyckas importen.

Adobe rekommenderar att du använder designimporteraren i en mellanlagringsinstans. I en mellanlagringsinstans kan importen testas och valideras av en utvecklare som sedan ansvarar för att distribuera koden till produktionsinstansen.

Skapa en importsida creating-an-importer-page

Innan du kan importera designen för landningssidan måste du skapa en importsida, till exempel, under en kampanj. Med importsidmallen kan du importera hela landningssidan för HTML. Sidan innehåller en listruta där designpaketet för landningssidan kan importeras med dra och släpp.

Så här skapar du en landningssida:

Förbereda HTML för import preparing-the-html-for-import

Innan du importerar designpaketet måste HTML förberedas. Mer information finns i Utöka och konfigurera designimporten.

Importera designpaketet importing-the-design-package

När en importsida har skapats kan du importera ett designpaket till den. Information om hur du skapar designpaketet och dess rekommenderade struktur finns i Utöka och konfigurera designimporten.

Om du har designpaketet klart beskrivs i följande steg hur du importerar designpaketet till en importsida.

Arbeta med landningssidor working-with-landing-pages

Designen och resurserna för en landningssida skapas vanligtvis av en formgivare som kanske finns på en byrå i verktyg som de är vana vid, till exempel Adobe Photoshop eller Adobe Dreamweaver. När designen är klar skickar designern en zip-fil med alla resurser till marknadsföringen. Kontakten inom marknadsföring ansvarar sedan för att ZIP-filen släpps AEM och innehållet publiceras.

Dessutom kan det hända att designern måste göra ändringar på landningssidan efter att den har importerats genom att redigera eller ta bort innehåll och konfigurera komponenterna för att ringa in och ta bort. Slutligen vill marknadsföraren förhandsgranska landningssidan och sedan aktivera kampanjen för att säkerställa att landningssidan publiceras.

I det här avsnittet beskrivs hur du gör följande:

När du importerar designpaketet är Clear Design och Download Imported Zip tillgängliga på sidans inställningsmeny:

Hämta det importerade designpaketet downloading-the-imported-design-package

När du laddar ned zip-filen kan du registrera vilken zip som importerades med en viss landningssida. Ändringar som görs på en sida läggs inte till i zippen.

Om du vill hämta det importerade designpaketet klickar du på Hämta zip i verktygsfältet Landningssida.

Visa importinformation viewing-import-information

Du kan när som helst visa information om den senaste importen genom att klicka på det blå utropstecknet högst upp på landningssidan i det klassiska användargränssnittet.

Om det importerade designpaketet innehåller vissa problem, till exempel om det refererar till bilder/skript som inte finns i paketet och så vidare, visas sådana problem i form av en lista av designimporteraren. Om du vill visa en lista med problem i det klassiska användargränssnittet klickar du på problemlänken i verktygsfältet Landningssida. I följande bild öppnas fönstret Importera problem när du klickar på länken Problem .

Återställa en landningssida resetting-a-landing-page

Om du vill importera om designpaketet för landningssidan efter att ha gjort några ändringar kan du rensa landningssidan genom att klicka på Rensa högst upp på landningssidan i det klassiska användargränssnittet eller klicka på Rensa på inställningsmenyn i det pekoptimerade användargränssnittet. Om du gör det tas den importerade landningssidan bort och en tom importsida skapas.

När du rensar landningssidan kan du ta bort innehållsändringarna. Om du klickar på Nej behålls innehållsändringarna, det vill säga strukturen under jcr:content/importer bevaras och endast komponenten för importsidan och resurserna i etc/design tas bort. Om du klickar på Ja tas även jcr:content/importer bort.

Ändra och lägga till komponenter på en landningssida modifying-and-adding-components-on-a-landing-page

Om du vill ändra komponenterna på landningssidan dubbelklickar du på dem för att öppna dem och redigera dem precis som andra komponenter.

Om du vill lägga till komponenter på landningssidan drar och släpper du komponenter på landningssidan, antingen från sidosparken i det klassiska användargränssnittet eller från komponentpanelen i det pekoptimerade användargränssnittet, och redigerar efter behov.

Ta bort en landningssida deleting-a-landing-page

Att ta bort en landningssida är som att ta bort en normal AEM.

Det enda undantaget är att när du tar bort en landningssida på en stationär dator tas även motsvarande mobillandningssida bort (om sådan finns), men inte omvänt.

Publicera en landningssida publishing-a-landing-page

Du kan publicera landningssidan och alla dess beroenden precis som när du publicerar en vanlig sida.