There Is an App for…Vanity URLs!Magnolia Conference 2014 Technical Track, June 26th, Basel

2

About me

Jörg von FrantziusSystems Architect

Software-engineering background

Joined Aperto in 2010

Technical supervision for exciting and demanding Magnolia projects since then

E.g. Middle East Broadcasting Company

Dubai http://www.mbc.net/ Kanton Basel-Stadt http://www.bs.ch/

Some facts about Aperto

4

Who We Are TodayFacts and Figures

40Million US$Turnover (Gross income) 2013

400Heads at presentGrowing steadily and soundly

International branchesEurope (Germany, Switzerland)Middle East (Dubai) China (Beijing, Shanghai)

10of the largest owner-managed advertising agencies in Germany

Top 3

400Heads at present

5

We Connect Brands and People

Aperto And MagnoliaA Strong Partnership Since 2006

6

More than 40 successfully implemented Magnolia projects

High competence in the execution and implementation of large and technologically sophisticated projects, e.g. business integration, high performance and security

Joint product development with Magnolia (STK – Standard Templating Kit)

Over 50 Magnolia-experienced and trained employees in our departments technology, UX Design, Design and Project Management

Experienced with international projects in Germany, China, Dubai, Switzerland and UK

What are Vanity-URLsanyway?

Vanity URLs – What Is It?

Antti Hietala‘s great blog post on vanity URLs with Magnolia:

“Vanity URLs are short, easy to remember Web addresses used for campaigns, microsites and landing pages. They are a key Internet marketing tool.”

Mostly used to drive user from some other medium to a web page

E.g. URLs shown on TV, poster campaigns, print advertisement

Just in case you wonder…

Not Just Short URLs

Vanity URLs: not to be confused with short URLs, e.g.

http://goo.gl/2Yl2J4

• No one can remember that

• No one wants to type it in

Let alone typing this in on a mobile phone!

Must be easy to remember and spell

An Example

Imagine you are waiting for your train (or in your train)

And you can’t help staring at that poster in front of you.

Imagine now, that poster would really incite your interest in, say, Aperto’s work for the Kanton Basel Stadt ;).

Which URL would you more likely try to type in on your mobile?

(or: shameless plug)

?http://www.aperto.de/en/press/press-releases-2012/Aperto-rebuilds-Web-portals-of-the-canton-of-Basel-Stadt.html

?www.aperto.de/basel

No Need for Typing in on a Mobile Phone

“Drive user from other medium to a web page” …

There is a more fun way of opening a URL from another medium on a mobile phone

QR Codes!

(Alas, only if you have an app for that on your mobile phone…)

?QR Codes?!?

QR Codes – a Dispute

Image source and great article:

http://techcrunch.com/2013/05/29/people-actually-use-qr-codes-in-china/

(image originally found via Adriaan Bloem)

Well, Yes, QR Codes.

Obviously, there is a need for creating QR Codes

Wasn’t supported yet directly in Magnolia

(And also we were in need of a nice visual feature to show in our app at the conference!)

In Summary: A Common Use Case

How often do you remember having seen simple catchy URLs (or QR Codes) outside of the web?

Obviously, creating Vanity URLs is a very common use case

Aperto’s customer projects required it often enough to create a dedicated app

Why an App?

But why an app for Vanity URLs

If Magnolia supports it anyway?(except for QR Codes)

Let’s see what the caveat is …

Magnolia and Vanity URLs

Magnolia does support Vanity URLs out of the box(see e.g. again Antti Hietala‘s blog post on how to do it)

We’re going to focus on path-based Vanity URLs

i.e. not involving custom domain names

It‘s supported

Vanity URL Technically

Usually that’s a permanent 301 redirect to the real page URL, i.e.

• browser will show real URL after redirect

• search engines preserve ranking for real URL

(For SEO reasons that’s usually what you want!)

Just a redirect

Configuring a Path-Based Vanity URL

1. Go to config app

2. Locate your module

3. Add node “virtualURIMapping”

4. Add configuration like this:

(and use “redirect:” insteadof “forward:”)

i.e. without the app

?Easy?

Easy for Techies

Maybe for you

(This is the technical conference track, after all!)

!But not for page editorswithout technical background!

Without App: Access to Config Workspace Required

Hard and dangerous to do for page editors without technical knowledge

(Ever locked yourself out of Magnolia with a virtual URL mapping?)

Experienced web admins must do it

Not for average page editor

?No problem?

Let‘s Empower Page Editors

Some large companies have large page editor workforce who should be able to create vanity URLs easily

Without the app, editors have to ask web adminsOr they might simply avoid the hassle

Disentangle page editors and web admins for this task

Web admins have better things to do anyway

!OK, got it.

Now show me the app!

The app

Overview of Vanity URLs

Vanity URL Attributes

(click on top-right“?” to get all help texts at once)

Actions on Selection

Actions on Selection II

View QR Code

Intended for export (right-click „Save image as…“)

Contains URL of the redirect target,not the Vanity URL itself!(avoids redirect on slow mobile)

?That appdoesn‘t look very special?

!Yes, and that‘s great!

Magnolia‘s New Content App Framework Works!

It turns out: Magnolia‘s content app framework is flexible and powerful

Positive for user: they will immediately:

• feel at home

• know how to use it

Positive for Developers: need to customize only details + few custom classes

The code

Some Implementation Details

Time to give credits:

All programming + configuration done by Frank Sommer @Aperto

I‘m only doing the talking

SubappsUsing standard Magnolia classes

Browser: provides list overview

Details: provides editor

Preview: both for link target and QR Code(essentially an iframe)

Browser SubApp Content ViewsList and search only

Just cut away what we don‘t need

(tree and thumbnail don‘t make sense for this app)

QR Code Image Generation Happens on form save

QR Code PreviewStandard app image provider

VanityUrlSaveFormAction saves image to binary node „qrCode“

That‘s where the configured standard image provider picks it up:

Custom Field for Site Selection

Custom VirtualURIMapping for Link Evaluation

Incoming requests for Vanity URLs:

evaluated in custom VirtualURIMapping

(looks up Vanity URL + site in vanityUrlworkspace)

?Can I use it?Where can I get it?

It‘s Open Source!Free to use

Vanity URL app is released as GPLv3

Find the sourcecode on Github: https://github.com/aperto/magnolia-vanity-url

If you modify the source, please fork us on Github!

Find it in the Magnolia Forge

Magnolia Jenkins will deploy artifacts to Magnolia Nexus

(even though code is on Github)

Please enter bug reports, enhancement or feature requests:

https://jira.magnolia-cms.com/browse/VANITY

!Thank you!Jörg von Frantzius Systems Architect

E-Mail joerg.frantzius@aperto.de

Phone +49 (0) 30 – 283 921 – 0

Aperto AG – In der Pianofabrik

Chausseestr. 5

10115 Berlin