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

目录 背景回顾

存在的问题

解决方案

未解决的问题

我们的建议

背景回顾

以往

以往的线上活动网站搭建均使用HTML 程序，在moist.com.cn

上搭建Minisite 。

POA2

本次的线上活动网站搭建首次使用HTML5 程序，在

moist.com.cn 上搭建Minisite ，并以 IFRAME

的形式嵌入强生官网。

存在问题

自适应问题

添加锚点问题

GA 检测问题

不能使用 Flash

？4

2

3

1

目录 背景回顾

存在的问题

解决方案

未解决的问题

我们的建议

问题描述

自适应问题

Step1 中，网站自适应问题印度方面已做过一次调整，若 moist.com.cn页面的手机版最小宽度为 320px ，则嵌套在官网下不会出现任何问题。

但是因为线上活动形式和内容的要求，活动网站不能保证手机版的最小宽度为320px 。例如 Step2 ，需上传照片替换，调整照片大小，拖动照片位置，且上传照片的最小宽度为 350px ，若将 moist.com.cn页面的手机版最小宽度设为320px ，就没法操作了。

1

添加锚点问题

希望在 moist.com.cn中点击某个按钮后跳转到当前页面的某个部分，则需要在 moist.com.cn中添加锚点。

但因为 moist.com.cn作为 iFrame 嵌套在官网页面中，在 moist.com.cn中添加锚点只能让作为 iFrame 的 moist.com.cn页面刷新，并不会跳转到想要的位置。

问题描述

2

GA 监测问题

本次活动 moist.com.cn的监测代码为联美添加，使用联美的 GA 帐号，acuvue.com.cn的监测代码为印度方面添加，使用强生的 GA 账号。

这使得 moist.com.cn监测到的数据来源是 acuvue.com.cn，同样，moist.com.cn中热点事件也无法区分广告来源。

这样分别进行监测，还会导致 acuvue.com.cn的监测数据不准确，跳出率及停留时间数据不可用。

问题描述

3

HTML5 和 Flash 的使用问题

因强生官网规定嵌入页面只能使用 HTML5 编写，且国内不少地区的浏览器依然以不支持 HTML5 的 IE6 ， IE7 和国产浏览器为主，这部分用户的浏览体验不佳。

因强生官网规定嵌入页面不能使用 Flash 编写，且 HTML5 图片、动画方面的表现和处理能力远弱于 Flash ，致使 moist.com.cn的创意和表现形式受到限制。

问题描述

4

目录 背景回顾

存在的问题

解决方案

未解决的问题

我们的建议

这次 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>

自适应问题

解决方案

1

解决这个问题，需要将锚点添加在 acuvue.com.cn中，这需要印度方面在程序中添加如下代码：

<div style=“position:absolute;top:610px”><a name=“create”></a></div>

注： 610px 为需要跳转到的页面的高度位置（含官网头部的高度）。

添加锚点问题

解决方案

2

GA 监测问题

需要添加同一个 GA 帐号的跨域监测代码。另外，在传统代码的基础上还需关闭 hash 值，父级页面中的 link 采用 _gaq.push([‘_link’ 的方式，把父级页面的 cookies 信息传递到子级页面中。

_gaq.push(['_setAllowLinker', true]); _gaq.push(['_setAllowHash', false]);

解决方案

3

网站分离， moist.com.cn不再以 iFrame 的形式嵌入acuvue.com.cn，这样，就不会在编程语言方面受到限制。

HTML5 和 Flash 的使用问题

解决方案

4

自适应问题

印度方面为保持品牌网站内容的统一性，不愿在官网中添加上述代码。

从在品牌官网的定位角度上看，印度方面的要求是合理的。

但我们的活动网站需要依附在官网的平台下运行，两者需求的差异，导致问题无法解决。

活动网站嵌入官网后，在手机上无法自适应页面大小。

未能解决

1

添加锚点问题

印度方面为保持品牌网站内容的统一性，不愿在官网中添加上述代码。

从在品牌官网的定位角度上看，印度方面的要求是合理的。

但我们的活动网站需要依附在官网的平台下运行，两者需求的差异，导致问题无法解决。

点击“立即参加”， iFrame中的页面只是刷新，并不跳转到想要的位置。

未能解决

2

GA 监测问题

印度方面为保持品牌网站内容的统一性，不愿在官网中添加上述代码，这导致活动数据监测不准确、无法分析数据来源和广告质量。

即使印度方便允许修改官网页面，给 acuvue.com.cn和 moist.com.cn添加同一套跨域 GA 监测代码，也需要进行调试，防止添加的 GA 监测代码和强生官网现有的代码存在冲突。

Moist 监测到的用户来源，都是 acuvue.com.cn

未能解决

3

HTML5 和 Flash 的使用问题

因强生要求活动网站以 iFrame 的形式嵌入 acuvue.com.cn，且只允许活动网站使用 HTML5 编写，这个问题无法解决。

Step1 -- IE6 加 IE7 用户占总用户的比例达到 35.35%Step2 -- IE6 用户无法参与活动，但 IE6 加 IE7 用户占总用户的比例依然高达 25.82%

Step1 IE6 和 IE7访问数

Step2 IE6 和 IE7访问数

未能解决

VS

4

目录 背景回顾

存在的问题

解决方案

未解决的问题

我们的建议

温馨建议

若今后依然需要将 moist.com.cn 以 IFRAME 的形式嵌入acuvue.com.cn ，

则需要印度方面的配合，允许在官网活动页面添加一些代码。更好的办法是 moist.com.cn 不再以 IFRAME 的形式嵌入

acuvue.com.cn ，这样，无需任何措施，上述提到的所有问题都不再存在。

Thank You！