跳至正文
  • 新手入门
  • 功能分类
    • 页面搭建
    • 智能营销
    • 数据洞察
  • 产研文档
    • 开发者指南
    • 账户与套餐
    • 产品使用条款
    • 产品更新
  • 灵蹊内容社区
  • 返回灵蹊
  • 新手入门
  • 功能分类
    • 页面搭建
    • 智能营销
    • 数据洞察
  • 产研文档
    • 开发者指南
    • 账户与套餐
    • 产品使用条款
    • 产品更新
  • 灵蹊内容社区
  • 返回灵蹊

新手入门

  • 灵蹊能帮你做什么
  • 上手清单
  • 指标说明
  • 数据安全与服务可靠性
  • 使用灵蹊涉及的技术对接工作

页面搭建

画布操作
  • 区块
  • 元素
  • 点击动作
  • 交互效果
  • 动效
  • 取色器
  • 画布快捷键
  • 模板保存
PSD导入
  • PSD导入
  • PSD预处理指南
  • HTML转PSD
营销组件
  • 弹窗
  • 表单
  • 客服组件
  • 悬浮菜单
  • 视频
  • 二维码
  • 多状态面板
  • 标签页(Tab)
  • 手风琴菜单(折叠菜单)
  • 自定义组件——代码组件
  • 自定义组件——通用元素
  • 页面与组件兼容性
页面设置
  • 页面信息
  • 页面字体
  • 自定义CSS
  • 自定义JS代码
  • 微信设置
页面发布与版本管理
  • 页面预览与发布
  • 使用一个URL展示移动与PC版
  • 页面历史版本
页面管理
  • 页面列表

智能营销

个性化定向创意
  • 构建受众分组
  • 了解定向创意
  • 设置定向创意
  • 展示优先级
A/B测试与多版本测试
  • 设置A/B测试
智能创意
  • 了解智能创意
  • 智能创意与A/B测试对比
  • 智能创意的设计策略
  • 设置智能创意
  • 智能创意启动后
智能触发器
  • 弹窗自动触发

数据洞察

  • 数据汇总
  • 表单线索报告
  • 页面分析报告
  • 热图报告
  • 个性化创意报告
  • 筛选器

开发者指南

域名解析配置
  • 通过服务端转发把页面发布在自有域名
页面组件对接
  • 表单线索Webhook接入文档
媒体转化回传
  • 百度转化回传
转化回传灵蹊
  • 转化上报灵蹊-JS布码
  • 转化上报灵蹊 – API回传
自定义代码开发
  • 自定义变量
  • 自定义组件开发
  • 非UTF-8字符集处理声明
微信集成
  • 对接自有微信后台
  • 微信原生支付
支付集成
  • 微信原生支付
  • 自建收银台页面

账户与套餐

  • 来源管理
  • 安全认证
  • 绑定自己的域名
  • 转化设置
我的应用
  • 灵蹊销售锦囊
  • 53客服授权
  • 易聊通回传
权限与共享
  • 空间与团队
  • 资源共享

产品使用条款

  • 页面发布规范
  • 首页
  • 帮助文档
  • 页面搭建
  • 页面设置
  • 自定义JS代码

自定义JS代码

在页面上添加自定义JS代码

功能入口

如果在页面上需要实现功能操作、页面的高级形态控制、或者嵌入第三方监测或客服工具,需要使用到自定义JS代码。
自定义JS代码设置位于画布左侧资源面板的“页面设置”分类中。

选择添加位置

代码的位置会决定它的执行时机,因此需要选定代码位置。如果你嵌入第三方工具,通常在它的嵌入代码附近可以找到关于位置的说明。
如果你不明确自己需要使用的代码添加在哪里的,推荐添加在<body>后方。

代码位置展开后,点击【+添加页面代码】,即可进入“我的代码”选择画面。


我的代码

为了便于管理与复用,灵蹊中的代码段是用Tag化的方式管理的。(当前只有页面代码为此形式,未来会将点击动作与转化回传等代码也同理优化。)

【+新建代码】可以创建新的代码片段。
选中已保存的一个或多个代码,点击【确定】,可以直接添加到页面中。


新建代码

代码信息

  • 名称
    用于识别代码
  • 标签(选填)
    你可以标记一个或多个标签便于管理,未来代码库中也会支持根据标签搜索。
  • 描述(选填)
    如果代码有详细的描述、操作说明或者注意事项,推荐你备注到描述中,便于未来使用或协作者使用时更方便理解。
  • 应用范围
    你可以选择这是一段仅用于当前页面的代码还是一个将会被多个页面反复使用的代码。

输入变量

通过输入变量,你可以控制在代码执行时,有一部分是你可以灵活输入修改的。

