Adobe Target 是一个基于云的个性化营销解决方案，可以帮助企业实现一个全面的数字营销策略，提供访客主体、行为和上下文的智能化分析和优化，提升客户体验和收益。在前端开发中，我们可以通过 npm 包 adobe-target-hoc 快速接入 Adobe Target 服务。
安装和配置
在项目目录下安装 npm 包：
npm install adobe-target-hoc
在项目中导入 Adobe Target 相关编排文件（mbox.js 或 mbox.js 和 at.js）：
<script type="text/javascript" src="https://<yourcompany>.tt.omtrdc.net/m2/<yourcompany>/mbox.js"></script> <script type="text/javascript" src="https://<yourcompany>.tt.omtrdc.net/m2/<yourcompany>/at.js"></script>
在项目中导入 adobe-target-hoc：
import Target from 'adobe-target-hoc';
配置 Adobe Target 相关参数：
-- -------------------- ---- ------- ------------------ ------- ---------------- -------- ---- --------------- --------------------- ----------- - --------------- --------- --------------- -------- - ---
使用和 API
adobe-target-hoc 提供了一系列 API，可以方便地使用 Adobe Target 服务。下面是一些常用的 API 示例：
1. 获取目标服务 mbox 名称
const mboxName = Target.getMboxName('<mbox_name>');说明：获取指定 mbox 名称，如果未指定，则返回全局 mbox 名称。在页面上可以通过 mbox 名称区分多个 mbox，通常用于统计、测试或定位问题。
2. 设置目标服务 mbox 参数
Target.setMboxParams({
'at_property3': 'value3',
'at_property4': 'value4'
});说明：设置 mbox 参数，如果不设置，则使用全局 mbox 参数。 mbox 参数是一个键值对的对象，可用于传递页面上需要的信息，如用户信息、页面信息、搜索信息等。
3. 发送目标请求
Target.sendRequest('<offer_type>', {
'at_property5': 'value5',
'at_property6': 'value6'
}, '<callback_function>');说明：发送目标请求，返回请求结果。 offer_type 是要请求的体验类型（如默认内容、个性化内容、测试内容等），如果未指定，则返回默认内容；callback_function 是请求结果回调函数。
4. 获取目标内容
const targetContent = Target.getContent('<mbox_name>', '<offer_type>', {
'at_property7': 'value7',
'at_property8': 'value8'
});说明：获取目标内容，返回目标内容 HTML 或空串。 mbox_name 是 mbox 名称，可选，如果不指定则返回全局 mbox 内容；offer_type 是要请求的体验类型，参见 API 3；at_property 是 mbox 参数，参见 API 2。
示例代码
下面是一些简单的示例代码，演示如何使用 adobe-target-hoc。
示例一
-- -------------------- ---- -------
------ ------ ---- -------------------
------------------
------- ----------------
--------------- ---------------------
----------- -
--------------- ---------
--------------- --------
-
---
----- -------- - ----------------------------------
---------------------- -- -- --------- --- ---- --
----------------------
--------------- ---------
--------------- --------
---
----- ------------- - -------------------------------- --------------- -
--------------- ---------
--------------- --------
---
--------------------------- -- -- ---- ---示例二
-- -------------------- ---- -------
------ ------ ---- -------------------
------------------
------- ----------------
-------- -----
--------------- ---------------------
----------- -
--------------- ---------
--------------- --------
-
---
----------------------------- -
--------------- ---------
--------------- --------
-- -------- ----------------- -
---------------------- -- -------------
-- -------- ------- -
-------------------- -------- -- -------------
---总结
Adobe Target 是一个强大的个性化营销解决方案，适用于各种形式的数字营销活动。adobe-target-hoc 是一个专门为前端开发而生的 npm 包，提供了丰富的 API，可以轻松地接入 Adove Target 服务，使用起来非常方便。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005777981e8991b448ead55