零跟踪

将跟踪请求发送到 穷人 API。 。 。 .

• 使用量
  • 没有 Java 脚本的跟踪
  • 用 JavaScript 跟踪
  • 如何跟踪额外点击数据 data-trackable 属性
• 如何查看数据
• 执行实例
• 移徙指南
• 联系人
• 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-tracking。 。 。 .

没有 Java 脚本的跟踪

o- tracking没有JavaScript是行不通的,但是,通过设置一个指向Spoor跟踪像素端点的cs背景图像url,您仍然可以向Spoor API发送基本的跟踪请求(Spoor tracking sixel end point)https://runtime-api.ft.com/px.gif) (中文(简体) ). 没有JavaScript,点击事件和其他交互事件将不会被跟踪,但可以跟踪基本的页面视图事件.

Spoor 跟踪像素端点需要一个 data 查询参数是一个 url- encoded JSON 字符串, 代表要在 Spoor 中跟踪的数据 .

<div class="o-tracking o--if-no-js" data-o-component="o-tracking">
    <div style="background: url('https://runtime-api.ft.com/px.gif?data=YOUR_URL_ENCODED_JSON_DATA_HERE');"></div>
</div>

例如,如果您想要在 Spoor 中跟踪以下数据:

建议: 用别的 system.source 来自 o- tracking JavaScript 模式中使用的值将帮助您的项目更方便地分组没有 JavaScript 的用户的数据 。 下面的例子使用源 o-tracking-fallback。 。 。 .

{
  "category": "page",
  "action": "view",
  "system": {
    "source": "o-tracking-fallback",
  },
  "context": {
    "product": "ft.com",
    "content": {
      "asset_type": "page"
    }
  }
}

以下是相应的跟踪像素设置 :

<div class="o-tracking o--if-no-js" data-o-component="o-tracking">
    <div style="background: url('https://runtime-api.ft.com/px.gif?data=%7B%22category%22:%22page%22,%20%22action%22:%22view%22,%20%22system%22:%7B%22apiKey%22:%22qUb9maKfKbtpRsdp0p2J7uWxRPGJEP%22,%22source%22:%22o-tracking%22,%22version%22:%221.0.0%22%7D,%22context%22:%7B%22product%22:%22ft.com%22,%22content%22:%7B%22asset_type%22:%22page%22%7D%7D%7D');"></div>
</div>

用 JavaScript 跟踪

启动离线支持和队列活动

默认的o跟踪使用浏览器Beacon API向Spoor发送事件,而Beacon API只有在设备在线时才能工作,而o跟踪无法将这些事件排队.

如果想要将事件排队( 如果事件发送失败, 则重试) 和( 或) 关闭时要记录事件, 设置 queue 改为 true 在电话化期间 o-tracking 像这样:

import oTracking from '@financial-times/o-tracking';

const config = {
    queue: true, // Make sure o-tracking stores the events on a local queue (this means o-tracking can work when the device is offline)
    ...
};
oTracking.init(config);

开发者/ 测试模式

o- tracking有一个开发/测试模式,它会将事件标记为测试事件,并且还写给控制台额外的调试信息.

要激活模式, 设置 test 改为 true 在电话化期间 o-tracking 像这样:

import oTracking from '@financial-times/o-tracking';

const config = {
    test: true, // Mark the events as test events and turn on extra debug logging.
    ...
};
oTracking.init(config);

o-跟踪也有 test-data 模式将事件标记为测试事件,而不在控制台中调试信息:

import oTracking from '@financial-times/o-tracking';

const config = {
    test_data: true, // Mark the events as test events without extra debug logging.
    ...
};
oTracking.init(config);

方法

跟踪.init

手动即时 o-tracking,导入组件并调用 init 具有特定产品配置的方法:

import oTracking from '@financial-times/o-tracking';

const config = {
    context: {
        // This value is used as a way to identify the high-level product, for example: ft.com, FT app, biz-ops etc.
        product: 'o-tracking-example',
    }
};
oTracking.init(config);

oTracking.page (英语)

要跟踪您称之为产品的页面视图 oTracking.page 方法. 页面事件自动跟踪url和裁判. 参见 页面事件文档 对于可以设置的属性信息.

