CQ Campaigns Top-10 components

Transcription

1 CQ Campaigns Top-10 components Femke van Dongen, Bram van Bergen, Angela Heemskerk, Enes Kirimi Digital Services CQ 5.6 December 5 th 2016

2 Top-10 components

3 Link to: Component Library

4 Component code abbreviations A AP B BP C D E F FP G GC HP I MH Assets Alternative products / parallel navigation Buying a product Banners and promotions Comparing Decision page specific Events Footer Find Product General Generic Component Homepage Interface Masthead MP N P PA PC R S SC SR ST T TC U TPL Personalized / MyPhilips Navigation PDP specific Product Advisor Product and category presentation Reviews Specifications Social Search Support Topic page Technical User generated content Template

5 SEO settings Please make sure you only use one H1 header (masthead MH01 has by default set the title to H1) on a page. The amounts per header type are explained above. You can easily check if your page has the correct amount by going into the source code (right mouse > view source code) of your dev or www link and search for <h1 or <h2 for example. Find more information on SEO settings here

6 Analytics settings Analytics are an important part of our pages, and should always be filled in. There are general settings on every button or link option which is the Analytics field shown above and there is a possibility to add metadata from structured pages to an unstructured page. Find more information on tagging here What do you need to fill in The most important thing to capture is which button is clicked and you could do all sorts of things to make sure it gets captured. Destination_name:button_label. Example: you have a button on your page which links to an article page that s called capital days in 2015 and the button label is Read more. Then the analytics tag should be: capital_days_in_2015:read_more. Tags should always be English, unique, logical and may not contain spaces (use underscores _). If you can t follow the above approach (for instance when linking to the same page), then you re free to make some additions. For example; two buttons that are the same. I would be interested in knowing which of the two was clicked. So including something like left or right or numbers to identify the button are also fine. Destination can also be a piece of text on the page. Example: related_articles:read_more_left In any case, always have your settings checked by the analytics team via digital.services@philips.com

7 Mobile optimization All our components are created to behave different/specific for mobile and tablet renditions. That s why a lot of settings can be set separately for L, M, S and XS. For instance background images or cell widths/heights. As we have a mobile first approach, please make sure all your components and pages are configured optimal for mobile. Find more information and specific subjects to check in the Mobile Optimization documentation

8 MH_01 1. MH01 [Sector Masthead]

9 MH_01 Configuration of MH01: Layout options 1. Inverted or default text (Inverted white text on a dark background or default the color corresponding the chosen page theme) 2. Call to action button can be a primary or secondary button (extra large, large or normal). The button color is configured in the page theme. The button can open the page in the same window, new window or popup. Background 1. The background can be a (full bleed) (scalable) image (4 different images per viewport L/M/S/XS). 2. The minimum image height of the masthead image is 350px on L/M and 300 on S/XS (a typical height of a masthead image lies between 350px-700px for L/M and 300px-410px for S/XS) Brand line 1. The Innovation and You brand line can be added to the masthead (checkbox). Please read the Philips brand guidelines for proper use of the brand line. Social Share 1. Social share buttons (SC05 component) can be optionally added to the masthead (checkbox). The social channels are configured on country level (see SC05 for more details). Video or video play button 1. A video play button or a small video thumbnail with play button can be included to the component. (When checking the checkbox, the SC01v2 will appear after confirming the changes with OK ) 2. Don t forget to set the analytics of the button!

10 MH_01

11 MH_01

12 MH_01

13 GC_04v2 2. GC04v3 [Grid container]

14 GC_04v2 Configuration of GC04v3: Short description Layout options

15 GC_04v2 More configuration of GC04v3: Can I leave out things on mobile? Can I use the GC04 as a banner with a link? The 12-column grid Push and Pull

16 GC_04v2

17 GC_04v2

18 GC_04v2

19 GC_04v2

20 GC_11v2 3. GC11v3 [Text]

21 GC_11v2 Configuration of GC11v3: Short description Can I use HTML tags in the text component? What text styles can I use? What are the alignment options?

22 GC_11v2 More configuration of GC11v3: Links and buttons do not Read more, read less (accordion) What are the background options? Columns

23 GC_11v2

24 GC_11v2

25 GC_11v2

26 GC_13 4. GC13v2 [Image]

27 GC_13 Configuration of GC13v2: The Image component shows an image. 4 different images can be uploaded for each viewport (L, M, S and XS). An optional link can be specified to open in a new window, or the same window. And Analytics and should be implemented for this link as well if it is used. Where is the image stored? The image can refer to a URL (eg. Scene7), or the Adobe CQ DAM (document asset management) - where it should be uploaded by an author. Scene7 Adobe Scene7 supports a.o. width and height parameters that will return the image in the correct size, which benefits performance. This makes Scene7 is sometimes preferred over CQ DAM. All product images are stored in Scene7 automatically. Digital Services supports manual or batch upload of images to Scene7 (standard service). DAM Always upload your assets with the correct name, dimensions and size. Any editing/cropping etc. needs to be done before uploading to CQ DAM. Make sure to always upload assets that are optimized for their screen rendition. What are correct image dimensions? The dimensions of an image depends on the design of the page of course, but it is recommended to keep to either 4:3 or 16:9 ratio. It is possible to configure a minimum height for the image. By default the height is dynamic or inherits this from a parent container component. When using an image over the width of 100% on mobile, these are the min sizes the image should be: S: width = 700px XS: width = 450px

