1 / 21

JNJ-00-0080 强生安视优 POA2

JNJ-00-0080 强生安视优 POA2. Step1+Step2 网站搭建问题说明. 目录. 背景回顾 存在的问题 解决方案 未解决的问题 我们的建议. 背景回顾. 以往. POA2. 本次的线上活动 网站搭建首次使用 HTML5 程序，在 moist.com.cn 上搭建 Minisite ，并以 IFRAME 的形式嵌入强生官网。. 以往的线上活动 网站搭建均使用 HTML 程序，在 moist.com.cn 上搭建 Minisite 。. 存在问题. 1. 自适应问题. ？. 2. 添加锚点问题. 3.

olivia-hyde
Download Presentation

JNJ-00-0080 强生安视优 POA2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JNJ-00-0080强生安视优 POA2 • Step1+Step2网站搭建问题说明

  2. 目录 • 背景回顾 • 存在的问题 • 解决方案 • 未解决的问题 • 我们的建议

  3. 背景回顾 以往 POA2 本次的线上活动 网站搭建首次使用 HTML5程序，在moist.com.cn上搭建Minisite，并以IFRAME 的形式嵌入强生官网。 以往的线上活动 网站搭建均使用 HTML程序，在moist.com.cn上搭建Minisite。

  4. 存在问题 1 自适应问题 ？ 2 添加锚点问题 3 GA检测问题 4 不能使用Flash

  5. 目录 • 背景回顾 • 存在的问题 • 解决方案 • 未解决的问题 • 我们的建议

  6. 1 自适应问题 问题描述 Step1中，网站自适应问题印度方面已做过一次调整，若moist.com.cn页面的手机版最小宽度为320px，则嵌套在官网下不会出现任何问题。 但是因为线上活动形式和内容的要求，活动网站不能保证手机版的最小宽度为320px。例如Step2，需上传照片替换，调整照片大小，拖动照片位置，且上传照片的最小宽度为350px，若将moist.com.cn页面的手机版最小宽度设为320px，就没法操作了。

  7. 2 添加锚点问题 问题描述 希望在moist.com.cn中点击某个按钮后跳转到当前页面的某个部分，则需要在moist.com.cn中添加锚点。 但因为moist.com.cn作为iFrame嵌套在官网页面中，在moist.com.cn中添加锚点只能让作为iFrame的moist.com.cn页面刷新，并不会跳转到想要的位置。

  8. 3 GA监测问题 问题描述 本次活动moist.com.cn的监测代码为联美添加，使用联美的GA帐号，acuvue.com.cn的监测代码为印度方面添加，使用强生的GA账号。 这使得moist.com.cn监测到的数据来源是acuvue.com.cn，同样，moist.com.cn中热点事件也无法区分广告来源。 这样分别进行监测，还会导致acuvue.com.cn的监测数据不准确，跳出率及停留时间数据不可用。

  9. 4 HTML5和Flash的使用问题 问题描述 因强生官网规定嵌入页面只能使用HTML5编写，且国内不少地区的浏览器依然以不支持HTML5 的IE6，IE7和国产浏览器为主，这部分用户的浏览体验不佳。 因强生官网规定嵌入页面不能使用Flash编写，且HTML5图片、动画方面的表现和处理能力远弱于Flash，致使moist.com.cn的创意和表现形式受到限制。

  10. 目录 • 背景回顾 • 存在的问题 • 解决方案 • 未解决的问题 • 我们的建议

  11. 1 自适应问题 解决方案 这次moist.com.cn页面的手机版最小宽度为640px，解决自适应问题的方法如下： 1：在META信息中加上代码： <META name=viewport content=target-densitydpi=320,width=640,user-scalable=no> 2：iFrame页面的宽度不要用百分比表示： <IFRAME height=1320 src="1_files/postcard.htm" frameBorder=0 width=640></IFRAME>

  12. 2 添加锚点问题 解决方案 解决这个问题，需要将锚点添加在acuvue.com.cn中，这需要印度方面在程序中添加如下代码： <div style=“position:absolute;top:610px”><a name=“create”></a></div> 注：610px为需要跳转到的页面的高度位置（含官网头部的高度）。

  13. 3 GA监测问题 解决方案 需要添加同一个GA帐号的跨域监测代码。另外，在传统代码的基础上还需关闭hash值，父级页面中的link采用 _gaq.push([‘_link’的方式，把父级页面的cookies信息传递到子级页面中。_gaq.push(['_setAllowLinker', true]);_gaq.push(['_setAllowHash', false]);

  14. 4 HTML5和Flash的使用问题 解决方案 网站分离，moist.com.cn不再以iFrame的形式嵌入acuvue.com.cn，这样，就不会在编程语言方面受到限制。

  15. 1 自适应问题 未能解决 印度方面为保持品牌网站内容的统一性，不愿在官网中添加上述代码。 从在品牌官网的定位角度上看，印度方面的要求是合理的。 但我们的活动网站需要依附在官网的平台下运行，两者需求的差异，导致问题无法解决。 活动网站嵌入官网后，在手机上无法自适应页面大小。

  16. 2 添加锚点问题 未能解决 印度方面为保持品牌网站内容的统一性，不愿在官网中添加上述代码。 从在品牌官网的定位角度上看，印度方面的要求是合理的。 但我们的活动网站需要依附在官网的平台下运行，两者需求的差异，导致问题无法解决。 点击“立即参加”，iFrame中的页面只是刷新，并不跳转到想要的位置。

  17. 3 GA监测问题 未能解决 印度方面为保持品牌网站内容的统一性，不愿在官网中添加上述代码，这导致活动数据监测不准确、无法分析数据来源和广告质量。 即使印度方便允许修改官网页面，给acuvue.com.cn和moist.com.cn添加同一套跨域GA监测代码，也需要进行调试，防止添加的GA监测代码和强生官网现有的代码存在冲突。 Moist监测到的用户来源，都是acuvue.com.cn

  18. 4 HTML5和Flash的使用问题 未能解决 因强生要求活动网站以iFrame的形式嵌入acuvue.com.cn，且只允许活动网站使用HTML5编写，这个问题无法解决。 Step1 IE6和IE7访问数 Step2 IE6和IE7访问数 Step1-- IE6加IE7用户占总用户的比例达到35.35% Step2-- IE6用户无法参与活动，但IE6加IE7用户占总用户的比例依然高达25.82% VS

  19. 目录 • 背景回顾 • 存在的问题 • 解决方案 • 未解决的问题 • 我们的建议

  20. 温馨建议 • 若今后依然需要将moist.com.cn以IFRAME的形式嵌入acuvue.com.cn， • 则需要印度方面的配合，允许在官网活动页面添加一些代码。 • 更好的办法是moist.com.cn不再以IFRAME的形式嵌入acuvue.com.cn，这样，无需任何措施，上述提到的所有问题都不再存在。

  21. Thank You！

More Related