1.1.5 AEM Edge Delivery Services MarTech增效模組

Last update: Tue Sep 23 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.5.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.5.2 head.html

在Visual Studio Code中，開啟檔案 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.5.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-hant/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-hant/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-hant/docs/analytics/implementation/aep-edge/data-var-mapping
        payload.data.__adobe.analytics ||= {};
      },

      // set custom datastream overrides
      // see doc at:
      // - https://experienceleague.adobe.com/zh-hant/docs/experience-platform/web-sdk/commands/datastream-overrides
      // - https://experienceleague.adobe.com/zh-hant/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，並貼到Visual Studio Code檔案 scripts.js 中，方法是取代XXX旁的預留位置值datastreamId:。

AEMCS {modal="regular"}

orgId

前往https://platform.adobe.com/，然後在左側功能表中前往查詢。在認證下，您會找到 IMS組織ID，名稱為 使用者名稱。按一下複製圖示以複製 IMS組織ID，並貼到Visual Studio Code檔案 scripts.js 中，方式是取代XXX旁的預留位置值orgId:。

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 中，取代XXX陣列中的預留位置值launchUrls:。

您現在擁有所需的三個變數。您的檔案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"}