Can a parallax scrolling website have a mobile optimised background image?

Parallax: Skab dybde i dine annoncer

11/10/2023

Rating: 4.56 (1141 votes)
Indholdsfortegnelse

Hvad er Parallax? En Dybdegående Guide til Immersive Annoncer

Parallax er et banebrydende annonceformat designet specifikt til mobilwebbet, der tilbyder en unik og fængslende brugeroplevelse. Ved at udnytte en lagdelt, parallax-animationseffekt formår dette format at fange brugerens opmærksomhed på en både interessant og ikke-påtrængende måde. Kernen i parallax er skabelsen af en illusion af dybde, hvor forskellige billedlag i annoncen opleves at befinde sig i forskellige afstande fra brugeren. Når brugeren scroller gennem indholdet på deres smartphone, afsløres annoncen gradvist, hvilket skaber en dynamisk og engagerende interaktion. Fordelene ved parallax-annoncering er mange. Det tilbyder en interaktiv annonceoplevelse, der tiltrækker potentielle kunder og opfordrer dem til at engagere sig med annoncen, samtidig med at brugeren bevarer fuld kontrol over interaktionen. Dette format giver mulighed for at køre disse imponerende annonceoplevelser i stor skala på tværs af forskellige udgivere på mobilwebbet. Desuden kan du fuldstændigt tilpasse og differentiere din annonceoplevelse ved hjælp af Google Web Designer, et gratis og kraftfuldt værktøj.

Why is parallax scrolling not supported?
When you use other browsers on any touch device, parallax scrolling will be overwritten for compatibility reasons. As a result, you will only see a static image instead of your parallax. Due to responsiveness issues with parallax scrolling on mobile browsers and performance concerns, most mobile browsers still don’t support it.

Hvordan Fungerer Parallax?

Parallax-effekten opnås ved at manipulere hastigheden, hvormed forskellige elementer i en annonce bevæger sig i forhold til hinanden, når brugeren scroller. Typisk bevæger forgrundselementer sig hurtigere end baggrundselementer, hvilket skaber en illusion af dybde og dimension. Dette opnås gennem en række teknikker, primært baseret på CSS og JavaScript, som styrer positioneringen og bevægelsen af de enkelte billedlag. Når en bruger scroller nedad på en webside, registreres denne bevægelse. Avancerede scripts beregner derefter, hvordan hvert enkelt lag i parallax-annoncen skal bevæge sig baseret på dets tildelte dybde. Lag tættere på brugeren bevæger sig hurtigere, mens lag længere væk bevæger sig langsommere. Dette differentierede bevægelsesmønster er det, der skaber den overbevisende illusion af tredimensionel rumlighed.

Hvor Kan Parallax Bruges?

Parallax-annoncer er i øjeblikket kun berettigede til brug på Ad Manager inventar. Parallax appellerer til brugerne gennem en cool, scroll-baseret interaktion, og som sådan er det designet til inventar, der befinder sig under folden (below-the-fold). Dette betyder, at annoncen ikke er synlig, når siden først indlæses, men afsløres, når brugeren scroller ned. For at finde tilgængeligt inventar til parallax-annoncer kan du oprette en rapport om inventartilgængelighed i Google Ad Manager. Tilføj 'Creative Attributes' som et filter, og vælg derefter 'Parallax' som et underfilter. Dette vil give dig et overblik over de muligheder, der er tilgængelige.

Opsætning af Parallax Annoncer

Opsætning af en parallax-annonce involverer flere trin, fra design til implementering.

1. Design din Parallax Creative med Google Web Designer

Google Web Designer er det primære værktøj til at skabe parallax-annoncer. Det er en gratis desktop-applikation, der giver dig mulighed for at designe og bygge HTML5-kreativer. For at komme i gang skal du åbne Google Web Designer og trække 'Parallax'-komponenten til scenen. Start fra en Skabelon: For at få inspiration eller en hurtig start kan du bruge en af de forudbyggede skabeloner, der er tilgængelige i Google Web Designer. Disse inkluderer: * Parallax Reveal: En skabelon, hvor elementer gradvist afsløres, efterhånden som brugeren scroller. * Parallax Particles: En mere dynamisk skabelon med partikel-effekter, der reagerer på scrolling. * Parallax Lockup: En skabelon, der fokuserer på en stærk visuel præsentation af brandet. Disse skabeloner kan findes under 'Use template' og derefter 'Parallax for Display & Video 360' i skabelongalleriet.

2. Tilføj en Exit (Call-to-Action)

