NEWS
当前位置:首页 > 客户案例 > 电子商务

如何使用cookie自定义网页内容

undefined | 作者:管理员| 发布时间:2023-08-15 04:33
15
08
2023

什么是 Cookie?

Cookie 在网站的运作中发挥着至关重要的作用。它们还可以增强用户的浏览体验。

简而言之,Cookie 是网站在用户浏览各种网页时存储在用户计算机或设备上的小文件。这些文件包含网站用来记住某些信息和设置的数据,最终为用户改进网站的性能和定制。

当用户访问网站时,该网站的服务器会向用户的浏览器发送 cookie,然后浏览器将其存储在用户的计算机或设备上。下次用户访问同一网站时,浏览器会将存储的 cookie 发送回服务器。这使得网站能够识别用户、记住他们的偏好并提供个性化内容。

Cookie 具有多种功能,例如记住登录信息、语言偏好和购物车内容。

例如,当您访问在线购物网站并将商品添加到购物车时,即使您导航到其他页面,Cookie 也会帮助保留这些商品。 Cookie 还可以记住您的登录详细信息,因此您不必在每次访问网站时重新输入这些信息。

Cookie 还可用于跟踪用户行为并收集有关网站使用情况的信息。这些信息通常是匿名的,可帮助网站所有者分析流量模式、识别热门页面并改进网站的设计和功能。

广告商还使用 cookie 根据用户的浏览习惯和兴趣投放有针对性的广告。这使他们能够展示用户更可能感兴趣的相关广告。

关于 Cookie 和用户隐私的说明

Cookie 旨在成为增强用户体验和改进网站功能的工具。但对隐私和安全的担忧导致了有关使用 cookie 的法规和指南的制定。现在许多网站都提供 cookie 同意通知,允许用户选择是否接受或拒绝 cookie。

在过去的几十年里,监管机构对 cookie 的使用进行了广泛的讨论,强调了确保用户充分了解其实施情况的重要性。

在这方面已经取得了进展,包括欧盟 (EU) 推出了《通用数据保护条例》(GDPR)。如需更全面的信息,您可以从欧盟官方门户网站获取详细见解。

如果您正在考虑将 cookie 集成到您的应用程序中,我强烈建议您与您公司的法律部门讨论其影响,或咨询拥有该领域专业知识的法律专业人士。通过这样做,您可以确保遵守管理 cookie 使用的法律和监管框架,并在此过程中保护用户隐私。

让我们开始吧

假设我正在运营一家宠物爱好者电子商务网站,并且正在实施内容营销策略来吸引新客户。

我为猫爱好者创建了一个信息页面,为狗爱好者创建了另一个信息页面。两个页面都指向同一页面,我在其中提供了有关养宠物的更多详细信息。

我希望此页面根据用户来自的页面显示特定的(有针对性的)广告:如果他们访问有关猫的页面,我希望他们看到有关猫粮的广告。如果他们参观了有关狗的广告,我希望他们看到有关狗粮的广告。

让我们编码吧

我正在构建三个页面:

猫的恋人页面:mainPageCat.php(截图如下)

2.狗的情人页面:mainPageDog.php

3.目标页面:cookieTest.php

在构建页面 1 和 2 时,我使用 PHP setcookie() 函数设置 cookie。对于关于猫的页面,我向函数传递了以下参数:

