使用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使用的實作原生受到所有目標瀏覽器的支援,但 Internet Explorer. 若要在上使用SDK Internet Explorer,您必須擁有 window.Promise
多面體.
若要判斷您是否擁有 window.Promise
多面體:
window.Promise
進入主控台,然後按Enter。如果是 undefined
出現,表示您可能已經填滿 window.Promise
. 另一種判斷是否需要 window.Promise
「 」為polyfilled,方法是在完成上述安裝指示後載入您的網站。 如果SDK擲回提及Promise的錯誤,表示您可能尚未填滿 window.Promise
.
如果您已決定您必須使用polyfill 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使用的實作原生受到所有目標瀏覽器的支援,但 Internet Explorer. 若要在上使用SDK Internet Explorer,您必須擁有 window.Promise
多面體.
您可以用來進行polyfill promise的資料庫是promise-polyfill。 請參閱 promise-polyfill檔案 瞭解如何使用NPM安裝的詳細資訊。
如果您選擇載入不同的Promise實作,請確定它支援 Promise.prototype.finally
.