Det er afgørende, at din parallax-annonce har mindst én knap eller et hotspot, som brugeren kan klikke på for at blive sendt til annoncørens landingsside. Dette gøres ved at bruge 'Tap Area'-komponenten i Google Web Designer. Ingen brugerdefineret kode er nødvendig. Trin til at tilføje en Exit:1. Træk 'Tap Area'-komponenten fra 'Interaction'-mappen til scenen. 2. Positioner den over det element, der skal fungere som klikbar CTA (f.eks. en knap). 3. Gå til 'Events'-panelet og klik på 'New event'-knappen. 4. I dialogboksen for begivenheder skal du vælge følgende indstillinger: * Target: Vælg din 'Tap Area'-komponent (f.eks. gwd-taparea_1). * Event: Vælg 'Tap Area' > 'Touch/Click'. * Action: Vælg 'Google Ad' > 'Exit ad'. Bemærk: Vælg 'Exit ad' og ikke 'Exit ad (overrides URL)', medmindre du har specifikke grunde til at styre URL'en uden for den kreative fil. Konfiguration af Exit:* Metrics ID: Et mærkat til at identificere exit i rapporter (f.eks. "CTA"). * URL: Annoncørens landingsside-URL. * Collapse on exit: (For udvidelsesannoncer) Vælg for at annoncen kollapser, når brugeren lukker den. * Pause media on exit: Vælg for at stoppe video- og lydafspilning, når brugeren lukker annoncen. * Collapsed page on exit: (For udvidelsesannoncer) Angiv den side, der skal vises, når annoncen lukkes.

3. Upload din Creative

Når din parallax-creative er færdigdesignet, har du to muligheder for at uploade den: * Publicer direkte til Display & Video 360: Dette sparer annoncen som et udkast i platformen. * Publicer lokalt fra Google Web Designer og upload derefter til Display & Video 360: Dette giver dig mulighed for at pakke annoncen som en ZIP-fil. Vigtigt: Parallax-kreativer skal enten uploades direkte til Display & Video 360 eller sendes til Display & Video 360 fra Google Web Designer. Hvis du uploader en parallax-creative til Campaign Manager 360 og synkroniserer den, vil den ikke fungere korrekt. Upload af Lokalt Publiceret ZIP-fil:1. Åbn din annoncør i Display & Video 360. 2. Klik på 'Creatives' i venstre menu. 3. Klik på 'New Upload HTML5 or image'. 4. Indtast et navn for din kreative. 5. Træk din publicerede .zip-fil fra Google Web Designer ind i feltet 'Drag file here', eller klik på 'Upload' og vælg filen. 6. Valgfrit: Tilføj et backup-billede og en backup rapporterings-label. 7. Valgfrit: Upload et 'polite load'-billede, der vises ved langsomme forbindelser. 8. Gennemgå og rediger 'exits' (klik-tags) i 'Events'-sektionen. Du kan her ændre landingsside-URL'er og rapporterings-labels. 9. Valgfrit: Hvis din annoncør er linket til Campaign Manager 360, kan du tilføje en tracking-annonce for at få rapportering i CM360. 10. Gem din kreative. Publicering fra Google Web Designer:1. Åbn din annoncør i Display & Video 360. 2. Klik på 'Creatives' i venstre menu. 3. Find den kreative, du har publiceret fra Google Web Designer. 4. Bekræft, at 'Creative asset's status' er sat til 'Publish'. 5. Gennemgå og rediger eventuelle exits, backup-billeder osv. 6. Gem din kreative.

Levering af Parallax Kreativer

For udgivere eller udvekslinger, der ønsker at levere parallax-kreativer, er den eneste væsentlige forudsætning, at de har below-the-fold inventar, der bruger Google Publisher Tags. Dette sikrer, at annoncen kan reagere korrekt på scroll-begivenheder, hvilket er essentielt for parallax-effekten.

Fordele og Ulemper ved Parallax

FordelUlempe
Højere brugerengagement og interaktionKræver specifikke værktøjer (Google Web Designer) og teknisk opsætning
Skaber en immersiv og mindeværdig oplevelseKan potentielt være mere ressourcekrævende for enheden
Illusion af dybde og dimensionKun tilgængelig på mobilweb og specifikt Ad Manager inventar
God til at fortælle en historie eller vise produktKræver omhyggelig design og test for at undgå brugerfrustration

Ofte Stillede Spørgsmål (FAQ)

Hvad er den primære forskel på parallax og almindelige bannerannoncer?Parallax bruger animation og illusionen af dybde, der reagerer på brugerens scrolling, mens almindelige bannerannoncer typisk er statiske eller har simple animationer, der ikke er bundet til brugerens scroll-adfærd. Kan jeg bruge parallax på desktop?Nej, parallax-formatet er specifikt designet og optimeret til mobilwebbet. Hvad er 'below-the-fold' inventar?Det er annonceplaceringer, der ikke er synlige, når en webside først indlæses. Brugeren skal scrolle ned for at se dem. Hvorfor skal jeg undgå at uploade til Campaign Manager 360 først?Fordi parallax-formatets funktionalitet er tæt knyttet til integrationen med Display & Video 360 og dets håndtering af scroll-begivenheder, kan en mellemliggende upload via CM360 forstyrre denne funktionalitet. Hvad hvis brugeren har en meget langsom internetforbindelse?Et 'polite load'-billede kan konfigureres til at blive vist, mens de primære kreative filer indlæses, hvilket sikrer en bedre oplevelse, selv under dårlige netværksforhold. Hvordan sikrer jeg, at min parallax-annonce konverterer?Sørg for, at din Call-to-Action (Exit) er klar og tydelig, og at landingssiden lever op til forventningerne skabt af annoncen. Test forskellige designs og CTA-placeringer for at optimere ydeevnen.

Hvis du vil læse andre artikler, der ligner Parallax: Skab dybde i dine annoncer, kan du besøge kategorien Teknologi.

Go up