Merge pull request #13 from adjust/v110

Version 1.1.0

Author: YaraMatkova

CHANGELOG.md

@@ -1,3 +1,14 @@
+### Version 1.1.0 (25th January 2024)
+
+#### Added
+- Implemented impressions tracking.
+
+#### Fixed
+- Fixed CTA styles to limit its max-width.
+- Fixed CTA click behaviour when banner is implemented in iframe.
+
+---
+
 ### Version 1.0.2 (13th December 2023)
 
 #### Fixed

README.md

@@ -32,7 +32,7 @@ To <a id="loading-snippet">load Smart Banner SDK through CDN</a> paste the follo
 </script>
 ```
 
-When loading the sdk through CDN we suggest using minified version. You can target specific version like `https://cdn.adjust.com/adjust-smart-banner-1.0.2.min.js`, or you can target latest version `https://cdn.adjust.com/adjust-smart-banner-latest.min.js` if you want automatic updates without need to change the target file. The sdk files are cached so they are served as fast as possible, and the cache is refreshed every half an hour. If you want updates immediately make sure to target specific version.
+When loading the sdk through CDN we suggest using minified version. You can target specific version like `https://cdn.adjust.com/adjust-smart-banner-1.1.0.min.js`, or you can target latest version `https://cdn.adjust.com/adjust-smart-banner-latest.min.js` if you want automatic updates without need to change the target file. The sdk files are cached so they are served as fast as possible, and the cache is refreshed every half an hour. If you want updates immediately make sure to target specific version.
 
 
 ## <a id="initialization">Initialization</a>

demo/package.json

@@ -10,7 +10,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@adjustcom/smart-banner-sdk": "^1.0.2",
+    "@adjustcom/smart-banner-sdk": "^1.1.0",
     "lorem-ipsum": "^2.0.8"
   },
   "author": "Adjust GmbH",

layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adjustcom/smart-banner-sdk-layout",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "Adjust Smart Banner SDK Layout",
   "scripts": {
     "build": "npm run build:src && npm run build:types",

layout/src/action-button/index.ts

@@ -7,6 +7,9 @@ export class ActionButton {
 
   constructor(private banner: SmartBannerViewData, private trackerUrl: string = '') {
     this.link = document.createElement('a');
+
+    // In a case when banner in an iframe rendered, open a link in current window instead of the iframe
+    this.link.target = '_top';
   }
 
   private applyColors() {

layout/src/action-button/styles.module.scss

@@ -22,6 +22,13 @@
   line-height: 20px;
   cursor: pointer;
   text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  :global(.small) & {
+    max-width: 115px;
+  }
 
   :global(.medium) & {
     align-self: stretch;

layout/src/banner-body/index.ts

@@ -2,6 +2,7 @@ import { ActionButton } from '../action-button';
 import { AppIcon } from '../app-icon';
 import { DismissButton } from '../dismiss-button';
 import { BannerText, TextType } from '../text';
+import { ImpressionPixel } from '../impression-pixel';
 import { SmartBannerViewData } from '../data-types';
 
 import styles from './styles.module.scss';
@@ -13,8 +14,9 @@ export class BannerBody {
   private bannerBody: HTMLElement;
   private title: BannerText;
   private description: BannerText;
+  private pixel: ImpressionPixel;
 
-  constructor(private banner: SmartBannerViewData, onDismiss: () => void, trackerUrl?: string) {
+  constructor(private banner: SmartBannerViewData, onDismiss: () => void, trackerUrl: string = '', impressionUrl: string = '') {
     this.bannerBody = document.createElement('div');
     this.bannerBody.className = styles['banner-body'];
 
@@ -23,6 +25,8 @@ export class BannerBody {
     this.actionButton = new ActionButton(banner, trackerUrl);
     this.title = new BannerText(TextType.Title, banner.title, banner.titleColor);
     this.description = new BannerText(TextType.Description, banner.description, banner.descriptionColor);
+
+    this.pixel = new ImpressionPixel(impressionUrl);
   }
 
   private renderBackground(backgroundColor?: string, backgroundImageUrl?: string) {
@@ -64,16 +68,20 @@ export class BannerBody {
 
     this.bannerBody.appendChild(this.renderInnerElements());
 
+    this.pixel.render(this.bannerBody);
+
     root.appendChild(this.bannerBody);
   }
 
-  public update(banner: SmartBannerViewData, trackerUrl: string) {
+  public update(banner: SmartBannerViewData, trackerUrl: string, impressionUrl?: string) {
     this.dismissButton.update(banner.dismissalButtonColor);
     this.appIcon.update(banner.iconUrl, banner.appName);
     this.actionButton.update(banner, trackerUrl);
     this.title.update(banner.title, banner.titleColor);
     this.description.update(banner.description, banner.descriptionColor);
 
+    this.pixel.update(impressionUrl);
+
     this.renderBackground(banner.backgroundColor, banner.backgroundImageUrl);
 
     this.banner = banner;

layout/src/impression-pixel/index.ts

@@ -0,0 +1,32 @@
+import styles from './styles.module.scss';
+
+export class ImpressionPixel {
+  private image: HTMLImageElement;
+
+  constructor(private impressionUrl: string = '') {
+    this.image = document.createElement('img');
+    this.image.className = styles.pixel;
+    this.image.width = 0;
+    this.image.height = 0;
+
+    this.applyUrl();
+  }
+
+  private applyUrl() {
+    if (this.impressionUrl && this.impressionUrl !== '') {
+      this.image.src = this.impressionUrl;
+    } else {
+      this.image.removeAttribute('src');
+    }
+  }
+
+  public render(root: HTMLElement) {
+    root.appendChild(this.image);
+  }
+
+  public update(impressionUrl: string = '') {
+    this.impressionUrl = impressionUrl;
+
+    this.applyUrl();
+  }
+}

layout/src/impression-pixel/styles.module.scss

@@ -0,0 +1,4 @@
+.pixel {
+  pointer-events: none;
+  position: fixed;
+}

layout/src/smart-banner-layout-factory.ts

@@ -4,14 +4,14 @@ import { SmartBannerViewData } from './data-types';
 // eslint-disable-next-line
 const emptyHandler = () => { }
 
-const emptyTrackerUrl = '';
+const emptyLink = '';
 
 export class SmartBannerLayoutFactory {
   static createPreview(data: SmartBannerViewData): SmartBannerLayout {
-    return new SmartBannerView(data, emptyTrackerUrl, emptyHandler);
+    return new SmartBannerView(data, emptyLink, emptyLink, emptyHandler);
   }
 
-  static createViewForSdk(data: SmartBannerViewData, trackerUrl: string, onDismiss: () => void): SmartBannerLayout {
-    return new SmartBannerView(data, trackerUrl, onDismiss);
+  static createViewForSdk(data: SmartBannerViewData, trackerUrl: string, impressionUrl: string, onDismiss: () => void): SmartBannerLayout {
+    return new SmartBannerView(data, trackerUrl, impressionUrl, onDismiss);
   }
 }