Updated Sizmek with adkit ready listener + notes

johnfmorton · Jan 11, 2019 · eb3a3b8 · eb3a3b8
1 parent 3cb918a
commit eb3a3b8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 14 deletions.
diff --git a/generators/app/templates/dev/_README_sizmek.md b/generators/app/templates/dev/_README_sizmek.md
@@ -10,12 +10,41 @@ If you use Sublime Text, open the mybanner.sublime-project file and you can quic
 
 As you make changes to the *index.html*, *script.js* and *style.scss* files, your browser will update and show you the changes you've made. The SCSS file is converted to CSS on the fly. Do **not** edit the CSS file directly because it will be overwritten.
 
-## The backup image
+## Sizmek
+
+Sizmek has a number of ways to build ads. When hand-coding a banner like you do in Build-a-banner, Sizmek refers to this as a "workspace" banner.
+
+https://support.sizmek.com/hc/en-us/articles/200722459-HTML5-Workspaces
+
+You may also need a `config.js` file for your ad. At the time I write this, it is not clear if this is a requirement or a nice-to-have. Build-a-banner does not create this file for you. Depending on what we discover, it may at some point in the future.
+
+Here is a link to the documentation on the topic:
+
+https://support.sizmek.com/hc/en-us/articles/208878026-Add-Manifest-Ad-Data-to-Your-Workspace-Config-js-File
+
+For the clickthru in Sizmek banners, you use the `adkit` Object, which has a listener for when it is ready. 
 
-Backup images are typically required for Sizmek standard banners but are not delivered inside the ZIP file that makes up the HTML banner. The exception is if you place a backup image in your noscript tag. This seems like a waste of your limited K weight when it comes to standard banners but some clients request it.
+```
+adkit.onReady(function(){
+        // use api
+        /* default clickthrough */ 
+    	adkit.clickthrough();
+   });
+```
+
+Here are 2 link with more details on this topic.
+
+https://support.sizmek.com/hc/en-us/articles/206584783-Sizmek-AdKit-API
+https://support.sizmek.com/hc/en-us/articles/115004544966-AdKit-Clickthrough-Method
+
+The Build-a-Banner template just created should cover the basics of a clickthru event already. 
+
+## The backup image
 
 The *Build A Banner* workflow can assit in preparing a backup image for delivery. Make an **optimized** backup image for your banner and store it in the 'backupImages' directory found along side the 'dev' directory. (*Build A Banner* will not optimize the image for you.) You can have *only one* image in the backup directory. You can have *only one* image in the backup directory.The name of your backup image can be anything you want as long as the extension is correct. For example, you can simply name it 'backup.gif' or 'backup.jpg'. The *Build A Banner* workflow will rename your backup image properly when it builds out your banner for delivery. 
 
+If you are providing banners to a media company to upload, you can give them the backups separately. If you are the one adding them to the Sizmek interface, you may need to add them to your Sizmek Workspace for the creative.
+
 ## Building files for delivery
 
 When you're ready to ready to build out your banner to show your client or deliver it to a media company, you use the "**gulp build**" command. This will take the contents of your 'dev' directory and minify each file. The 'dist' folder will then contain these minified files. You can upload these to a preview server to share with a client. In the 'delivery' you will also find these files zipped and ready to delivery. If you've included the backup image, it will renamed appropriately and be sitting next to the zip file. 

diff --git a/generators/app/templates/dev/_index_sizmek.html b/generators/app/templates/dev/_index_sizmek.html
@@ -4,7 +4,7 @@
 
 <head>
     <title><%= bannerName %></title>
-    <meta name="ad.size" content="width=300,height=250">
+    <meta name="ad.size" content="width=<%= actualBannerWidth %>,height=<%= actualBannerHeight %>">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <style type="text/css">
     #container_ad {
@@ -31,7 +31,7 @@
     </style>
     <!--endRemoveIf(production)-->
     <script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/adKit/adkit.js"></script>
-    <!-- There is no click thru URL in this file. It will handled in the Sizmek environment via the adkit.js file above and the EB.clickthrough() at the bottom of this HTML docuement -->
+    <!-- There is no click thru URL in this file. It will handled in the Sizmek environment via the adkit.js file above and the adkit.clickthrough() at the bottom of this HTML docuement -->
 
     <script language="javascript">
 
@@ -164,17 +164,14 @@
         <button id="background_exit_ad"></button>
     </div>
     <script type="text/javascript">
-        document.getElementById("background_exit_ad").addEventListener("click", clickthrough);
+        adkit.onReady(function () {
+            document.getElementById("background_exit_ad").addEventListener("click", clickthrough);
 
-        function clickthrough() {
-            EB.clickthrough();
-        }
+            function clickthrough() {
+                adkit.clickthrough();
+            }
+        });
     </script>
-    <!-- Remove the comment tags around the noscript area below if you would like to include a backup image within your banner build. This isn't typically done, but we've seen it requested by some clients. Doing a back up image this way impacts the K size of your banner build. Instead of doing backups this way, the are typically delivered as a separate standand-alone image. -->
-    <!-- You must create a backup image and include it here for users without JS -->
-    <!-- <noscript>
-        <a href="http://example.com"><img src="backupimage.jpg" width="300" height="250"></a>
-    </noscript> -->
 </body>
 
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "generator-buildabanner",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Yeoman generator to help build a variety of HTML banners: Standard, Adwords, DoubleClick Studio or Sizmek.",
   "license": "MIT",
   "main": "app/index.js",