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:

Att förbereda designpaketet för import beskrivs i Utöka och konfigurera designimporteraren. Integrering med Adobe Analytics ingår 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 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 landningssidan för stationära datorer html och stöder alla redigerbara komponenter som beskrivs för startsidan för stationära datorer.

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. Se Textkomponent för mer information.

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). Se Titelkomponent för mer information.

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. Se bildkomponent för mer information.

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, till exempel"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 återgivningsalternativen. Du kan välja bland följande:

CSS På fliken Format anger du en sökväg till din CSS-formatmall.

ID På fliken Format anger du ett ID för komponenten som ska identifiera den 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 är en del av Utlysning grupp.

Etikett Den text som visas 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 återgivningsalternativen. Du kan välja bland följande:

CSS På fliken Format anger du en sökväg till din CSS-formatmall.

ID På fliken Format anger du ett ID för komponenten som ska identifiera den 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 är en del av CTA Lead-formulär grupp.

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. den består av Leadformulär -komponent (start och slut), med Förnamn och E-post-ID fält som används för indata och 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 Anger ett fält där användare kan ange sitt förnamn.

Kön Användarna 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 lead-formulä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.

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

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

Början av leadformulär

Två flikar är tillgängliga för konfiguration Formulär och Avancerat:

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

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

Alternativ för inlägg 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, se till att de har olika identifierare.

Läs in bana Ä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.

Typ av verifieringsresurs 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 väljer i Alternativ för inlägg ä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:

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 ny landningssida:

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

Innan du importerar designpaketet måste HTML förberedas. Se Utöka och konfigurera designimporten för mer information.

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 följande verktygsfält tillgängligt högst upp på landningssidan:

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. Observera att ändringar som görs på en sida inte läggs till i zippen.

Om du vill hämta det importerade designpaketet klickar du på Ladda ned 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 klickar du på Problem öppnar fönstret Importera 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 i det kan du"rensa" landningssidan genom att klicka på Rensa längst 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 Nej och innehållsändringarna bevaras, det vill säga strukturen under jcr:content/importerbevaras och endast importsidans komponent och resurserna i etc/design tas bort. Om du klickar Ja, jcr:content/importer tas också 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 en sådan finns), men inte tvärtom.

Publicera en landningssida publishing-a-landing-page

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