Belgacom retail website migration

How we moved www.belgacom.be to Magnolia-cms 4.5

MCONF 2014 - Benoit Poncelet

Agenda

�  What’s Belgacom ?

�  Why moving to magnolia ?

�  How we imported all content into magnolia

30/06/14 Slide 2

About me… �  Benoit Poncelet – 32 years - Brussels

�  Bachelor in computer science in 2005 from Paul Lambin Institute (Brussels)

�  Developer - Team lead – Application architect over last 10 years

�  Telecommunication, Bank, web agencies, …

�  Founded Web eMotion company in 2012

30/06/14 Web-eMotion – http://www.webemotion.be Slide 3

What’s Belgacom �  Main Belgian telecommunication company

�  15.753 employees

�  Turnover of 6.32 billions euros

�  Triple play provider �  1,386,000 Belgacom TV �  1,637,000 Internet connections

�  3.085.000 Fixed Lines customers �  5,416,000 Mobile numbers

�  1,237,000 Packs

�  Private, SME and Large segments

�  7 different brands

It’s also 3 main websites �  E-service

�  400K visitors per month

�  50 dynamic pages

�  E-shop �  1500 pages �  150 visits per hour

�  Retail �  900 concurrent users

�  55K pages view per hour �  1300 pages within 3 languages

�  +/- 20 publishers

�  Weekly released

Why moving from teamsite �  Business was complaining about

�  Time to market to get new functionalities was too long. �  Development cost & time was too high. �  Maintenance was too complex. �  Release process was cumbersome.

�  Why ? �  Platform doesn’t fit with requirements (Date On/Off mechanize, SEO, multi-

languages, Page hierarchy, garbage collector of unused content) and requires deep customizations

�  Black box and bad documentations �  Steep learning curve �  No adequate development environment

Why magnolia ? �  Enterprise support

�  67 Partners around the world �  4 Partners in Belgium

�  Easy setup and deployment

�  Open sources

�  Short development time during POC

�  Belgacom infrastructure compliant

�  Intuitive and user friendly interface

30/06/14 Slide 7

POC Magnolia-CMS �  Add custom functionalities

�  Date On/Date Off Mechanism (dodom)

�  Custom content

�  But also

�  Translated SEO �  Sitemap based edition �  Any time publishing �  Content syndication / inheritance �  Short URLs / Aliases �  Staging / Preview

�  Mega Drop Down �  Separation of concerns �  Product catalog integration �  Extended product modelPerformance �  A/B Testing �  Personalized content �  Page dependencies

�  Content types �  Asset management �  Mobile support

�  Content migration...

30/06/14 Slide 8

DODOM �  Objectives

�  Specify DODOM at page and/or component level

�  Be able to preview the content for a specific preview date

30/06/14 Slide 9

Custom content �  Objectives

�  Allow business to create one-shot components where custom html can be used

30/06/14 Slide 10

Content migration �  Objectives

�  Import content from production in the new infrastructure.

�  What? �  Pages structure and metadata (names, visibility) of a page is

imported in Magnolia �  Content of page (banners, custom, links) are also imported in

pages. �  Assets present in pages are imported into DMS and linked into

components

30/06/14 Slide 11

How to do it…

30/06/14 Slide 12

Let’s check into Magnolia

30/06/14 Slide 13

What’s in Magnolia 5.x

30/06/14 Slide 14

What does Magnolia

30/06/14 Slide 15

info.magnolia.module.admininterface.trees.WebsiteTreeHandler

How create all pages into magnolia

�  Via sitemap.xml �  Contains all links to important pages

�  Via teamsite sitemap �  Contains all pages, translated names, date On/Off, meta

data/description, visibility information

è Teamsite sitemap contains more information

30/06/14 Slide 16

Let’s demo the import of all pages

30/06/14 Slide 17

How import page content ?

30/06/14 Slide 18

Import page contents into magnolia

�  From Teamsite �  Complex xml data structure to access data

Sitemap è Pages è Components è DCR è Data

�  From live website (html) �  Parse html from live website to import data

What does JSoup

jsoup: Java HTML Parser

jsoup is a Java library for working with real-world HTML. It provides a very convenient API for extracting and manipulating data, using the best of DOM, CSS, and jquery-like methods.

30/06/14 Slide 20

Document doc = Jsoup.connect("http://en.wikipedia.org/").get(); Elements newsHeadlines = doc.select("#mp-itn b a");

Concept

Import content via Jsoup and create content based on html.

�  Iterate over page �  Iterate over areas

�  Iterate over components

30/06/14 Slide 21

Let’s try…

30/06/14 Slide 22

Page import structure

30/06/14 Slide 23

Components import structure

30/06/14 Slide 24

Let’s demo import of content

30/06/14 Slide 25

Conclusions

�  Automated migration without impact on publishing activities.

�  80% migrated in 2 months

�  20% remaining cost 2 additional months

30/06/14 Slide 26

Details ? Time for Q&A !

References / contact Jsoup : http://jsoup.org/

Magnolia : http://documentation.magnolia-cms.com/

Need to Contact me:

Email: benoit@webemotion.be & http://www.webemotion.be

Twitter: @benoit_poncelet & @Web_eMotion