const pageConfig = {
  content: {
      /*
        Asset type is meant to describe the main purpose of the page
        The value can be one of these:
        - `story` - A story or article
        - `blog` - A blog post
        - `front` - A home page or front page
        - `ad` - An advert.
        - `image` - An image
        - `interactive` - An interactive graphic
        - `report` - A special report
        - `search` - A search results page
        - `section` - A section or listing page
        - `topic` -  A topic landing page
        - `video` - A video page
        - `login` - Any login/sign-in page
        - `stream` - A stream page
        - `funnel` - Any funnel page
        - `epaper` - all epaper pages
        - `rankings` - A rankings page for schools and courses (i.e. on rankings.ft.com). Not the section's hub page
        - `markets` - Any market, bond, commoditity, stock, currency 'tearsheet' (usually has "/tearsheet/" in URL)
        - `myft` - All MyFT pages
        - `account` - All account pages
        - `membership` - All membership pages
        - `page` - anything else, not above.
    */
    asset_type: "story"
  }
};
oTracking.page(pageConfig);

跟踪 点击.init

打电话 oTracking.click.init 用于跟踪点击事件的方法。 通过您想要点击事件作为参数的分类:

• o- tracking 点击事件也会跟踪从 DOM 树根到被点击元素的路径 。 这被记录在一个名为 domPathTokens。 。 。 .
• 如果点击的元素有 data-trackable 属性集,兄妹元素也将包括在 domPathTokens 属性.

请参看 事件文档 用于了解所有可能设置的属性.

// Tracking a click
const category = 'element';
oTracking.click.init(category);

说明: 属性 data-o-tracking-skip-queue 不再使用,它现在是默认行为

(原始内容存档于2017-10-21) (英语). Tracking.view.init

要跟踪一个元素在用户视野中的位置, 请添加属性 data-o-tracking-view ,然后调用 oTracking.view.init 方法 :

• 默认情况下,带有 data-o-tracking-view 属性被跟踪.
• 要跟踪不同的元素,请设定 selector 选项属性到 CSS 选择器.
• 如点击事件, 视图事件也会跟踪从 DOM 树根到触发跟踪事件的元素的路径 domPathTokens。 。 。 .
• 要分类视图事件,设置 category 选项属性.
• 要定制此元素在取景口中需要多少触发事件,请使用 intersectionObserverThreshold 选项。 此值将被设定为交叉观察员的门槛值(默认为 1.0) (中文(简体) ).
• 要收集与跟踪事件一起发送的额外数据, 请添加一个名为 getContextData 对选项。 函数收到单个参数时, 触发跟踪事件的元素, 需要用这些可选属性集返回对象 :
  • componentContentId
  • type
  • subtype
  • component

更新 2025-060-12:这些备选方案可能过时,它们绝对是构成部分,可供更新

说明: 这个功能需要 window.IntersectionObserver 为了追踪事件 说明: getContextData 应该是返回的函数 {object}。它接受观点要素作为论据

构成部分跟踪

组件标准模板跟踪光谱 (c) 说明应收集哪些数据以获取组成部分意见。 有些是为你而生的, category 财务报告和审定财务报表 action 有默认。 您需要设置以下属性 : getContextData

getContextData: () => {
     return {
       component: {
         name: '[some-human-readable-name]',
         type: '[see tracking spec list]',
         id: '[consistent-guid]'
       },
       content: {
         asset_type: '[see tracking spec list]',
         uuid: ['content-id-eg-article-id']
       }
     };
   },
 });

可选的是,您也可以通过获取ContextData调用,将额外元数据添加到最多3个自定义值

    ...
        custom: [
          {
            name: 'some-name',
            value: 'some-value',
          },
        ],
    ...

请参看 事件文档 用于了解所有可能设置的属性.

const opts = {
    category: 'audio', // default: 'component'
    selector: '.o-teaser__audio', // default: '[data-o-tracking-view]'
    getContextData: (el) => {  // default: null
        return {
            componentContentId: el.getAttribute('data-id'),
            type: 'audio',
            subtype: 'podcast',
            component: 'teaser'
        };
    }
};

