前言
在开发电商网站时，为了监测用户行为及网站数据，通常会使用 Google Analytics（下简称 GA）进行数据收集和分析。虽然 GA 提供了一系列的嵌入式跟踪代码（下称为 GA 代码），但对于前端开发者通常需要根据业务需求自定义 GA 代码来完成更复杂的数据收集与分析。
针对此问题，我们可以使用 npm 包 ga-simple-ecommerce，它提供了一种简单、易用的 GA 代码封装方案，帮助我们轻松实现电商网站数据的收集和分析。
安装
使用 npm 包管理器安装 ga-simple-ecommerce：
npm install --save ga-simple-ecommerce
使用
- 确认 GA 代码已嵌入网站中
- 在需要使用 ga-simple-ecommerce 的页面中引入 ga-simple-ecommerce：
import gaSimpleEcommerce from 'ga-simple-ecommerce';
- 在页面渲染后（即 DOM 加载完成后）调用 gaSimpleEcommerce.init() 方法进行初始化：
gaSimpleEcommerce.init();
- 在需要收集电商交易数据的页面中，包含如下 GA 代码：
ga('create', 'UA-XXXXXXX-XX', 'auto');
ga('send', 'pageview');以上代码涉及到 GA 的创建和发送，如果不理解可参考 GA 的官方文档。
- 根据业务需求调用 gaSimpleEcommerce 中各个方法，例如：
-- -------------------- ---- -------
-- --------
-----------------------------
--- ---------
----- ----- -------
------ --------
--------- -
---
-- --------
----------------------------
----- -
---
-- --------
----------------------------
--- -------------
------------ ----- ----------
-------- --------
---- -------
--------- -------
------- -------------
---上述代码涉及到的方法在 ga-simple-ecommerce 中都有详细的文档，可供参考。
深度与学习
通过 ga-simple-ecommerce 可以发现，大部分的 GA 代码都可以通过封装函数来实现按需调用。这与我们平时的封装函数的思路非常相似，同时可以让 GA 的使用更加简单，减少重复的代码编写。
在使用 ga-simple-ecommerce 的过程中，我们还可以学习如何使用 npm 包和 ES6 的模块化开发，了解电商网站常见的数据收集及分析方案，并深入了解 GA 的使用及原理。
指导意义
通过本文所介绍的 ga-simple-ecommerce，我们可以快速便捷地实现电商网站的数据收集和分析。同时，随着业务需求的不断变化，我们需要在 ga-simple-ecommerce 的基础上，根据业务需求对 GA 代码进行高度定制化的封装。
总之，通过本文所介绍的 ga-simple-ecommerce，我们不仅可以掌握 GA 的基本使用，还可以掌握 NPM 包的使用、ES6 模块化开发及电商网站数据收集和分析的基本知识，具有较高的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551f981e8991b448cf7e1