有三種支援的使用Adobe Experience Platform Web SDK方式:
如需標籤擴充功能的相關檔案,請參閱 標籤檔案
CDN提供預先建置的版本。 您可以直接在頁面上參考CDN上的程式庫,或下載並托管於您自己的基礎架構。 其格式為縮制和未縮制。 未縮制的版本有助於偵錯用途。
URL結構:https://cdn1.adoberesources.net/alloy/[版本]/alloy.min.js或alloy.js(非縮製版本)。
例如:
預先建立的獨立版本需要直接新增至頁面的「基本程式碼」。 盡可能將下列「基本程式碼」複製並貼到 <head>
HTML:
<script>
!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
[]).push(o),n[o]=function(){var u=arguments;return new Promise(
function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
(window,["alloy"]);
</script>
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js" async></script>
「基礎代碼」會建立全域函式,名稱為 alloy
. 使用此函式與SDK互動。 如果您想要為全域函式命名其他名稱,請變更 alloy
名稱如下:
<script>
!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
[]).push(o),n[o]=function(){var u=arguments;return new Promise(
function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
(window,["mycustomname"]);
</script>
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js" async></script>
在此範例中,全域函式已重新命名 mycustomname
,而非 alloy
.
要避免潛在問題,請使用一個名稱,該名稱至少包含一個非數字的字元,並且與已在上找到的屬性名稱不衝突 window
.
此基礎代碼除了建立全域函式外,還載入外部檔案(alloy.js
)裝載於伺服器上。 預設會以非同步方式載入此程式碼,讓您的網頁盡可能發揮效能。 這是建議的實作。
此SDK使用promise,此為傳送非同步任務完成的方法。 此 Promise 除了SDK本身支援外,所有目標瀏覽器都會原生支援SDK實作 Internet Explorer. 若要在上使用SDK Internet Explorer,您必須 window.Promise
填充.
若要判斷您是否已 window.Promise
填充:
window.Promise
進入主控台,然後按Enter鍵。如果 undefined
顯示,您可能已填充 window.Promise
. 另一種方法,判斷 window.Promise
填入是在完成上述安裝指示後,載入您的網站所填入。 如果SDK擲回關於Promise的錯誤,您可能尚未填入 window.Promise
.
如果你確定必須填充 window.Promise
,請在先前提供的基本程式碼上方加上下列指令碼標籤:
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
此標籤會載入指令碼,以確保 window.Promise
是有效的Promise實作。
如果您選擇載入不同的Promise實作,請確定其支援 Promise.prototype.finally
.
如 新增程式碼,您複製並貼上至網站HTML的基本程式碼會載入外部檔案。 外部檔案包含SDK的核心功能。 在此檔案載入時,您嘗試執行的任何命令都會排入佇列,然後在檔案載入後處理。 非同步載入檔案是最高效能的安裝方法。
但是,在某些情況下,您可能會想要同步載入檔案\(稍後將記錄有關這些情況的詳細資訊\)。 這樣會阻止瀏覽器解析和呈現HTML文檔的其餘部分,直到外部檔案載入和執行完畢。 在向使用者顯示主要內容之前,這種額外延遲通常不鼓勵使用,但視情況而定可能有意義。
若要同步載入檔案而非非同步載入,請移除 async
屬性 script
標籤,如下所示:
<script>
!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
[]).push(o),n[o]=function(){var u=arguments;return new Promise(
function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
(window,["alloy"]);
</script>
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js"></script>
Adobe Experience Platform Web SDK也以NPM套件形式提供。 NPM 是JavaScript適用的套件管理器。 安裝NPM套件可讓您控制Adobe Experience Platform Web SDK JavaScript的建置程式。 NPM套件會公開EcmaScript 5版模組或EcmaScript 2015版(ES6)模組,這些模組會在瀏覽器中執行。
npm install @adobe/alloy
Adobe Experience Platform Web SDK的NPM套件會公開 createInstance
函式。 此函式可用來建立例項。 傳遞到函式的name選項控制記錄中使用的前置詞。 以下是使用套件的範例。
import { createInstance } from "@adobe/alloy";
const alloy = createInstance({ name: "alloy" });
alloy("config", { ... });
alloy("sendEvent", { ... });
var alloyLibrary = require("@adobe/alloy");
var alloy = alloyLibrary.createInstance({ name: "alloy" });
alloy("config", { ... });
alloy("sendEvent", { ... });
Adobe Experience Platform SDK使用promise,這是傳達非同步工作完成情況的方法。 此 Promise 除了SDK本身支援外,所有目標瀏覽器都會原生支援SDK實作 Internet Explorer. 若要在上使用SDK Internet Explorer,您必須 window.Promise
填充.
一個用來polyfill promise的程式庫是promise-polyfill。 請參閱 promise-polyfill檔案 以取得如何使用NPM安裝的詳細資訊。
如果您選擇載入不同的Promise實作,請確定其支援 Promise.prototype.finally
.