1.1.6 AEM Edge Delivery Services MarTech插件

Last update: Thu Jun 12 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

AEM MarTech插件可帮助您为AEM项目快速设置一个完整的MarTech栈栈。

NOTE

该插件当前通过联合创新项目与AEM Engineering协作提供给客户。您可以在https://github.com/adobe-rnd/aem-martech上查找更多信息。

1.1.6.1将插件添加到存储库

导航到用于 citisignal GitHub存储库的文件夹。右键单击文件夹名称，然后选择 在文件夹 新建终端。

AEMCS {modal="regular"}

你会看到这个。粘贴以下命令并按 Enter。

git subtree add --squash --prefix plugins/martech https://github.com/adobe-rnd/aem-martech.git main

您应该会看到此内容。

AEMCS {modal="regular"}

导航到用于 citisignal GitHub存储库的文件夹，打开文件夹 plugins。您现在应该会看到名为 martech 的文件夹。

AEMCS {modal="regular"}

1.1.6.2 head.html

在Visual Studio代码中，打开文件 head.html。复制以下代码并将其粘贴到文件 head.html 中。

<link rel="preload" as="script" crossorigin="anonymous" href="/plugins/martech/src/index.js"/>
<link rel="preload" as="script" crossorigin="anonymous" href="/plugins/martech/src/alloy.min.js"/>
<link rel="preconnect" href="https://edge.adobedc.net"/>
<!-- change to adobedc.demdex.net if you enable third party cookies -->

保存更改。

AEMCS {modal="regular"}

1.1.6.3 scripts.js

在Visual Studio Code中，转到文件夹 scripts 并打开文件 scripts.js。复制以下代码并将其粘贴到文件 scripts.js 中的现有导入脚本下。

import {
  initMartech,
  updateUserConsent,
  martechEager,
  martechLazy,
  martechDelayed,
} from '../plugins/martech/src/index.js';

保存更改。

AEMCS {modal="regular"}

在Visual Studio Code的文件 scripts.js 中，查找以下代码：

const AUDIENCES = {
  mobile: () => window.innerWidth < 600,
  desktop: () => window.innerWidth >= 600,
  // define your custom audiences here as needed
};

在 const AUDIENCES = {…}； 下，粘贴以下代码：

  const isConsentGiven = true;
  const martechLoadedPromise = initMartech(
    // The WebSDK config
    // Documentation: https://experienceleague.adobe.com/zh-hans/docs/experience-platform/web-sdk/commands/configure/overview#configure-js
    {
      datastreamId: "XXX",
      orgId: "XXX",
      defaultConsent: 'in',
      onBeforeEventSend: (payload) => {
        // set custom Target params
        // see doc at https://experienceleague.adobe.com/zh-hans/docs/platform-learn/migrate-target-to-websdk/send-parameters#parameter-mapping-summary
        payload.data.__adobe.target ||= {};

        // set custom Analytics params
        // see doc at https://experienceleague.adobe.com/zh-hans/docs/analytics/implementation/aep-edge/data-var-mapping
        payload.data.__adobe.analytics ||= {};
      },

      // set custom datastream overrides
      // see doc at:
      // - https://experienceleague.adobe.com/zh-hans/docs/experience-platform/web-sdk/commands/datastream-overrides
      // - https://experienceleague.adobe.com/zh-hans/docs/experience-platform/datastreams/overrides
      edgeConfigOverrides: {
        // Override the datastream id
        // datastreamId: '...'

        // Override AEP event datasets
        // com_adobe_experience_platform: {
        //   datasets: {
        //     event: {
        //       datasetId: '...'
        //     }
        //   }
        // },

        // Override the Analytics report suites
        // com_adobe_analytics: {
        //   reportSuites: ['...']
        // },

        // Override the Target property token
        // com_adobe_target: {
        //   propertyToken: '...'
        // }
      },
    },
    // The library config
    {
      launchUrls: ["XXX"],
      personalization: !!getMetadata('target') && isConsentGiven,
    },
  );

AEMCS {modal="regular"}

上述代码中有几个变量需要替换为您自己的环境变量：

datastreamId: "XXX"
orgId: "XXX"
launchUrls: ["XXX"]

您可以按照以下说明找到这些变量：

