--- metadata: - name: generator content: Diplodoc Platform v5.54.1 alternate: - https://yandex.com/support/metrica/en/code/counter-spa-setup.md - https://yandex.com/support/metrica/es/code/counter-spa-setup.md - https://yandex.com/support/metrica/pt/code/counter-spa-setup.md - https://yandex.com/support/metrica/ru/code/counter-spa-setup.md - https://yandex.com/support/metrica/tr/code/counter-spa-setup.md - https://yandex.com/support/metrica/zh/code/counter-spa-setup.md - href: zh/code/counter-spa-setup.md type: text/markdown title: Markdown version - href: ../llms.txt type: text/markdown title: llms.txt title: 安装和配置 SPA 网站的计数器 description: 如何为 SPA 网站安装和配置计数器。 --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/metrica/zh/llms.txt # 为 SPA 网站安装和配置计数器 ## 计数器初始化 {#section_r5y_2rf_qfb} 要在 SPA 网站上使用 Yandex Metrica 计数器，请按照以下步骤操作： 1. [在您的网站上创建并安装计数器代码](https://yandex.com/support/metrica/zh/quick-start.md)（如果尚未安装）。 1. 初始化计数器时，将 `defer` 参数设置为 `true`。 这对于禁用有关[浏览次数](*просмотрах)数据的自动发送是必要操作。 要统计页面展示次数，请使用 `hit` 函数，如第 3 部分所述。 初始化计数器的示例： ``` ym(XXXXXXXX, 'init', { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }) ``` 1. 为确保 Yandex Metrica 能记录重要的页面变更，请分析您网站的逻辑，并在代码的适当位置插入 hit 函数，以便在您认为页面发生变更时调用该函数。 调用 `hit` 函数： ``` ym(XXXXXXXX, 'hit', url[, options]); ``` 可以在 `hit` 函数中传递的参数： #| || **参数** | **默认值** | **类型** | **描述** || || `url` | — | String | 视图所来自的页面的 URL。 如果未提供 URL，则将使用 `window.location.href` 的值。 || || `options` | — | 对象 | — || || `options` 对象的字段 | > | > | > || || `options.callback` | — | Function | 发送页面浏览数据后调用的回调函数 || || `options.ctx` | — | 对象 | 在回调函数中通过 `this` 关键词访问的上下文 || || `options.params` | — | 对象 | 会话参数 || || `options.referer` | — | String | 用户加载当前页面内容的 URL || || `options.title` | `document.title` | String | 当前页面的标题 || || `options.params` 对象的字段： | > | > | > || || `order_price` | — | Double | Revenue by goal。 您可以用货币或常规单位设置成本。 || || `currency` | — | 字符串 | 如果您想以货币形式传递目标成本，请使用此字段。 Yandex Metrica 识别三个字母的 [ISO 4217 货币代码](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=currency-codes)。 如果传递不同的货币，则将发送空值，而不是货币和金额。 || |# {% cut "调用 `hit` 函数的示例" %} ```javascript ym(XXXXXXXX, 'init', {}); //... ym(XXXXXXXX, 'hit', '#contacts', {params:{ title: 'Contact information', referer: 'http://example.com/#main' }}); ``` {% endcut %} ## 发送转化数据 {#section_bpg_5dk_yfb} 要跟踪不改变页面 URL 的网站事件，请使用 `reachGoal` 函数： ``` ym(XXXXXXXX, 'reachGoal', 'TARGET_NAME); ``` ## 传输会话参数和用户参数 {#section_ypx_lsf_qfb} {% list tabs %} - 会话参数 ``` ym(XXXXXXXX, 'params', {param1: 'param_value1'}) ``` - 用户参数 ``` ym(XXXXXXXX, 'userParams', {param1: 'param_value1'}) ``` {% endlist %} ## 传输 E-commerce 数据 {#section_nsk_vtf_qfb} 要传输数据，请在 Yandex Metrica 中启用 E-commerce。 要正确收集 E-commerce 数据，请确保在用户加载新页面时调用一次 `hit` 函数。 {% cut "发送 E-commerce 数据示例" %} ``` dataLayer.push({ "ecommerce": { "purchase": { "actionField": { "id": "TRX987" }, "products": [ { "id": "25341", "name": "Yandex hoodie (men)", "price": 1345.26, "brand": "Yandex", "category": "Clothes/Men's clothes/Hoodies and sweatshirts", "variant": "Orange" }, { "id": "25314", "name": "Yandex hoodie (women)", "price": 1543.62, "brand": "Yandex", "category": "Clothes/Women's clothes/Hoodies and sweatshirts", "variant": "White", "quantity": 3 } ] } } }); ``` {% endcut %} ## 启用 Session Replay、click map、link map 和 Form Analysis {#section_bg3_xtf_qfb} 您可以将 [用户行为回放](https://yandex.com/support/metrica/zh/webvisor/info.md)、点击热图 和 链接热图 连接到 SPA 网站。 不支持 scroll map、form analysis和 Session Replay 1.0。 ## 在 SPA 上禁用 Yandex Metrica {#destruct} 要禁用 Yandex Metrica，请在计数器实例上使用 `.destruct()` 方法。 此方法仅适用于[新版本的](https://yandex.com/support/metrica/zh/general/tag-info.md) Yandex Metrica 计数器代码。 - 对于通过 `Ya.Metrika2` 构造函数初始化的计数器： ``` //正在初始化计数器 const counter = new Ya.Metrika2(counterId); //正在去初始化计数器 counter.destruct() ``` - 如果初始化时使用了设置： ``` //正在初始化计数器 const counter = new Ya.Metrika2({ id: counterId, trackLinks: true }); //正在去初始化计数器 counter.destruct() ``` - 对于通过 `ym` 方法初始化的计数器： ``` //正在初始化计数器 ym(XXXXXXXX, 'init', {}); //正在去初始化计数器 ym(XXXXXXXX, 'destruct') ``` 请仅使用 `destruct` 方法来停止 Yandex Metrica。 [与我们聊天](https://yandex.com/chat/#/user/036e6a02-3620-9cdc-4c5e-a34667a7379e?utm_source=spravka){.button}
{% cut "发送电子邮件" %} 如果您无法独立检查计数器，请遵循以下建议。 {% list tabs radio %} - 数据未发送到控制台 {% include [qanda-check2-2](../_includes/popup/id-qanda/check2-2.md) %} {% cut "这些建议没有帮助" %}
{% endcut %} - 控制台有数据，但报表不显示 这意味着信息正在传输到 Yandex Metrica。 但是，由于以下任一原因，数据可能不会显示在报表中： - 数据被发送到具有不同编号的计数器。 - 计数器设置中的 **Filters** 选项卡指定了过于严格的筛选条件。 删除不需要的筛选条件。 - 计数器设置中的 **Filters** 选项卡已启用 **Don't count my sessions** 筛选条件。 这意味着计数器不会统计您自己的会话。 尝试使用您的浏览器在“隐身”模式下访问该网站。 {% cut "这些建议没有帮助" %}
{% endcut %} {% endlist %} {% endcut %}
- - -
#| || 实用链接 - [演示计数器](https://metrica.yandex.com/r/dashboard?) - [添加计数器](https://metrica.yandex.com/add/) - [免费计数器设置](https://yandex.com/promo/freeservice/metrica?utm_source=help_metrica_en&utm_medium=cpc&utm_campaign=1) - [Yandex Metrica API](https://tech.yandex.com/metrika/) - [提出您的想法](https://yandex.com/support/metrica/troubleshooting/idea.html) | 线上培训 - [参加培训课程](https://yandex.com/adv/edu/online/metrika?utm_source=metrika_help&utm_medium=web&utm_campaign=static&utm_content=useful_links) || |#
[*просмотрах]: 当用户导航到某个网站页面时加载该页面。 页面浏览还包括页面刷新、AJAX 站点更新以及使用hit 方法发送数据。 {% included (../_includes/popup/id-qanda/check2-2.md) %} 发生这种情况的原因可能如下： - 计数器安装不正确。 例如 CMS 修改了计数器代码。 重新安装计数器或联系您的 CMS 的支持服务。 - 损坏的脚本导致 Yandex Metrica 计数器无法在网站上运行。 您可以在浏览器控制台中检查这一点。 {% endincluded %}