28 GC_13 Image guidelines: What file size should be respected? What are correct formats?

29 GC_13

30 GC_13

31 GC_05v2 5. GC05v2 [Tab container] Different usage of tab container:

32 GC_05v2 Configuration of GC05v2:

33 GC_05v2 More configuration of GC_05v2: Animations Can I add icons or images to the tabs?

34 GC_05v2

35 GC_05v2

36 GC_05v2

37 GC_08 7. GC08 [Teaser]

38 GC_08 Configuration of GC08: Short description Layout options Example of GC08 with image and text

39 GC_08

40 GC_08

41 GC_08

42 GC_08

43 GC_08

44 SC_01v2 7. SC01v2 [Video]

45 SC_01v2 Configuration of SC01v2: Short description Where is the video coming from? Layout options It's possible to add a custom still image (per viewport L, M, S, XS) Youtube video settings Spacer tab: IMPORTANT!

46 SC_01v2

47 SC_01v2

48 SC_01v2

49 SC_01v2

50 SC_01v2

51 SC_05 8. SC05 [Social sharing]

52 SC_05 Configuration of SC05: Short description Supported:

53 SC_05

54 SC_05

55 SC_05

56 SC_05

57 GC06 GC06 [Story banner] Component library: storybanner.html

58 GC06 Configuration of GC06 Short description GC06 is a story-telling, generic component to setup a banner/teaser/masthead which shows the text below the image on mobile breakpoints. On desktop, the content in GC06 is placed on top of the background image. The component has a parsys available which can be positioned as desired an is allowed to contain other generic components. The MH01 is still preferred to be used as masthead as it is optimized for performance. But the GC06 supports some functionalities that are not in the MH01 Layout options General tab Author can set Component ID for container. Component ID can be used for in-page navigation (e.g. #ID ); Author can set Color styling for Desktop and Mobile break points, this will control colors used for elements used in parsys; Author can set Citation for the image; Author can select the image height for Desktop and Mobile break points separately; Author can select whether the parsys needs to be vertically center aligned or that a custom height from top will be used. Author can select the Top spacing for parsys; Author can select the Width for parsys; Author can select the Offset for parsys; Author can set an optional CTA (this will be shown as the round circle on the Masthead). Author can implement an Analytics tag for the component to send over for Analytics (important: if unsure, please contact Analytics team digital.services@philips.com for instructions).

59 GC06 More configuration of GC06 Background tab This is a generic background tab widget, which can contain a background color, gradient, image or video (Scene7 only). Spacing tab This is a generic spacing tab widget, which makes the author able to add top/bottom spacing and a left/right cell gutter to the component. Business logic If a URL has been filled in the CTA URL field, the CTA button will become visible.

60 GC06

61 GC06

62 GC06

63 GC06

64 N11v2 N11v2 [List of pages] Example:

65 N11v2 Configuration of N11v2 Short description The N11v2 component renders an overview of pages managed in CQ, most often shown as clickable page cards. The content of the page cards is determined by the template, that is used for creating the detail page. The look and feel is can be changed by choosing a different rendition. Most templates have a default rendition, showing the title, image and descriptive text of a certain page. Layout tab You can select a design by choosing a rendition. Each rendition has a specific way of displaying the page properties of a page. Such as image, title, description, CTA. Please note the newest renditions only work with Scene7 images, there are some templates that still don t support this. In these cases you can only select the RN26 or RN27. These are the migrated renditions of the old N11v1 setup. You can set the row layout to show how many cards there should be on 1 row. Do note it is a bit hidden as it by default collapsed in the dialogue. Also note this setting is mandatory for the component to show.

66 N11v2 More configuration of N11v2 Pages tab You can select the pages manually or automatically by choosing a root path or adding separate pages. With the automatic option you have the possibility to filter on templates, tags/keywords, filterkeys Design options Arrows can be turned on and off. When on you can set it to show inside the 960px viewport, or outside the viewport on the far left and right of your browser window. Bullets can also be turned on and off and either displayed over the carousel, or beneath it. If you have a max amount of pages shown and there are more than that, there can be a slide counter. Which can be shown on or above the slide. For most of these options you can also override the color styling per section (arrows, parsys, title, etc.). Spacing tab This is a generic spacing tab widget, which makes the author able to add top/bottom spacing and a left/right cell gutter to the component. Analytics Also in this component you can override the Analytics settings to identify the type of list of pages. For instance Related Articles, Resources or something like that.

67 N11v2

68 N11v2

69 N11v2

70 N11v2

71 N11v2

72 N11v2

73 N11v2

74 N11v2

75 PC_ PC_02 [Subcategory listing]

76 PC_02 Configuration of PC_02: Short description Automatic and Manual Mode Layout Options Where does it link to? Where is the data coming from?

77 PC_02 More configuration of PC_02: Image Features Price Can I manually override data?

78 PC_02

79 PC_02

80 PC_02

81 PC_02

82 PC_02

83 PC_ PC_05 [Product cards]

84 PC_05 Configuration of PC_05: Short description Input for the component Layout Options

85 PC_05 More configuration of PC_05: Show or hide fields Where is the data coming from? Can I manually override data?

86 PC_05

87 PC_05

88 PC_05

89 PC_ P54v3 [Product cards]

90 Access Compontents training validation test: Student login address: Room ID: 5MSBWRII Note: after the test is completed it will mention waiting for teacher you can close your browser/tab now.

91