datastreamId

转到https://platform.adobe.com/，然后在左侧菜单中转到 数据流。确保您位于正确的沙盒中，即--aepSandboxName--。搜索在本教程的入门部分中创建的数据流，其名称应为--aepUserLdap-- - One Adobe Datastream。单击复制图标以复制 数据流ID，并通过替换datastreamId:旁边的占位符值XXX将其粘贴到文件 scripts.js 中的Visual Studio Code中。

AEMCS {modal="regular"}

orgId

转到https://platform.adobe.com/，然后在左侧菜单中转到查询。在凭据下，您将找到 IMS组织ID，作为 用户名。单击复制图标以复制 IMS组织ID，并通过替换orgId:旁边的占位符值XXX将其粘贴到Visual Studio Code的文件 scripts.js 中。

AEMCS {modal="regular"}

launchUrls

转到https://platform.adobe.com/，然后在左侧菜单中转到标记。使用LDAP搜索您的属性，应为--aepUserLdap--。打开Web资产。

AEMCS {modal="regular"}

在左侧菜单中，转到环境，然后单击开发环境的安装图标。

AEMCS {modal="regular"}

您随后将找到所需的URL，但它位于HTML <script></script>标记内。您应该只复制从https开始直到.min.js的部分。

AEMCS {modal="regular"}

URL如下所示： https://assets.adobedtm.com/b754ed1bed61/b9f7c7c484de/launch-5fcd90e5b482-development.min.js。请确保不会复制其他文本，因为这样会导致错误。在Visual Studio Code中，在文件 scripts.js 中，替换launchUrls:数组中的占位符值XXX。

您现在拥有所需的三个变量。您的文件scripts.js现在应如下所示：

AEMCS {modal="regular"}

接下来，搜索以查找此代码块：

const main = doc.querySelector('main');
  if (main) {
    decorateMain(main);
    document.body.classList.add('appear');
    await loadSection(main.querySelector('.section'), waitForFirstImage);
  }

AEMCS {modal="regular"}

使用以下代码块替换它：

const main = doc.querySelector('main');
  if (main) {
    decorateMain(main);
    document.body.classList.add('appear');
    await Promise.all([
      martechLoadedPromise.then(martechEager),
      loadSection(main.querySelector('.section'), waitForFirstImage)
    ]);
  }

AEMCS {modal="regular"}

接下来，搜索并向下滚动到async function loadLazy(doc) {。

AEMCS {modal="regular"}

在第autolinkModals(doc);行下，添加以下代码行：

await martechLazy();

AEMCS {modal="regular"}

接下来，搜索并向下滚动到第function loadDelayed() {行。

AEMCS {modal="regular"}

在第// load anything that can be postponed to the latest here行下添加此代码块。

window.setTimeout(() => {
    martechDelayed();
    return import('./delayed.js');
  }, 3000);

AEMCS {modal="regular"}

接下来，搜索并转到包含window.adobeDataLayer.push的行。

AEMCS {modal="regular"}

您将看到对象pageContext按如下方式定义。您现在需要在pageContext下添加两个对象。

    pageContext: {
      pageType,
      pageName: document.title,
      eventType: 'visibilityHidden',
      maxXOffset: 0,
      maxYOffset: 0,
      minXOffset: 0,
      minYOffset: 0,
    }

需要添加以下代码：

    ,
    _experienceplatform: {
      identification:{
        core:{
          ecid: sessionStorage.getItem("com.adobe.reactor.dataElements.ECID")
        }
      }
    },
    web: {
      webPageDetails:{
        name: document.title,
        URL: window.location.href
      }
    }

window.adobeDataLayer.push 现在应如下所示：

  window.adobeDataLayer.push({
    pageContext: {
      pageType,
      pageName: document.title,
      eventType: 'visibilityHidden',
      maxXOffset: 0,
      maxYOffset: 0,
      minXOffset: 0,
      minYOffset: 0,
    },
    _experienceplatform: {
      identification:{
        core:{
          ecid: sessionStorage.getItem("com.adobe.reactor.dataElements.ECID")
        }
      }
    },
    web: {
      webPageDetails:{
        name: document.title,
        URL: window.location.href
      }
    }
  });

AEMCS {modal="regular"}