<span class="token php language-php"><span class="font"><span class="size"><span class="token delimiter important"><b><?php</b></span><span class="token variable">$cookie_name</span> <span class="token operator">=</span> <span class="token string double-quoted-string">"cat"</span><span class="token punctuation">;</span><span class="token variable">$cookie_value</span> <span class="token operator">=</span> <span class="token string double-quoted-string">"catFoodAds"</span><span class="token punctuation">;</span><span class="token function">setcookie</span><span class="token punctuation">(</span><span class="token variable">$cookie_name</span><span class="token punctuation">,</span> <span class="token variable">$cookie_value</span><span class="token punctuation">,</span> <span class="token function">time</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token number">86400</span> <span class="token operator">*</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string double-quoted-string">"/"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 86400 = 1 day</span><span class="token delimiter important"><b>?></b></span></span></span></span>

对于关于狗的页面,我传递了这些参数:

<span class="token php language-php"><span class="font"><span class="size"><span class="token delimiter important"><b><?php</b></span><span class="token variable">$cookie_name</span> <span class="token operator">=</span> <span class="token string double-quoted-string">"dog"</span><span class="token punctuation">;</span><span class="token variable">$cookie_value</span> <span class="token operator">=</span> <span class="token string double-quoted-string">"dogFoodAds"</span><span class="token punctuation">;</span><span class="token function">setcookie</span><span class="token punctuation">(</span><span class="token variable">$cookie_name</span><span class="token punctuation">,</span> <span class="token variable">$cookie_value</span><span class="token punctuation">,</span> <span class="token function">time</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token number">86400</span> <span class="token operator">*</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string double-quoted-string">"/"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 86400 = 1 day</span><span class="token delimiter important"><b>?></b></span></span></span></span>

对于“更多信息”页面,我添加了一些逻辑。如果存储了猫 cookie,我会向狗广告卡添加一个 CSS 类来隐藏它。如果存储的 cookie 是来自狗页面的 cookie,我会对猫广告卡执行相同的操作。

<span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col-md-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card <span class="token php language-php"><span class="token delimiter important"><b><?php</b></span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">isset</span><span class="token punctuation">(</span><span class="token variable">$_COOKIE</span><span class="token punctuation">[</span><span class="token string single-quoted-string">dog</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">echo</span> <span class="token string single-quoted-string"> cookieClass</span><span class="token punctuation">;</span> <span class="token delimiter important"><b>?></b></span></span><span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width: 18rem;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>img <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-img-top<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"https://community.qoot.cool/</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Card image cap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>h5 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span>Buy Food for Cats<span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>h5<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>h6 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-subtitle mb-2 text-muted<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span>Excellent Food<span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>h6<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>p <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span>Dont know what else I could say about cat food.<span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>a <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span>Buy<span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col-md-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card ml-5 <span class="token php language-php"><span class="token delimiter important"><b><?php</b></span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">isset</span><span class="token punctuation">(</span><span class="token variable">$_COOKIE</span><span class="token punctuation">[</span><span class="token string single-quoted-string">cat</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">echo</span> <span class="token string single-quoted-string"> cookieClass</span><span class="token punctuation">;</span> <span class="token delimiter important"><b>?></b></span></span><span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width: 18rem;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>img <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-img-top<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"https://community.qoot.cool/</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Card image cap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>h5 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span>Buy Food for Dogs<span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>h5<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>h6 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-subtitle mb-2 text-muted<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span>Excellent Food<span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>h6<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>p <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span>Dont know what else I could say about dog food.<span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"><</span>a <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></span>Buy<span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span></span></span> <span class="token tag"><span class="font"><span class="size"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span></span></span>

让我们看看它是如何工作的

我作为想要访问有关猫的页面的用户测试了流程。我在浏览器网址栏中输入:

https://<base_url>/mainPageCat.php

如您所见,我看到了我构建的页面,并且 cookie 存储在我的浏览器中

如果我点击号召性用语(蓝色按钮),我会看到仅包含猫粮广告的更多详细信息页面:

现在让我们为爱狗人士测试一下流程。首先,我从浏览器中删除 cookie(或使用隐身模式),然后访问以下 URL:

https://<base_url>/mainPageDog.php

这是我所看到的:

正如我们再次看到的,我看到了我构建的页面,并且 cookie 存储在我的浏览器中

如果我点击号召性用语(蓝色按钮),我会看到仅包含狗粮广告的更多详细信息页面。

完毕!这是一个简单快速的示例,说明如何使用 cookie 来自定义网页内容。

相关内容
首页 | 关于我们 | 服务项目 | 新闻观点 | 客户案例 | 解决方案 | 热点资讯