ying.li

灵蹊提供了自定义组件的能力用来扩展灵蹊产品本身能力，自定义组件能实现跨页面的组件粒度的复用，做到只写一次，到处复用的效果。组件开发本身可以直接让前端开发者基于vue来开发（目前版本对vue单文件有限制支持） 1、模块入口（如图1） 2、灵蹊自定义组件组成部分 1）、组件名称：用来显示组件2）、组件描述3）、组件插槽代码：在组件未渲染时占位用4）、源码（vue单文件组件代码，template、script、style） 3、灵蹊组件开发标准 1）、代码格式，vue单文件格式（如图1） 代码说明： 1、template部分和vue单文件组件中template使用方式完全一致，不做任何限制 2、script部分和vue单文件组件中组件开发规范完全一致，但内部代码为了兼容性建议使用ES5规范（目前灵蹊暂时不对源码做向下构建，后期会加） 3、css部分目前只支持原生css，暂时不支持预处理（后期会加） 4、开发实践 1）、如何由外部传入变量（即vue组件props如何设置）？ 通过定义组件props来定义 props中定义两个变量fontSize和color，在这两个属性中都存在一个desc的属性（最好添加，用来对外描述输入变量，如下图所示） 设置了props后，业务人员可以通过设置打开属性传递参数来改变组件样式或者行为 2）、如何跨组件通信 如果页面中存在两个组件（A和B），B变化时需要通知A，那么组件A中声明props:global，在B组件中直接通过window.$global.xxx改变数据状态，A组件中this.global.xxx能同步变化。 3）、如何访问组件挂载的Dom对象 在script部分，可直接通过root变量访问vue实例的挂载对象 4）、开发方式建议vscode中调试组件代码，然后组件代码直接copy到灵蹊自定义组件位置即可 5）、demo代码（点击打开demo代码）

为什么要进行转化设置 在页面上设置的点击动作和表单提交可以被自动追踪，无需在此添加。但如果你的转化行为发生在系统外，则需要通过JS或API上报给灵蹊，例如： 从自己的交易系统回传下单成功、支付成功等行为 使用iframe嵌入自己的表单代替灵蹊原生表单，回传表单提交成功 从外部IM系统回传有效对话、留资等行为 …… 灵蹊获取到转化信息后，会用于 汇入统计报告 进行转化归因、助攻分析 用于评估A/B测试效果 用于训练智能创意模型 设置方法 在账号设置中找到“转化设置” 点击创建 转化ID：由系统生成，在转化创建后才生效。转化名称：方便查询报告时使用，名称可以随时修改，不影响数据展示转化类型：由系统预制，请正确选择对应的转化类型，方便未来自动汇总数据与漏斗追踪方法：提供JS布码与API回传两种方式，均可用于上报转化。 开发者文档 转化创建后，需要开发者进行埋码或API对接。请参考下方文档： JS布码 API回传

第三方上传转化数据到灵蹊平台主要分为如下几个步骤 1、进入灵蹊产品，进入账户管理，打开转化设置，配置转化类型（如图1） 2、创建转化，会自动生成转化id，填写转化名称并选择转化类型（如图2） 3、选择追踪方式为API回传（图3） 4、根据生成的API回传格式构建请求数据（格式如下）curl -H “Content-Type:application/json” -X POST -d ‘{“lxTracingId”:”${url获取}”,”cvId”:”${cvId}”,”cvType”:”${cvType}”}’ “https://agent.getlingxi.com/api/conversion/upload” 如上述代码 请求方式：HTTP POST请求数据格式：Content-Type:”application/json”请求地址：https://agent.getlingxi.com/api/conversion/upload发送数据：{    “lxTrackingId”:”eyJwcm9maWxlSWQiOiI4YmQwYWRjYi02YTJjLTQ2MTUtODAzZi0yMjkwMGJmZGQzN2IiLCJwYWdldmlld0lkIjoiZTU3MjhkMjctMzJlMS00OTFiLTk3MWUtZDE2ZjBmMGZhNzRjIiwidHlwZSI6ImxlYWQifQ==”,    “cvId”:”xxxxx-xxxx-xxxxx-xxxxx-xxxx”,//上述创建阶段配置    “cvType”:”转化类型” //配置阶段配置} 参数说明： lxTrackingId：在灵蹊页面跳转到第三方页面时，需要获取（通过analytics.page.getTrackingId()获取）并传递该参数，第三方页面可直接在url中获取。 cvId: 转化id，创建转化时生成。 cvType:转化类型，创建转化时根据选择的转化类型生成 5、确认上报结果 { status:”success”, errorCode:null, errorMsg:null} 响应结构说明：status 成功取值“succes”，失败取值“failed”，此时errorCode 和 errorMsg会打印相关错误信息

