Overview of Acem landing pages: example links, documentation, user behavior analytics
Generelt kan man lage landingssider fritt i Photoshop med bilder og knapper. Det er så mulig å legge ut de bildene på web og spesifisere hvor man skal sendes om man klikker på visse områder i bildet (eksempelvis der det er en knapp). Dette kan man spesifisere helt fritt selv.
Her er et eksempel:
https://acem.com/landingpage_dev/eng/lp_nourishing
Og denne for å hoppe over topp-menyen:
https://acem.com/landingpage_dev/eng/lp_nourishing#silence
For å vise funksjonaliteten med å klikke videre så prøv å
klikk på 'Learn now' i bilde.
Man kan også ha bilde som er flere skjerm-høyder og når
man klikker på knapper i første delen som kommer opp
så hopper man lengre ned.
I avsnittet Documentation under står det mer om hvordan dette legges ut.
Her er en samling av andre bilder på vårt staging område (utviklingsområde som kan bli overskrevet i motsetning til acem.com som er brukt over)
http://com.acem.staging.netgencloud.com/landingpage#explore
Og siste element
http://com.acem.staging.netgencloud.com/landingpage#centres
Her kommer litt nerdeprat - for å forklare hvordan det er gjort.
For å teste ut kan man logge inn på admin.acem.no og gå til 'Acem Sites > acem.com > Landingpage_dev' (Utvikling av landingssider)
og legge sine ting der. Alle objekter må ha språk 'English (International)' for å synes på acem.com.
For å legge inn bildene:
Det er også mulig å gjøre det hele enklere ved å droppe NG Frontpage, bare lage NG HTML box og Image og bruke linken direkte til NG HTML box, men da kan man ikke publisere flere innholdselementer på siden slik man kan gjøre med en NG Frontpage. Eksempel på en slik forenkling er å bruke direkte:
https://acem.com/landingpage_dev/eng/lp_nourishing/html_nourishing
Eksempel der man har brukt mulighetene til å publisere flere innholdselementer på siden med NG Frontpage er https://fr.acem.com
Kodeeksempler:
HTML-kode med lenke videre fra en del av bilde:
<img width="100%" height="100%" src="/var/a3/storage/images/acem_sites/acem_com/landingpage/nourishing/1601611-1-eng-INT/nourishing.jpg" alt="" usemap="#planetmap" id="silence"> <map name="planetmap"> <area shape="rect" coords="220,382,363,437" href="/allobjects/acemcourse/learn_to_meditate_at_the_young_international_retreat" alt="enrol"> <area shape="rect" coords="937,624,937,624" href="/learn" alt="tell me more"> </map>
HTML-kode med lenke videre fra en del av bilde og mulighet for å hoppe ned til denne delen av siden med lenke som ender med #explore (http://com.acem.staging.netgencloud.com/landingpage#explore)
<img width="100%" height="100%" src="/var/a3/storage/images/acem_sites/acem_com/landingpage/explore_your_meditation/1601614-2-eng-INT/explore_your_meditation.jpg" alt="explore" usemap="#exploremap" id="explore"> <map name="exploremap"> <area shape="rect" coords="0,0,939,568" href="/follow_up_activities" alt="explore"> <area shape="rect" coords="939,568,939,568" href="" alt=""> </map>
coords refererer til koordinatene som definerer et rektangel. coords="n1,n2,n3,n4", der n1 er x-koordinat og n2 er y-koordinat til øvre venstre hjørne av rektangelet, n3 er x-koordinat og n4 er y-koordinat til nedre høyre hjørne av rektangelet. Øverste venstre hjørne av bilde har koordinatene 0,0 og alle koordinatene er relativt til det.
Use google analytics and hotjar. Please contact Trygve Fridstrøm for details.
This gives very good information about how many users visited the page, how many clicked on the page and what did they click.
It is actually also possible with hotjar to replay exactly what the user did.
It should probably be mandatory for people developing pages to use these tools :-)
We will also later publish more information on this page.