Marketing
      Zurück zur Startseite
      1. Support Center
      2. Shopping Apps
      3. Marketing

      App Smartbanner

      Mit einem Smartbanner können Sie einfach und ohne großen Aufwand Installationen für Ihre App generieren. Daher ist der Banner die erste Priorität bei der Bewerbung einer App.

      Was ist der Smartbanner?

      Der Smartbanner ist ein Banner, welcher mobile Shop-Kunden auf Ihre App hinweist. Dieser Banner erscheint im Regelfall ganz oben im Shop und verlinkt in den jeweiligen App Store.

      Beispiel Ikea-App:

      smartbanner

      Es gibt verschiedene Wege, Smartbanner in Ihren Shop einzubinden. 

      1. Banner von Apple und Google

      Apple und Google bieten jeweils eigene Lösungen für die Einbindung eines Smartbanners. Diese funktionieren allerdings ausschließlich mit den eigenen Browser-Technologien (Safari & Chrome) und können nicht individuell angepasst werden.

      1.1 Apple

      In der Apple Developer Dokumentation ist beschrieben, wie Sie den Banner einbauen. Diese Option ist sehr simpel. Sie müssen einfach folgenden Tag in Ihr Shop-Frontend einfügen:

      <meta name="apple-itunes-app" content="app-id=myAppStoreID, app-argument=myURL">

      Ersetzen Sie dabei "myAppStoreID" mit Ihrer individuellen App Store ID. Wo Sie diese finden, ist ganz unten in diesem Artikel beschrieben. Das "app-argument" ist optional und dient lediglich als Referenz der Download-Quelle. Hier können Sie z.B. Ihre Shop-URL hinterlegen. 

      1.2 Google

      Auch hier finden Sie in der Developer Dokumentation von Google alle notwendigen Informationen. Diese Einbindung ist etwas komplexer als bei Apple. Grundlegend muss ein sogenanntes "Web App Manifest" auf Ihrem Server hinterlegt werden, damit die Google die App mit dem Shop assoziiert. Besonders relevant ist folgender Teil des Manifests:

      "related_applications": [
          {
          "platform": "play",
          "id": "com.google.samples.apps.iosched"
          }
      ]

      Die "id" muss Ihrer App entsprechen. Wo Sie diese finden, ist ganz unten im Artikel beschrieben.

      2. Javascript-basierter Smartbanner

      Ein auf Javascript basierender Banner bietet Ihnen die Vorteile, dass dieser beide Plattformen und mehr Browser gleichzeitig abdeckt. Darüber hinaus können Sie bei dieser Option mehr individualisieren. Shopgate bietet eine Vorlage für einen Banner an, welche Sie beliebig nutzen und individuell anpassen können:

      /** Configuration **/

      var appIconImg = "https://www.myshop.com/icon.png";
      var iosAppLink = "https://itunes.apple.com/us/app/xyz/id123456789?ls=1&mt=8";
      var androidAppLink = "https://play.google.com/store/apps/details?id=com.my.app";
      var appName = "My App";
      var appDescription = "My App Description";
      var downloadButtonText = "View";
      var bannerBackgroundColor = "#262729";
      var bannerTextColor = "#f79d3d";
      var downloadButtonColor = "#3288ff";
      var downloadButtonTextColor = "#ffffff";

      /*******************/

      function closeAppBanner() {
          var sgSmartBanner = document.getElementById("sg-smartbanner");
          if (sgSmartBanner) {
              sgSmartBanner.parentNode.removeChild(sgSmartBanner);
              try {
                  localStorage.setItem("hideSmartBanner", "true");
              } catch (e) {
                  console.log('Local storage not supported', e);
              }
          }
      }

      function isMobileDevice() {
          var userAgent = navigator.userAgent || navigator.vendor || window.opera;
          return /android|iPhone|iPad|iPod/i.test(userAgent);
      }

      function getAppLink() {
          if (/android/i.test(navigator.userAgent)) {
              return androidAppLink;
          }
          return iosAppLink;
      }

      function shouldShowBanner() {
          try {
              return !localStorage.getItem("hideSmartBanner") && isMobileDevice();
          } catch (e) {
              return isMobileDevice();
          }
      }

      function insertSmartBanner() {
          if (!shouldShowBanner()) return;

          var sgSmartBanner = document.createElement("div");
          sgSmartBanner.id = "sg-smartbanner";
          sgSmartBanner.style.cssText = "display: flex; align-items: center; max-width: 100%; width: 100%; height: auto; overflow: hidden; font-family: 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: " + bannerBackgroundColor + "; color: " + bannerTextColor + "; z-index: 99999; margin: 0 auto; padding: 8px 8px 8px 0; box-shadow: 0px 4px 6px rgba(0,0,0,0.1);";

          // Close button
          var closeButton = document.createElement("div");
          closeButton.id = "close-banner-btn";
          closeButton.style.cssText = "flex: 0 0 auto; color: #777; font-size: 20px; cursor: pointer; padding: 0 10px;";
          closeButton.innerHTML = "&#x2715;";
          closeButton.onclick = closeAppBanner;

          // App icon
          var appIcon = document.createElement("div");
          appIcon.style.cssText = "flex: 0 0 60px; margin-right: 10px;";
          var appIconImgTag = document.createElement("img");
          appIconImgTag.src = appIconImg;
          appIconImgTag.style.cssText = "width: 100%; border-radius: 12px; border: 1px solid #e4e0e0;";
          appIcon.appendChild(appIconImgTag);

          // App info
          var appInfo = document.createElement("div");
          appInfo.style.cssText = "flex: 1; line-height: 1.2; font-size: 15px; padding-left: 10px;";
          var appNameTag = document.createElement("span");
          appNameTag.style.fontWeight = "bold";
          appNameTag.innerHTML = appName;
          var appDescriptionTag = document.createElement("span");
          appDescriptionTag.style.cssText = "color: #8e8e93; font-size: 13px;";
          appDescriptionTag.innerHTML = "<br />" + appDescription;
          appInfo.appendChild(appNameTag);
          appInfo.appendChild(appDescriptionTag);

          // Download button
          var downloadButton = document.createElement("div");
          downloadButton.style.cssText = "flex: 0 0 auto; margin-left: auto;";
          var downloadLink = document.createElement("a");
          downloadLink.href = getAppLink();
          downloadLink.target = "_blank";
          downloadLink.style.cssText = "background-color: " + downloadButtonColor + "; color: " + downloadButtonTextColor + "; font-size: 16px; padding: 8px 16px; border-radius: 6px; text-decoration: none;";
          downloadLink.innerHTML = downloadButtonText;
          downloadButton.appendChild(downloadLink);

          // Append elements
          sgSmartBanner.appendChild(closeButton);
          sgSmartBanner.appendChild(appIcon);
          sgSmartBanner.appendChild(appInfo);
          sgSmartBanner.appendChild(downloadButton);

          var firstElement = document.body.firstElementChild;
          // var sgInsertPoint = document.getElementById('header');
          // var sgInsertPoint = document.getElementsByClassName('header')[0];

          document.body.insertBefore(sgSmartBanner, firstElement.nextSibling);
          // sgInsertPoint.parentNode.insertBefore(sgSmartBanner, sgInsertPoint);
      }

      function initSmartBanner() {
          setTimeout(insertSmartBanner, 100);
      }

      if (document.readyState === "loading") {
          document.addEventListener("DOMContentLoaded", initSmartBanner);
      } else {
          initSmartBanner();
      }

      In diesem Skript müssen einige Platzhalter (hier fett gedruckt) ersetzt werden, damit der Banner technisch wie gewünscht funktioniert: 

      App Icon: z.B. "https://www.myshop.com/icon.png";
      Apple App Link: z.B. "https://itunes.apple.com/us/app/xyz/id123456789?ls=1&mt=8";
      Google App Link: z.B. "https://play.google.com/store/apps/details?id=com.my.app";

      Darüber hinaus haben Sie über die weiteren Punkte in "Configuration" noch Möglichkeiten, Texte und Farben anzupassen. Wo Sie die notwendigen Daten finden, sehen Sie im nächsten Schritt.

      3. Eigener Banner oder Landingpage

      Neben den genannten Bannern, können Sie natürlich auch eigene Banner oder Landingpages über Ihr Shop-CMS erstellen und direkt verlinken. Dazu benötigen Sie in der Regel nur die Links zu den Apps. 

      Apple bietet Ihnen ausführliche Ressourcen wie Banner, Links und QR-Codes zu Ihrer App hier.

      Google bietet Ihnen Play Store Logos und Geräte-Darstellungen hier.

      Tipp: Auch Shopgate bietet Ihnen mit dem "App Store Optimierung"-Paket individuelle Screenshots Ihrer App an. Sprechen Sie uns dazu einfach an.

      Wo finde ich die notwendigen Daten?

      Allgemein:

      • Das App Icon für den Shopgate Banner können Sie direkt aus dem Shopgate Admin übernehmen. Nutzen Sie dafür einfach den Link "https://shopgate-public.s3.amazonaws.com/shops/25601/a.png" und ersetzen Sie "25601" durch Ihre individuelle Shop-ID. Diese finden Sie als URL-Endung auf allen Seiten Ihres Shopgate Admins.

      Apple: 

      • Apple App Link: Suchen Sie Ihre App ganz einfach über Google mit "Name der App" + "App". In der Regel ist die App unter den Top3 Ergebnissen. Alternativ können Sie auch die Apple Marketing Toolbox verwenden.
      • App ID: Diese können Sie aus dem Link zur App kopieren. Die ID ist immer wie folgt aufgebaut: "id123456789"

      Google:

      • Google App Link: Suchen Sie Ihre App ganz einfach über Google mit "Name der App" + "App". In der Regel ist die App unter den Top3 Ergebnissen.
      • App ID: Diese können Sie aus dem Link zur App kopieren. Die ID ist immer wie folgt aufgebaut: "com.myappname.app"