npm - @zestyxyz/web-sdk - Versions diffs - 3.2.1 - Mend

@zestyxyz/web-sdk 3.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,30 @@
+# zesty-web
+This is the Web SDK for Zesty Banner integration.
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.zesty.xyz/sdk/zesty-web-sdk.js"></script>
+  </head>
+  <body>
+    <zesty-web id="banner1" ad-unit="00000000-0000-0000-0000-000000000000" format="medium-rectangle" width="300px"></zesty-web>
+  </body>
+</html>
+```
+## Local dev
+```sh
+yarn
+yarn dev
+```
+If you've run `yarn` at the top level, you don't need to run it here again.
+## Build
+```sh
+yarn build
+```

package/dist/zesty-web-sdk.js ADDED Viewed

@@ -0,0 +1 @@

+ (()=>{"use strict";const t="https://cdn.zesty.xyz/sdk/assets",e={tall:{width:.75,height:1,style:{standard:`${t}/zesty-banner-tall.png`,minimal:`${t}/zesty-banner-tall-minimal.png`,transparent:`${t}/zesty-banner-tall-transparent.png`}},wide:{width:4,height:1,style:{standard:`${t}/zesty-banner-wide.png`,minimal:`${t}/zesty-banner-wide-minimal.png`,transparent:`${t}/zesty-banner-wide-transparent.png`}},square:{width:1,height:1,style:{standard:`${t}/zesty-banner-square.png`,minimal:`${t}/zesty-banner-square-minimal.png`,transparent:`${t}/zesty-banner-square-transparent.png`}},"mobile-phone-interstitial":{width:.56,height:1,style:{standard:`${t}/zesty-default-mobile-phone-interstitial.png`,minimal:`${t}/zesty-default-mobile-phone-interstitial.png`,transparent:`${t}/zesty-default-mobile-phone-interstitial.png`}},billboard:{width:3.88,height:1,style:{standard:`${t}/zesty-default-billboard.png`,minimal:`${t}/zesty-default-billboard.png`,transparent:`${t}/zesty-default-billboard.png`}},"medium-rectangle":{width:1.2,height:1,style:{standard:`${t}/zesty-default-medium-rectangle.png`,minimal:`${t}/zesty-default-medium-rectangle.png`,transparent:`${t}/zesty-default-medium-rectangle.png`}}},n=()=>{const t=null!=window.XRHand&&null!=window.XRMediaBinding,e=navigator.userAgent.includes("OculusBrowser"),n=t&&e?"Full":t||e?"Partial":"None";return{match:"None"!==n,confidence:n}},i=()=>{const t=null!=window.mozInnerScreenX&&null==window.speechSynthesis,e=navigator.userAgent.includes("Mobile VR")&&!navigator.userAgent.includes("OculusBrowser"),n=t&&e?"Full":t||e?"Partial":"None";return{match:"None"!==n,confidence:n}},a=async()=>{const t=navigator.xr&&await navigator.xr.isSessionSupported("immersive-vr")&&await navigator.xr.isSessionSupported("immersive-ar"),e=navigator.userAgent.includes("Pico Neo 3 Link"),n=t&&e?"Full":t||e?"Partial":"None";return{match:"None"!==n,confidence:n}},s=()=>{const t=0===navigator.maxTouchPoints||0===navigator.msMaxTouchPoints,e=!navigator.userAgent.includes("Android")&&!navigator.userAgent.includes("Mobile"),n=t&&e?"Full":t||e?"Partial":"None";return{match:"None"!==n,confidence:n}},r=async()=>{let t={platform:"",confidence:""};return t=n().match?{platform:"Oculus",confidence:n().confidence}:i().match?{platform:"Wolvic",confidence:i().confidence}:await a().match?{platform:"Pico",confidence:await a().confidence}:s().match?{platform:"Desktop",confidence:s().confidence}:{platform:"Unknown",confidence:"None"},t},o=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i,l=function(t){if(!function(t){return"string"==typeof t&&o.test(t)}(t))throw TypeError("Invalid UUID");var e,n=new Uint8Array(16);return n[0]=(e=parseInt(t.slice(0,8),16))>>>24,n[1]=e>>>16&255,n[2]=e>>>8&255,n[3]=255&e,n[4]=(e=parseInt(t.slice(9,13),16))>>>8,n[5]=255&e,n[6]=(e=parseInt(t.slice(14,18),16))>>>8,n[7]=255&e,n[8]=(e=parseInt(t.slice(19,23),16))>>>8,n[9]=255&e,n[10]=(e=parseInt(t.slice(24,36),16))/1099511627776&255,n[11]=e/4294967296&255,n[12]=e>>>24&255,n[13]=e>>>16&255,n[14]=e>>>8&255,n[15]=255&e,n},c="https://beacon2.zesty.market/zgraphql",d="https://relay.zesty.xyz/",h="DefaultCampaign",u="https://api.zesty.market/api";let m=!1;const p={},g={},f={},y={},w={},b={};new class{relay;specifiedName;specifiedDescription;specifiedUrl;specifiedImage;specifiedTags;browserContext="document"in globalThis;topLevelDocument=null;stripQueryParams=!0;constructor(t,e=null){this.browserContext?t?(this.relay=t,e&&(this.specifiedName=e.name??null,this.specifiedDescription=e.description??null,this.specifiedUrl=e.url??null,this.specifiedImage=e.image??null,this.specifiedTags=e.tags??null,this.stripQueryParams=e.stripQueryParams??!0),this.sessionId=crypto&&"randomUUID"in crypto?crypto.randomUUID():"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(t){const e=Math.floor(16*Math.random());return("x"==t?e:3&e|8).toString(16)}))):console.error("You must specify a relay URL for the beacon to connect to!"):console.error("This beacon can only be used in a browser context!")}getUrl(){if(this.specifiedUrl)return this.specifiedUrl;const t=this.topLevelDocument??window.document,e=t.head.querySelector('meta[property="og:url"]'),n=t.head.querySelector("meta[data-canonical-url]");if(e)return e.getAttribute("content");if(n)return n.getAttribute("data-canonical-url");{const t=this.topLevelDocument?window.top.location:window.document.location;return this.stripQueryParams?t.protocol+"//"+t.host+t.pathname:t.href}}getName(){if(this.specifiedName)return this.specifiedName;const t=this.topLevelDocument??window.document,e=t.head.querySelector('meta[name="application-name"]');return e?e.getAttribute("content"):t.title}getDescription(){if(this.specifiedDescription)return this.specifiedDescription;const t=this.topLevelDocument??window.document,e=t.head.querySelector('meta[name="description"]'),n=t.head.querySelector('meta[property="og:description"]');return e&&e.hasAttribute("description")?e.getAttribute("description"):e?e.getAttribute("content"):n?n.getAttribute("content"):""}async getImage(){if(this.specifiedImage)return this.specifiedImage;const t=this.topLevelDocument??window.document,e=t.head.querySelector('meta[property="og:image"]');await new Promise((t=>setTimeout(t,5e3)));const n=t.querySelector("a-scene")?.components.screenshot;if(e){let t=e.getAttribute("content");return 0===t.length?"#":t.startsWith("http")?t:new URL(t,this.getUrl()).href}if(n){const e=t.querySelector("a-scene");let i=n.width,a=n.height;e.setAttribute("screenshot","width: 2048; height: 1024;");const s=n.getCanvas("perspective").toDataURL();return e.setAttribute("screenshot",`width: ${i}; height: ${a};`),s}return"#"}isAdult(){const t=(this.topLevelDocument??window.document).head.querySelector('meta[name="rating"]');if(t){const e="adult"===t.getAttribute("content"),n="RTA-5042-1996-1400-1577-RTA"===t.getAttribute("content");return e||n}return!1}getTags(){if(this.specifiedTags)return this.specifiedTags;const t=(this.topLevelDocument??window.document).head.querySelector('meta[name="keywords"]');return t?t.getAttribute("content"):""}async signal(){if(!this.browserContext)return void console.error("This beacon can only be used in a browser context!");if(!this.relay)return void console.error("You must specify a relay URL for the beacon to connect to!");if("complete"!==document.readyState&&await new Promise((t=>document.addEventListener("DOMContentLoaded",t))),window.self!==window.top)try{this.topLevelDocument=window.top.document}catch{return void console.error("Cannot get URL of cross-origin frame, aborting.")}const t=this.getUrl(),e=this.getName(),n=this.getDescription(),i=await this.getImage(),a=this.isAdult(),s=this.getTags();if(!(t&&e&&n&&i))return void console.error("Missing required metadata! Check your <meta> tags for the following attributes: data-canonical-url, name=application-name, name=description, og:image");const r={url:t,name:e,description:n,active:!0,image:i,adult:a,tags:s};await fetch(`${this.relay}/beacon`,{method:"PUT",body:JSON.stringify(r),headers:{"Content-Type":"application/json"}});const o=setInterval((async()=>{try{await fetch(`${this.relay}/session`,{method:"POST",body:JSON.stringify({session_id:this.sessionId,url:t,timestamp:Date.now()}),headers:{"Content-Type":"application/json"}})}catch{console.error("Failed to send heartbeat signal! Relay server is not reachable."),clearInterval(o)}}),5e3)}}("https://relay.zesty.xyz").signal();const v=new(URLSearchParams||Map)(globalThis.location?.search),x="true"===v.get("debug"),A="true"===v.get("staging"),$="localhost"===globalThis.location?.hostname||"127.0.0.1"===globalThis.location?.hostname;function z(t,e){const n=document.createElement("div");n.id=`zesty-div-${t}`,n.style.height="250px",n.style.width="300px",n.style.position="fixed",n.style.top="0",n.style.zIndex="-2","medium-rectangle"==e?y[t]="pb-slot-right-1":"billboard"==e?(y[t]="pb-slot-billboard",n.style.width="728px",n.style.height="90px"):"mobile-phone-interstitial"==e&&(y[t]="pb-slot-interstitial",n.style.width="1080px",n.style.height="1920px"),f[t]=n.id,document.body.appendChild(n),b[t]=setInterval((()=>{let e=document.getElementById(`zesty-div-${t}`);const n=e?.querySelector('iframe:not([title*="prpb"])');if(n){let e=function(t){if(!t.contentDocument)return;const e=t.contentDocument.querySelectorAll("img"),n=Array.prototype.filter.call(e,(t=>t.height>1));return 0!=n.length?{asset_url:n[0].src,cta_url:n[0].parentElement.href}:void 0}(n);if(e){const{asset_url:n,cta_url:i}=e;n===g[t].asset_url&&i===g[t].cta_url||(g[t]={asset_url:n,cta_url:i},w[t]={asset_url:n,cta_url:i})}}}),1e3)}const I=[{id:"4902864a-5531-496b-8d4d-ec7b9849e8e1",format:"medium-rectangle",oldFormat:"tall",absoluteWidth:.75,absoluteHeight:.625}],D=(t,n="standard",i=!1,a=null,s=null,r=null)=>({Ads:[{asset_url:s?.length>0?s:e[i?a:t].style[n],cta_url:r?.length>0?r:d}],CampaignId:h}),T=async(t,e,n,i,a,s=null,r=null)=>{try{const o=encodeURI(window.location.href).replace(/\/$/,""),l=await fetch(`${u}/ad?ad_unit_id=${t}&url=${o}`);return 200==l.status?await l.json():D(e,n,i,a?.format,s,r)}catch(t){return console.warn("Error retrieving campaign banner. Using default."),D(e,n,i,a?.format,s,r)}};console.log("Zesty SDK Version: ","3.2.1");class _ extends HTMLElement{constructor(){super(),this.adUnit="",this.format="medium-rectangle",this.width="100%",this.height="100%",this.shadow=this.attachShadow({mode:"open"}),this.beacon=!0,this.prebid=!0,this.adjustHeightandWidth=this.adjustHeightandWidth.bind(this)}connectedCallback(){async function t(t,e,a,s,o,b,v){const _=await(async(t,e="tall",n="standard",i=!0,a=null,s=null)=>{if(["tall","wide","square"].includes(e)&&console.warn("The old Zesty banner formats (tall, wide, and square) are being deprecated and will be removed in a future version. Please update to one of the new IAB formats (mobile-phone-interstitial, billboard, and medium-rectangle).\nCheck https://docs.zesty.xyz/guides/developers/ad-units for more information."),x)return new Promise((t=>t((t=>({Ads:[{asset_url:`${A?"https://api-staging.zesty.market/api":u}/ad/sample?format=${t}&timestamp=${Date.now()}`,cta_url:d}],CampaignId:h}))(e))));try{l(t)}catch(i){return console.warn(`Ad unit ID ${t} is not a valid UUID.`),new Promise((t=>t(D(e,n,!1,null,a,s))))}let r=(t=>I.find((e=>e.id===t))||{})(t),o=(r?.oldFormat&&e==r?.oldFormat)??!1;if(!t)return new Promise((t=>t(D(e,n,o,r.format,a,s))));if(!i)return T(t,e,n,o,r,a,s);if(m)w[t]=null,p[t]=0,g[t]={asset_url:null,cta_url:null},f[t]||z(t,e),$||tude.cmd.push((function(){tude.refreshAdsViaDivMappings([{divId:f[t],baseDivId:y[t]}])}));else{const n=o?r.format:e;p[t]=0,g[t]={asset_url:null,cta_url:null},((t,e)=>{if(x)return console.log("Debug mode enabled, skipping Prebid initialization."),void(m=!0);if(z(t,e),!$){const e=document.createElement("link");e.href="https://www.googletagservices.com/tag/js/gpt.js",e.rel="preload",e.as="script",document.head.appendChild(e);const n=document.createElement("script");n.src="https://dn0qt3r0xannq.cloudfront.net/zesty-ig89tpzq8N/zesty-longform/prebid-load.js",n.async=!0,document.head.appendChild(n);const i=document.createElement("script");i.src="https://cdn.jsdelivr.net/npm/gifler@0.1.0/gifler.min.js",document.head.appendChild(i),window.Raven=window.Raven||{cmd:[]},window.Raven.cmd.push((({config:e})=>{e.setCustom({param1:t})}))}window.tude=window.tude||{cmd:[]},$||tude.cmd.push((function(){tude.refreshAdsViaDivMappings([{divId:`zesty-div-${t}`,baseDivId:y[t]}])})),m=!0})(t,n)}return new Promise(((i,l)=>{!async function l(){if(w[t]?.asset_url&&w[t]?.cta_url){const{asset_url:e,cta_url:n}=w[t];if(e.startsWith("canvas://")){const t=document.createElement("iframe");t.id="zesty-canvas-iframe",document.body.appendChild(t),t.contentDocument.open(),t.contentDocument.write(e.split("canvas://")[1]),t.contentDocument.close()}i({Ads:[{asset_url:e,cta_url:n}],CampaignId:"Prebid"})}else if(p[t]++,5==p[t]){const l=await T(t,e,n,o,r,a,s);p[t]=0,i(l)}else setTimeout(l,1e3)}()}))})(t,e,"standard",v),{id:U,asset_url:S,cta_url:C}=_.Ads[0],P=document.createElement("img");return a.innerHTML="",a.appendChild(P),P.setAttribute("id",U),P.style.width=s,P.style.height=o,P.setAttribute("crossorigin",""),P.setAttribute("data-url",C),P.addEventListener("click",(e=>{e.preventDefault(),(t=>{if(t){if(n().match){if(t.includes("https://www.meta.com/experiences/"))return void setTimeout((()=>{window.open(t,"_blank")}),1e3)}else if(i().match){const e=document.createElement("div"),n=document.createElement("div"),i=document.createElement("p"),a=document.createElement("button"),s=document.createElement("button");return e.style.backgroundColor="rgb(0, 0, 0, 0.75)",e.style.color="white",e.style.textAlign="center",e.style.position="fixed",e.style.top="50%",e.style.left="50%",e.style.padding="5%",e.style.borderRadius="5%",e.style.transform="translate(-50%, -50%)",i.innerHTML=`<b>This billboard leads to ${t}. Continue?</b>`,a.innerText="Move cursor back into window.",a.style.width="100vw",a.style.height="100vh",a.onmouseenter=()=>{a.style.width="auto",a.style.height="auto",a.innerText="Yes"},a.onclick=()=>{window.open(t,"_blank"),e.remove()},s.innerText="No",s.onclick=()=>{e.remove()},e.append(n),n.append(i),n.append(a),n.append(s),void document.body.append(e)}window.open(t,"_blank")}})(C),b&&(async(t,e=null)=>{const{platform:n,confidence:i}=await r();try{await fetch(c,{method:"POST",body:JSON.stringify({query:`mutation { increment(eventType: clicks, spaceId: "${t}", campaignId: "${e}", platform: { name: ${n}, confidence: ${i} }) { message } }`}),headers:{"Content-Type":"application/json"}})}catch(t){console.log("Failed to emit onclick event",t.message)}})(t,_.CampaignId)})),b&&(async(t,e=null)=>{const{platform:n,confidence:i}=await r();try{await fetch(c,{method:"POST",body:JSON.stringify({query:`mutation { increment(eventType: visits, spaceId: "${t}", campaignId: "${e}", platform: { name: ${n}, confidence: ${i} }) { message } }`}),headers:{"Content-Type":"application/json"}})}catch(t){console.log("Failed to emit onload event",t.message)}})(t,_.CampaignId),S?(P.setAttribute("src",S),new Promise(((t,e)=>{P.onload=()=>t({img:P,url:C}),P.onerror=()=>e(new Error("img load error"))}))):{id:"blank"}}this.style.cursor="pointer",this.adUnit=this.hasAttribute("ad-unit")?this.getAttribute("ad-unit"):this.adUnit,this.format=this.hasAttribute("format")?this.getAttribute("format"):this.format,this.height=this.hasAttribute("height")?this.getAttribute("height"):this.height,this.width=this.hasAttribute("width")?this.getAttribute("width"):this.width,this.beacon=this.hasAttribute("beacon")?"false"!==this.getAttribute("beacon"):this.beacon,this.prebid=this.hasAttribute("prebid")?"false"!==this.getAttribute("prebid"):this.prebid,this.adjustHeightandWidth(),t(this.adUnit,this.format,this.shadow,this.width,this.height,this.beacon,this.prebid),setInterval((()=>{t(this.adUnit,this.format,this.shadow,this.width,this.height,this.beacon,this.prebid)}),3e4)}adjustHeightandWidth(){const t=/(\d+)/,n=this.height.split(t),i=this.width.split(t);this.height=this.hasAttribute("height")?this.height:this.hasAttribute("width")?`${i[1]/e[this.format].width}${i[2]}`:this.height,this.width=this.hasAttribute("height")?`${n[1]*e[this.format].width}${n[2]}`:(this.hasAttribute("width"),this.width)}}customElements.define("zesty-web",_)})();

package/package.json ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "name": "@zestyxyz/web-sdk",
+  "version": "3.2.1",
+  "description": "Web SDK for Zesty Banner integration into an HTML page via WebComponents.",
+  "main": "dist/zesty-web-sdk.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "webpack --mode=development",
+    "build": "webpack --mode=production",
+    "dev": "webpack serve --config webpack.config.js --mode development --progress --open"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zestyxyz/zesty-ads-sdk-web.git",
+    "directory": "web"
+  },
+  "author": "Zesty",
+  "bugs": {
+    "url": "https://github.com/zestyxyz/zesty-ads-sdk-web/issues"
+  },
+  "homepage": "https://github.com/zestyxyz/zesty-ads-sdk-web#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2"
+  }
+}