oTracking.view.init(opts);

追踪. 活动

要跟踪一个自定义事件,请叫 oTracking.event 方法。 例如,要跟踪播放的视频:

const eventConfig = {
    "category": "video", // optional
    "action": "play", // optional
};
oTracking.event(eventConfig);

这个 event 方法还接受在事件处理后运行的可选回调.

const eventConfig = {
    "category": "video", // optional
    "action": "play", // optional
};
oTracking.event(eventConfig, () => {
  console.log('The custom video event has been processed!');
});

请参看 事件文档 用于了解所有可能设置的属性.

活动

而不是打电话 page 财务报告和审定财务报表 event 方法 o-tracking 可以配置以捕获基于自定义 DOM 事件的事件 oTracking.page 财务报告和审定财务报表 oTracking.event。 。 。 .

oTracking.page (英语)

打电话 oTracking.page.init() 监听方法 oTracking.page 事件:

// Tell o-tracking to listen for `oTracking.page` events
oTracking.page.init();

// Now we can send page events and o-tracking will track the data within them.
const pageData = { content: { uuid: 'abc-123', barrier: 'PREMIUM' };
document.body.dispatchEvent(new CustomEvent('oTracking.page', { detail: pageData}, bubbles: true}));

追踪. 活动

让奥追踪听 oTracking.event 事件,你叫 oTracking.event.init()数字 :

// Tell o-tracking to listen for `oTracking.event` events
oTracking.event.init();

// Now we can send custom events and o-tracking will track the data within them.
const customData = { category: 'video', action: 'play', id: '512346789', pos: '10' };
document.body.dispatchEvent(new CustomEvent('oTracking.event', { detail: customData}, bubbles: true}));

如何跟踪额外点击数据 data-trackable 属性

您可以通过使用 data-trackable 财务报告和审定财务报表 data-trackable-context-* 自定义属性.

data-trackable

o-tracking 将走上 DOM 以获得元素树 data-trackable 属性。 例如,点击下面的列表项按钮将会导致一个在其中记录此路径的事件- header-menu country-selector china: - (中文)

<div data-trackable="header-menu">
    <span>
        <div data-trackable="country-selector">
            <ul>
                <li data-trackable="china"><button>China</button></li>
            </ul>
        </div>
    </span>
</div>

data-trackable-context-*

要向事件添加额外的上下文, 您可以在窗体中添加自定义属性 : data-trackable-context-name="data" 地点 name 是额外上下文的名称,并且 data 是额外的数据.

例如,当点击以下锁定元素时,它会添加额外事件字段 article_guid 财务报告和审定财务报表 article_source 数据被跟踪.

<a href="https://www.ft.com/content/1234-1234-1234-1234"
    data-trackable="view-original-article"
    data-trackable-context-article_guid="1234-1234-1234-1234"
    data-trackable-context-article_source="FINANCIAL TIMES">

嵌入属性

使用 data-trackable-context-* 自定义属性,以类似JSON的格式指定值的字符串表示.

例如,当点击以下主锚元素时:

<a href="https://www.ft.com/content/1234-1234-1234-1234"
    data-trackable="view-original-article"
  data-trackable-context-plain_property="plain-property-value"
    data-trackable-context-nested_property='{ "type": "nested", "value": "nested-property-test" }'>

事件背景将提供属性: plain_property 财务报告和审定财务报表 nested_property,如下文所显示:

{
  "category": "link",
  "action": "click",
  "system": {
    "source": "o-tracking",
  },
  "context": {
    "plain_property": "plain-property-value",
    "nested_property": {
      "type": "nested",
      "value": "nested-property-test"
    }
  }
}

如何查看数据

一旦将数据发送到Spoor,您可以通过Looker查看数据.

FT有一个名为#ask-an-analyst的Slack频道,任何人都可以在那里获得Looker的帮助.

如果你以前从未使用过Looker,你将需要 通过此表单请求访问。 。 。 .

要注册到 Looker :

• 打开 FT 浏览器 在您的浏览器中.

执行实例

• ft.com (英语)
• 成员

移徙指南

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .