跳到主要内容
MENU-ICON.PNG.

 

x
优化知识库

实现One-Line Scippet优化

本文将帮助您:
  • 添加  一行代码 to your site 开始运行优化实验(A / B测试)
  • 选择  你想添加的页面 优化代码片段
  • 找你的 project code snippet in Optimizely
  • 决定  在哪里添加代码 in your HTML

如果这是您第一次使用优化时,您需要添加一个小型代码片段 (这是它的工作原理)到了<head>您的网站代码标记 开始运行实验。 此代码段包含您的独特项目ID和 允许优化实验 在您的网站上运行。添加后,片段将自动更新;你没有 need to do a thing.

完成单行实施后 Snippet有以下三步,您将能够在您网站上的任何地方运行实验。

1.决定添加片段的位置

在决定添加代码段时,请考虑网站和实验程序的架构。每个 优化项目或工作区, has its own snippet.

  • 如果您的帐户计划包含 跨项目活动,您可以跨项目空间跟踪指标。如果没有,请确保您衡量结果的所有部分 在同一项目中。一段代码段应该在所有这些页面上运行。

  • 如果您有单独的开发和生产环境,或不同的域和子域,则可能需要每个项目(和片段)。

近年来,现场表现越来越重要。下载 优化 s Performance Guide to 确定哪些实施适合您。

另外,退房 our whitepaper on 优化客户端实验的性能.

2.检索 the snippet

接下来,检索您的片段’ll add to your site. Here's a 演练,下面有一步一步的说明:

enable-snippet.gif.

  1. 导航 设置  > 执行.

  2. 点击  Action-Button.png. 要复制代码的图标。
    If your account uses 自定义片段,您可能会看到多个代码段列出。选择与实验计划相关的那个相关的一个。

  3. 点击  复制片段 Code.

  4. 单击片段的名称。

  5. 启用代码段优化 and 选择代码段配置。如果您是第一次使用优化,请跳过此步骤。

  6. 点击  .

在您的网站上从未有过多个代码段。

小费:

如果您需要找到项目ID,它是 紧接在前面的数字".js" in the snippet URL.

3.指定 Origins将优化将运行

下一个,  指定 优化将运行和跟踪事件的域名.

An “ 起源 ”是您网站上特定主机名,协议和端口的组合。讲述 您将跟踪活动事件的位置。默认情况下,您可以在优化的事件中跟踪的事件只能用于瞄准同一个原点的更改,因此使跨起源目标能够跟踪跨起源的事件。

4.将片段添加到<head> tag of your site

有关最佳性能,请添加 Optimizely snippet to the <head>您网站的HTML标记。 We recommend implementing the snippet 尽可能高达头部标签,一般在你之后<html> tag, Charset声明,可能是其他元标记。 在代码中放置优化的代码段,适用于任何分析或热映射平台。

把这放在那里 the snippet:

  • charset声明和其他元标记,如<meta charset='utf-8'>

  • jQuery,如果您使用自己的版本而不是优化的版本(请参阅 jQuery设置)

把这放在那里 the snippet:

  • 页面上的所有其他元素

  • 任何分析或热映射码

  • 标签管理器中的其他内容 

这是最优化的 片页赛段可能看起来像:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!-- Add other meta information here -->
        <!-- Add stylesheets here -->
        <script src="//cdn.wqfugm.icu/js/12345678.js"></script>
        <!-- Add scripts and other content here -->
    </head>
    <body>

为什么在头部标签的顶部?通过将页面更改为页面加载,优化优化。如果将代码段添加到头部标签的顶部,则优化将在加载时更改页面。

如果片段添加到较低的任何地方,它将在技术上仍然工作。但是如果页面已经加载了访问者在优化代码段加载之前看到的内容,则页面的原始版本可能会在通过优化转换为变化之前加载。这被称为 "page flashing." 在大多数情况下,代码执行太快,以便可见。 但要避免任何潜在的问题,我们建议添加 尽可能早在执行路径中的片段。

 
重要的:

请不要修改片段。 将其复制并粘贴到您的网站上,正如您在优化内看到的那样。否则,优化可能无法在您的网站上正确运行。

你需要添加的能力 代码段到生产环境和开发环境的头部标签(如果有两者)。如果您没有访问权限,则可以通过 a 标签管理器.

 
笔记:

默认情况下,代码段是同步加载的,这是建议的。但是,如果您需要异步加载,请阅读本文以学习 实现异步加载.

检查一下 片段实施

这是如何检查的 that 片段 已在您的页面上实现 correctly.

加载优化 使用标记管理器或CMS

我们不建议您加载 Optimizely snippet 通过标签管理器. 

加载优化 通过标签管理器 can cause issues 如页面闪烁,在哪里 您的页面的原始版本将简要展示给游客 before the 优化实验。例如,Google标记管理器不支持同步加载。标签经理 还可以造成您的分析集成问题。为您的访客提供最佳体验,我们 强烈建议你 在标记管理器之外优化实现。

If you must load Optimizely 通过标签管理器, consider these 陷阱与实施建议 and 联系您的客户成功经理讨论影响。

以下是客户使用的一些标签管理器:

Google标签管理器 | exighten. | Tealium IQ.  | 信号

如果您尝试将优化的片段添加到使用其中一个构建的网站 以下CMS或网站建设 平台,请阅读相关文章以获取更多信息:

WordPress.  | 市场登陆页面 | 雅虎商店 | 卷积店 |  Drupal.  | PHP网站