AdWords API Workshops – All rights reserved
Mobile Landing Pages
Como melhorar conversões

+Paul Matthews, Google, Inc.
*Adaptado e apresentado por Lia Carrari (googl...
Agenda
+ Por que otimizar para dispositivos móveis?
+ Dispositivos Móveis na API do Adwords
+ 8 Dicas Essenciais
+ Ferrame...
Por que otimizar
para dispositivos móveis?

AdWords API Workshops – All rights reserved
Por que otimizar para dispositivos móveis?

15%

do trafego da internet
vem de dispositivos
móveis

… e a tendência é aume...
Por que otimizar para dispositivos móveis?

#4

é a posição do Brasil na lista
de países com maior número
de usuários de s...
Por que otimizar para dispositivos móveis?

77%
28%

das buscas feitas em
dispositivos móveis são
em casa ou no trabalho

...
Dispositivos Móveis na
API do Adwords
Como mostrar anúncios em dispositivos móveis

AdWords API Workshops – All rights res...
Ajuste de lance para Dispositivos Móveis
Nível da Campanha: CampaignCriterionService

Platform
+ 30001: high-end mobile
(h...
Mobile Preferred

Ad.devicePreference = 30001

AdWords API Workshops – All rights reserved
Mobile Ads
AdGroupAdService

AdWords API Workshops – All rights reserved
Mobile Ads

AdWords API Workshops – All rights reserved

https://developers.google.com/adwords/api/docs/appendix/templatea...
8 Dicas Essenciais
para páginas de destino de dispositivos móveis

AdWords API Workshops – All rights reserved
1 Entregue rápido
Otmize o server-side
+ Reduza de tempo de processamento
+ Minimize redirects
+ Arquivos:
- concatene rec...
2 Performance
+ Otimize o client-side
+ Evite processar páginas pesadas

+ Use cache
- Far-future cache

- Use DevTools

-...
3 Conteúdo completo
+ Otimize sem remover conteúdo
+ Mantenha a Consistencia!
+ JavaScript para aprimorar

AdWords API Wor...
4 Adapte para a tela
+ Use design responsivo/adaptativo
+ Mobile-First
+ @media

AdWords API Workshops – All rights reserv...
5 Foco no Usuário
+ Viewport
- Configure o viewport com a largura do dispositivo:
<meta name="viewport" content="width=dev...
6 Acessibilidade
+ Texto em imagens
+ Use ALT

http://www.google.com/accessibility/
AdWords API Workshops – All rights res...
7 Código Robusto
+ Muitos navegadores para testar:
- Detecte recursos - não navegadores
+ Vendor prefix
+ Trate Excessões
...
8 Priorize Conteúdo Visível
+ “Above-the-fold”
+ Bloqueio de CSS & JS
+ < ~14KB
+ Web fonts

AdWords API Workshops – All r...
Ferramentas
Para desenvolvimento em dispositivos móveis

AdWords API Workshops – All rights reserved
HTML5 Rocks
www.html5rocks.com/mobile/
+ How does your site behave?
+ Great mobile experience
+ Making your site FAST

AdW...
Debug Remoto
goo.gl/ruR5LU

AdWords API Workshops – All rights reserved
Emulador de dispositivos
goo.gl/k5cYA
+ Deselvolva sem dispositivo

AdWords API Workshops – All rights reserved
PageSpeed Insights
goo.gl/JjzS2t
+ Avaliação do seu site
+ Lista de recomendações
■

High

■

Medium

■

Low

AdWords API ...
Recursos
HTML5 Rocks - http://www.html5rocks.com/mobile
Remote Debugging - http://goo.gl/ruR5LU
Mobile Emulation - http://...
Perguntas?

AdWords API Workshops – All rights reserved
AdWords API Workshops – All rights reserved
AdWords API Workshops – All rights reserved
AdWords API Workshops – All rights reserved
Mobile Landing Pages
How to improve conversion

+Paul Matthews, Google, Inc.

AdWords API Workshops – All rights reserved
Agenda
● Mobile in AdWords API
● 8 Essentials
● Mobile Development Tooling

AdWords API Workshops – All rights reserved
Mobile in AdWords API
How to make Ads display on mobile

AdWords API Workshops – All rights reserved
Mobile bid adjustment
● CampaignCriterionService
● AdGroupBidModifierService
○ Criterion > Platform

○ bidModifier

AdWord...
Mobile Preferred

● Ad.devicePreference = 30001

AdWords API Workshops – All rights reserved
Mobile Ads
● AdGroupAdService
○ MobileAd

○ MobileImageAd

AdWords API Workshops – All rights reserved
Mobile Ads
● TemplateAd
○ App promotion ad
○ TemplateId: 353

AdWords API Workshops – All rights reserved
8 Essentials
Of mobile landing pages

AdWords API Workshops – All rights reserved
1. Deliver Faster
● Optimize server-side
○ Reduce Processing Time
○ Minimize Redirects

AdWords API Workshops – All rights...
1. Deliver Faster
● Files
○ Concatenate Assets
○ Minify CSS & JavaScript

● Caching
○ Re-use Assets

AdWords API Workshops...
Performance as Feature
● Enhance with client-side optimizations
● Avoid process heavy pages
○ Use DevTools to detect
○ Avo...
Performance as Feature
● Use the cache
○ Far-future cache
○ Change URL to break cache

● CSS
○ Beware of generators

AdWor...
Full Content on All Devices
● No second-class citizens
● Consistency is King!
● JavaScript to enhance

AdWords API Worksho...
Adapt to the Screen
● Responsive / adaptive design
● Mobile First
○ @media & Breakpoints

AdWords API Workshops – All righ...
Focus on the User
● Viewport
● Avoid text entry
● Horizontal Scrolling

AdWords API Workshops – All rights reserved
Focus on the User
● Pinch-Zoom & Touch
● Large target navigation
● Readable without Background

AdWords API Workshops – Al...
Make it accessible
● Text within images
● Covered by fingers

AdWords API Workshops – All rights reserved
Code for Robustness
● Too many browsers to test
○ Detect features - not browsers

● Vendor prefixes
● Catch Exceptions
● A...
Prioritize Visible Content
● “Above-the-fold”
● Blocking CSS & JS
● Ideally less than ~14KB
● Web fonts

AdWords API Works...
Mobile Development Tools

AdWords API Workshops – All rights reserved
HTML5 Rocks
● www.html5rocks.com/mobile/
○ How does your site behave?
○ Great mobile experience
○ Making your site FAST

A...
Remote Debugging
● goo.gl/ruR5LU
○ Develop on mobile

AdWords API Workshops – All rights reserved
Mobile Emulation
● goo.gl/k5cYA
○ Develop for mobile
○ No device needed

AdWords API Workshops – All rights reserved
PageSpeed Insights
● goo.gl/JjzS2t
○ Scores your page
○ Graded suggestions
■

High

■

Medium

■

Low

AdWords API Worksho...
Summary

AdWords API Workshops – All rights reserved
Mobile in AdWords API
● Mobile Bidding
● Mobile Preferred
● Mobile Ads

AdWords API Workshops – All rights reserved
8 Essentials (1)
● Deliver Faster
● Performance as Feature
● Full Content on All Devices
● Adapt to the Screen

AdWords AP...
8 Essentials (2)
● Focus on the User
● Make it accessible
● Code for Robustness
● Prioritize Visible Content

AdWords API ...
Tooling
● HTML5 Rocks
● Remote Debugging
● Mobile Emulation

AdWords API Workshops – All rights reserved
Resources
Links
HTML5 Rocks - http://www.html5rocks.com/mobile
Remote Debugging - http://goo.gl/ruR5LU
Mobile Emulation - ...
Questions?

AdWords API Workshops – All rights reserved
AdWords API Workshops – All rights reserved
Upcoming SlideShare
Loading in …5
×

Mobile landing pages

432 views

Published on

São Paulo AdWords API Workshops

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
432
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile landing pages

  1. 1. AdWords API Workshops – All rights reserved
  2. 2. Mobile Landing Pages Como melhorar conversões +Paul Matthews, Google, Inc. *Adaptado e apresentado por Lia Carrari (google.com/+LiaCarrari) AdWords API Workshops – All rights reserved
  3. 3. Agenda + Por que otimizar para dispositivos móveis? + Dispositivos Móveis na API do Adwords + 8 Dicas Essenciais + Ferramentas AdWords API Workshops – All rights reserved
  4. 4. Por que otimizar para dispositivos móveis? AdWords API Workshops – All rights reserved
  5. 5. Por que otimizar para dispositivos móveis? 15% do trafego da internet vem de dispositivos móveis … e a tendência é aumentar AdWords API Workshops – All rights reserved http://www.kpcb.com/insights/2013-internet-trends
  6. 6. Por que otimizar para dispositivos móveis? #4 é a posição do Brasil na lista de países com maior número de usuários de smartphones. 23% 28% AdWords API Workshops – All rights reserved dos planos no Brasil são de smartphones de crescimento Y/Y http://www.kpcb.com/insights/2013-internet-trends
  7. 7. Por que otimizar para dispositivos móveis? 77% 28% das buscas feitas em dispositivos móveis são em casa ou no trabalho das buscas em dispositivos móveis levam a conversão (visita a loja, chamada, compra) AdWords API Workshops – All rights reserved 55% das conversões em compras feitas por dispositivos móveis ocorrem em menos de 1 hora 59% dos consumidores acham anúncios em dispositivos móveis úteis http://www.google.com/think/research-studies/creating-moments-that-matter.html
  8. 8. Dispositivos Móveis na API do Adwords Como mostrar anúncios em dispositivos móveis AdWords API Workshops – All rights reserved
  9. 9. Ajuste de lance para Dispositivos Móveis Nível da Campanha: CampaignCriterionService Platform + 30001: high-end mobile (high priority) + 30000: desktop (low) + 30002: tablet (low) bidModifier + Min: 0.1 (10%) + Max: 4.0 (400%) + Opt-Out: 0 (of mobile) Nível do Grupo de Anúncio: AdGroupBidModifierService AdWords API Workshops – All rights reserved
  10. 10. Mobile Preferred Ad.devicePreference = 30001 AdWords API Workshops – All rights reserved
  11. 11. Mobile Ads AdGroupAdService AdWords API Workshops – All rights reserved
  12. 12. Mobile Ads AdWords API Workshops – All rights reserved https://developers.google.com/adwords/api/docs/appendix/templateads?hl=en#flipcup_ad
  13. 13. 8 Dicas Essenciais para páginas de destino de dispositivos móveis AdWords API Workshops – All rights reserved
  14. 14. 1 Entregue rápido Otmize o server-side + Reduza de tempo de processamento + Minimize redirects + Arquivos: - concatene recursos - minifique CSS e JavaScript + Caching - reuse recursos AdWords API Workshops – All rights reserved
  15. 15. 2 Performance + Otimize o client-side + Evite processar páginas pesadas + Use cache - Far-future cache - Use DevTools - Versionamento no - Evite redesenhar nome/URL do arquivo - Eventos JavaScript - Animações + CSS - Cuidado com geradores AdWords API Workshops – All rights reserved
  16. 16. 3 Conteúdo completo + Otimize sem remover conteúdo + Mantenha a Consistencia! + JavaScript para aprimorar AdWords API Workshops – All rights reserved
  17. 17. 4 Adapte para a tela + Use design responsivo/adaptativo + Mobile-First + @media AdWords API Workshops – All rights reserved
  18. 18. 5 Foco no Usuário + Viewport - Configure o viewport com a largura do dispositivo: <meta name="viewport" content="width=device-width, initial-scale=1> + Evite entradas de texto + Horizontal Scrolling + Pinch-Zoom & Touch + Objeto de navegação grande + Legível sem fundo AdWords API Workshops – All rights reserved
  19. 19. 6 Acessibilidade + Texto em imagens + Use ALT http://www.google.com/accessibility/ AdWords API Workshops – All rights reserved
  20. 20. 7 Código Robusto + Muitos navegadores para testar: - Detecte recursos - não navegadores + Vendor prefix + Trate Excessões + Evite gargalos AdWords API Workshops – All rights reserved
  21. 21. 8 Priorize Conteúdo Visível + “Above-the-fold” + Bloqueio de CSS & JS + < ~14KB + Web fonts AdWords API Workshops – All rights reserved
  22. 22. Ferramentas Para desenvolvimento em dispositivos móveis AdWords API Workshops – All rights reserved
  23. 23. HTML5 Rocks www.html5rocks.com/mobile/ + How does your site behave? + Great mobile experience + Making your site FAST AdWords API Workshops – All rights reserved
  24. 24. Debug Remoto goo.gl/ruR5LU AdWords API Workshops – All rights reserved
  25. 25. Emulador de dispositivos goo.gl/k5cYA + Deselvolva sem dispositivo AdWords API Workshops – All rights reserved
  26. 26. PageSpeed Insights goo.gl/JjzS2t + Avaliação do seu site + Lista de recomendações ■ High ■ Medium ■ Low AdWords API Workshops – All rights reserved
  27. 27. Recursos HTML5 Rocks - http://www.html5rocks.com/mobile Remote Debugging - http://goo.gl/ruR5LU Mobile Emulation - http://goo.gl/k5cYA Google Acessibility - http://www.google.com/accessibility/ Internet Trends 2013 - http://www.kpcb.com/insights/2013-internet-trends Google Think - http://www.google.com/think/research-studies/creating-moments-that-matter.html AdWords API Workshops – All rights reserved
  28. 28. Perguntas? AdWords API Workshops – All rights reserved
  29. 29. AdWords API Workshops – All rights reserved
  30. 30. AdWords API Workshops – All rights reserved
  31. 31. AdWords API Workshops – All rights reserved
  32. 32. Mobile Landing Pages How to improve conversion +Paul Matthews, Google, Inc. AdWords API Workshops – All rights reserved
  33. 33. Agenda ● Mobile in AdWords API ● 8 Essentials ● Mobile Development Tooling AdWords API Workshops – All rights reserved
  34. 34. Mobile in AdWords API How to make Ads display on mobile AdWords API Workshops – All rights reserved
  35. 35. Mobile bid adjustment ● CampaignCriterionService ● AdGroupBidModifierService ○ Criterion > Platform ○ bidModifier AdWords API Workshops – All rights reserved
  36. 36. Mobile Preferred ● Ad.devicePreference = 30001 AdWords API Workshops – All rights reserved
  37. 37. Mobile Ads ● AdGroupAdService ○ MobileAd ○ MobileImageAd AdWords API Workshops – All rights reserved
  38. 38. Mobile Ads ● TemplateAd ○ App promotion ad ○ TemplateId: 353 AdWords API Workshops – All rights reserved
  39. 39. 8 Essentials Of mobile landing pages AdWords API Workshops – All rights reserved
  40. 40. 1. Deliver Faster ● Optimize server-side ○ Reduce Processing Time ○ Minimize Redirects AdWords API Workshops – All rights reserved
  41. 41. 1. Deliver Faster ● Files ○ Concatenate Assets ○ Minify CSS & JavaScript ● Caching ○ Re-use Assets AdWords API Workshops – All rights reserved
  42. 42. Performance as Feature ● Enhance with client-side optimizations ● Avoid process heavy pages ○ Use DevTools to detect ○ Avoid repaints ○ JavaScript events & animations AdWords API Workshops – All rights reserved
  43. 43. Performance as Feature ● Use the cache ○ Far-future cache ○ Change URL to break cache ● CSS ○ Beware of generators AdWords API Workshops – All rights reserved
  44. 44. Full Content on All Devices ● No second-class citizens ● Consistency is King! ● JavaScript to enhance AdWords API Workshops – All rights reserved
  45. 45. Adapt to the Screen ● Responsive / adaptive design ● Mobile First ○ @media & Breakpoints AdWords API Workshops – All rights reserved
  46. 46. Focus on the User ● Viewport ● Avoid text entry ● Horizontal Scrolling AdWords API Workshops – All rights reserved
  47. 47. Focus on the User ● Pinch-Zoom & Touch ● Large target navigation ● Readable without Background AdWords API Workshops – All rights reserved
  48. 48. Make it accessible ● Text within images ● Covered by fingers AdWords API Workshops – All rights reserved
  49. 49. Code for Robustness ● Too many browsers to test ○ Detect features - not browsers ● Vendor prefixes ● Catch Exceptions ● Avoid Bottlenecks AdWords API Workshops – All rights reserved
  50. 50. Prioritize Visible Content ● “Above-the-fold” ● Blocking CSS & JS ● Ideally less than ~14KB ● Web fonts AdWords API Workshops – All rights reserved
  51. 51. Mobile Development Tools AdWords API Workshops – All rights reserved
  52. 52. HTML5 Rocks ● www.html5rocks.com/mobile/ ○ How does your site behave? ○ Great mobile experience ○ Making your site FAST AdWords API Workshops – All rights reserved
  53. 53. Remote Debugging ● goo.gl/ruR5LU ○ Develop on mobile AdWords API Workshops – All rights reserved
  54. 54. Mobile Emulation ● goo.gl/k5cYA ○ Develop for mobile ○ No device needed AdWords API Workshops – All rights reserved
  55. 55. PageSpeed Insights ● goo.gl/JjzS2t ○ Scores your page ○ Graded suggestions ■ High ■ Medium ■ Low AdWords API Workshops – All rights reserved
  56. 56. Summary AdWords API Workshops – All rights reserved
  57. 57. Mobile in AdWords API ● Mobile Bidding ● Mobile Preferred ● Mobile Ads AdWords API Workshops – All rights reserved
  58. 58. 8 Essentials (1) ● Deliver Faster ● Performance as Feature ● Full Content on All Devices ● Adapt to the Screen AdWords API Workshops – All rights reserved
  59. 59. 8 Essentials (2) ● Focus on the User ● Make it accessible ● Code for Robustness ● Prioritize Visible Content AdWords API Workshops – All rights reserved
  60. 60. Tooling ● HTML5 Rocks ● Remote Debugging ● Mobile Emulation AdWords API Workshops – All rights reserved
  61. 61. Resources Links HTML5 Rocks - http://www.html5rocks.com/mobile Remote Debugging - http://goo.gl/ruR5LU Mobile Emulation - http://goo.gl/k5cYA AdWords API Workshops – All rights reserved
  62. 62. Questions? AdWords API Workshops – All rights reserved
  63. 63. AdWords API Workshops – All rights reserved

×