举个例子,你拥有多组客服配置,需要在不同页面上灵活修改客服组,这时你可以创建一个“输入变量”,例如chatID,然后将代码中具体的id内容更换为chatID。
这样设置后,在页面中使用代码时你就可以灵活填充修改ID信息啦。

如果你是研发人员,为业务制作了一段高级脚本,例如动态的课程价格、剩余名额等,但又希望对业务人员保留灵活的可配置性,也可以通过这个功能实现。
例如将课程ID配置为输入变量,业务人员根据页面需求自行输入。这样不仅使用更方便,也规避了业务人员操作代码时出错的风险。

输入变量中的配置信息如下:

  • 变量名
    仅英文、数字与下划线,不可以数字开头
    配置后,将变量名输入到上方代码段中,替换当前代码中对应位置使用的具体值
  • 描述
    用于备注该变量名作用,方便使用时参考
    配置后将显示在变量名前方的悬浮信息提示中
  • 默认值
    这里用于为代码配置选中时即生效的默认值。即通用情况使用这个,如果有特殊需要可以进行修改。
    如果大多情况下没有默认值,这里可以留空。
    代码被选中后,会提示你输入变量值。但需要注意,如果变量值在发布时仍然留空,这段代码将不会执行。

输出变量

输出变量指的是这段代码将为哪些变量赋值。这里本质上是这段代码的功能注释,方便在画布上使用变量时能够参考。

举个例子,如果你需要使用一段代码,将页面上的报名时间动态化为最近1天,代码中将出现为“月”和“日”赋值变量的能力。
写好代码后,你可以将月和日这两个变量名称输入到“输出变量”中,

输出变量可以配合文字变量使用,也可以在你的自定义代码中使用。


通用代码与当前页面代码

通用代码与当前页面代码在定位与保存后的操作上均有所差别。

当前页面代码

当前页面代码用于专门服务于本页面的高级功能,例如针对当前页面特有元素的功能定制等。

当前页面代码的使用

当前页面代码在新建后,会直接添加到页面设置中(不会出现在代码库中)。
但如果复制当前页面,仍然会被携带。

当前页面代码的编辑

当前页面代码直接点击【编辑】,即可进行修改。

转换为通用代码

如果你发现一段代码经常使用,也可以点击这里将它加入代码库。
不过要注意,例如复制出来的其它页面上的代码尽管同名,但本质是相互独立的,无法也被自动识别转换为通用代码。如果期望统一化,请手动选择添加通用代码、移除老代码。


通用代码

适用于会多次复用的代码,例如广告平台转化回传代码、客服基础代码、监测工具代码、标准化的功能代码(如选课)等。
如果代码片段中有部分内容会经常变化,可以参考输入变量功能,将它变为在使用时填充的可配置项。

通用代码的使用

保存为通用代码后,可以在代码库中看到它。

通用代码的更新

由于代码为账户级,在页面中默认情况下是对代码的查看操作。

如果你需要修改,点击查看后可以在标题下方点击前往【修改账户代码设置】。

通用代码一经修改,保存后,修改信息会被通知到所有使用它的代码tag上。

注意,考虑到落地页代码的个性化程度与复杂性,灵蹊不会自动对线上页面生效新修改的通用代码,你在受影响的页面上会看到代码【有更新】的提示,点击后可以手动更新,预览确认后更新发布后,新的代码才会生效。
在你更新之前,点击“查看”所见的版本为当前正在使用中的版本。

(未来灵蹊会提供更高级的权限管理,适时再对代码增加可自动生效的配置选项。)

将通用代码转化为页面代码

如果你不希望随全局代码进行更新,可以点击【...】,选中【转换为仅本页面使用】,这样操作后当前生效中的代码将会与代码库解绑,转换为本页面代码。

删除通用代码

如果你在代码库中删除一个通用代码,当前正在使用这段通用代码的页面上这段代码不会立即消失,而是将被转换为“本页面代码”避免影响正在工作中的功能。如果需要删除,请前往相关页面手动删除,预览正确后更新发布。

页面信息

Powered by BetterDocs

发表评论 取消回复

要发表评论,您必须先登录。

Table of Contents
  • 在页面上添加自定义JS代码
    • 功能入口
    • 选择添加位置
  • 我的代码
  • 新建代码
    • 代码信息
    • 输入变量
    • 输出变量
  • 通用代码与当前页面代码
    • 当前页面代码
      • 当前页面代码的使用
      • 当前页面代码的编辑
      • 转换为通用代码
    • 通用代码
      • 通用代码的使用
      • 通用代码的更新
      • 将通用代码转化为页面代码
      • 删除通用代码