通过JS调用上传转化数据步骤如下： 1、进入灵蹊产品，进入账户管理，打开转化设置，配置转化类型（如图1） 2、创建转化，会自动生成转化id，填写转化名称并选择转化类型（图2所示） 3、选择追踪方式为JS部码（图3） 4、直接copy生成的代码到灵蹊页面中的对应逻辑模块即可（格式如下） analytics.page.track({ type:’cv’, cvType:’contact’, cvId:’xxxx-xxx-xxxx-xxxxx-xxxxx’}); 5、确认请求是否正常 打开灵蹊页面，copy 步骤4中代码，到chrome dev 控制台，贴到console窗口直接运行，执行成功并查看是否产生新的响应为201的请求

由于工具应用限制，以下方式目前只适用于Mac平台。 如果我们希望迁移的页面没有PSD稿、或者已经经年累月发生了太多修改早已和设计稿不一致，我们可以借助HTML转PSD的工具来实现快速迁移。 软件准备 请搜索下载名为 PageLayers 的工具（该软件只适用于Mac平台），图标长这样👇 HTML转为PSD – 移动页面 输入页面地址 在地址栏左侧的尺寸中，选择other 将宽度输入为375，高度为无限（不输入即可） scale为x2（Retina这类高清屏需要x2尺寸，否则输出会变模糊） 选择screenshot>save as （直接用快捷键command + s也行） 务必勾选generate text layers，（否则页面上的文本会被存为图片） 点击保存，psd就保存好了 HTML转为PSD – PC页面 输入页面地址 在地址栏左侧的尺寸中，选择other 将宽度输入为1440（推荐），高度为无限（不输入即可）选择1440的原因是因为它是PC最通用分辨率的中间尺寸，但如果页面背景有特别大的延展性（可以在大屏上拉一下看看，如果随着拉大背景有持续铺开的变化，就推荐用大尺寸导出） scale为x1由于PC页面上传PSD后不像移动端画布有宽度限制，而是有多大传多大，如果双倍导出再上传页面就会变得过大了。 选择screenshot>save as （直接用快捷键command + s也行） 务必勾选generate text layers，（否则页面上的文本会被存为图片） 点击保存，psd就保存好了 文字处理 由于这款好用的软件是由有才的歪果仁开发的，所以对中文字体的兼容性不太好，如果你直接上传，会发现变成满屏hello的样子。 所以我们需要借助一个更厉害的在线PSD工具来进行文字自动转换👇 地址： https://www.photopea.com/ 访问photopea.com 打开psd文件 等待字体加载转换结束 保存psd文件 现在psd就可以上传画布啦 不过仍要注意，即使经过文字转换，也还会有一定乱码存在，所以请仔细检查页面，做好修改 💪 不适用的情况 动态页面及动画页面pagelayers在对应动态页面方面比较乏力，所以如果你的页面是动态化渲染的、或者存在较多的出场动画，在保存为psd时，可能会出现内容保存不全或图层反复叠加的一系列问题。 windows如果你有windows下的好工具，尤其能够保存可修改的文字图层，请在评论区分享呀！

由于浏览器限制，在画布中进行颜色取色时，需要借助浏览器插件来实现。 方式1 – 通过应用商店安装 （推荐） 建议在您使用的浏览器应用商店中搜索 取色器（纯净版），并点击安装 chrome版本地址 如果你使用的未能找到上述插件，也可以通过搜索关键字“取色器”、“拾色器”、“color picker”安装同类产品。 注意，安装成功后，需要刷新待取色的页面，插件才能生效哦 方式2 – 下载并手动安装 下载 如果无法访问应用商店，可以点击下方链接下载。 点击下载 （Chrome及360等Chrome内核的浏览器适用） 安装 下载后按照如下步骤安装： 解压压缩包，找到压缩包中的.crx文件 打开Chrome浏览器，复制chrome://extensions/ 到浏览器地址打开，点击右上角开启开发者选项，最后将文件夹内.crx后缀的离线安装包拖动到打开的页面，松手，根据提示完成安装。 注意，安装成功后，需要刷新待取色的页面，插件才能生效哦

视频网站通用代码可以从“分享”相关的功能找到。 以下是常用网站的通用代码获取位置。 腾讯视频 优酷 爱奇艺