What You See is What You Get
In the blog “Ad Impression and Click Counting: Are You Billing Your Customer Correctly?” I explained how ad impressions are counted and confirmed. The blog summarized scenarios, where customer billing may be inaccurate even when there are confirmed impressions. The steps behind this erroneous process are as follows: Ads are confirmed through a “client-side pixel” at specific position in an AD response. This is usually a transparent 1×1 pixel GIF. The URL for this image contains a unique identifier to record information that all the ads as per the request have been confirmed. For example, when a page is loaded, and an image is requested, all positions that were filled on the page are marked as confirmed. Thus, with this approach, billing will occur, irrespective of whether ads have been viewed by a user or not. What you see is what you get There is also a better approach which confirms only those ads which are seen by the user. If an ad is served below the scroll bar and the user leaves the page without scrolling, then the ad will not be confirmed. This approach has confirmation-URLs with every ad served and hence ensures that only those ads which are seen by the user are confirmed. The technical steps given below show how the confirmation-URL is different for each ad served. “Ads”: { “HPMiddle”: { “CampaignId”: 2827, “CreativeId”: 1, “Confirmation-url”: “http://www.adserver.com/d824f82Q2FQ5CQ5CQ5CQ5CQ5CQ5C5Q5C5hTq5qQ7ETQ3FQ5C…“, “Creative”: “content which will be served” “Classification”: “BigAd” “TopAd”: {“campaignId”: 2387, “CreativeId”: 0, “Confirmation-url”: “http://www.adserver.com/d824a21Q2F——R-RrPSRSQ24Po——–RQ24–RS)Po—-PRN-oQ24)”, “creative”: “content which will be served” “classification”: “Leaderboard” } }, Backend Logic for Conformation: When an ad request is made ,ad log file is created/updated with user information like Time;IP;County; Zip code ;Ad name , position, page along with unique 16 digit number mentioned in red below. Sample ad log entry 1409655663^CUNK^C170.149.164.65^Chttps://www.tavant.com^Cnyt2014_textlink_digisub_account_37Y93,,MA3^Cwin7^Cfirefox3^Cna^ CNY^C10018^CUS^CX^C0-9^C0^CUNK^C007f01012dd95405a35a0008^C00^C00^C0000005056ab6ce1^C0^C To summarize, the technical process is as follows: With each ad request, confirmation-URL is called which writes another log file. At the end of an hour, ad log and confirmed log file are processed, and a 16 digit unique number is generated to count the number of impressions of a particular ad. Hourly data is then accumulated to tally the number of impressions per day. This data is inserted into a database through nightly job scripts, to be used for reporting by other applications.
Handling image uploads with AngularJS
When developing web applications, one of the common use cases would be to manage image uploads along with validations for supported formats and sizes. Here, we outline a way to achieve this in AngularJS using a file reader service. File reader module This module is intended for common usage across all screens where there is requirement to read the file. You can include the following code in a file upload.js (function (module) { var fileReader = function ($q, $log) { var onLoad = function(reader, deferred, scope) { return function () { scope.$apply(function () { deferred.resolve(reader.result); }); }; }; var onError = function (reader, deferred, scope) { return function () { scope.$apply(function () { deferred.reject(reader.result); }); }; }; var onProgress = function(reader, scope) { return function (event) { scope.$broadcast(“fileProgress”, { total: event.total, loaded: event.loaded }); }; }; var getReader = function(deferred, scope) { var reader = new FileReader(); reader.onload = onLoad(reader, deferred, scope); reader.onerror = onError(reader, deferred, scope); reader.onprogress = onProgress(reader, scope); return reader; }; var readAsDataURL = function (file, scope) { var deferred = $q.defer(); var reader = getReader(deferred, scope); reader.readAsDataURL(file); return deferred.promise; }; return { readAsDataUrl: readAsDataURL }; }; module.factory(“fileReader”, [“$q”, “$log”, fileReader]); }(angular.module(“App”))); Update the value ‘App’ with the name of your app in the last line of the above code. Image reading and Validation Define a directive called ‘ngFileSelect’ to validate the image for supported formats, size and dimension. App.directive(“ngFileSelect”,function(){ return { link: function($scope,el){ el.on(‘click’,function(){ this.value = ”; }); el.bind(“change”, function(e){ $scope.file = (e.srcElement || e.target).files[0]; var allowed = [“jpeg”, “png”, “gif”, “jpg”]; var found = false; var img; img = new Image(); allowed.forEach(function(extension) { if ($scope.file.type.match(‘image/’+extension)) { found = true; } }); if(!found){ alert(‘file type should be .jpeg, .png, .jpg, .gif’); return; } img.onload = function() { var dimension = $scope.selectedImageOption.split(” “); if(dimension[0] == this.width && dimension[2] == this.height){ allowed.forEach(function(extension) { if ($scope.file.type.match(‘image/’+extension)) { found = true; } }); if(found){ if($scope.file.size <= 1048576){ $scope.getFile(); }else{ alert(‘file size should not be grater then 1 mb.’); } }else{ alert(‘file type should be .jpeg, .png, .jpg, .gif’); } }else{ alert(‘selected image dimension is not equal to size drop down.’); } }; img.src = _URL.createObjectURL($scope.file); }); } }; }); If the image is valid, the directive calls ‘getFile’ function to get the base64 url of the image for preview, as defined below. $scope.getFile = function () { var dimension = $scope.selectedImageOption.split(” “); fileReader.readAsDataUrl($scope.file, $scope) .then(function(result) { $scope.imagePreview = true; $scope.upladButtonDivErrorFlag = false; $(‘#uploadButtonDiv’).css(‘border-color’,’#999′); $scope.imageSrc = result; var data = { “height”: dimension[2], “weight”: dimension[0], “imageBean”: { “imgData”: result, “imgName”: $scope.file.name } } $scope.imagePreviewDataObject = data; }); } Finally, you can bind the directive to your input button, in html, as follows: <span class=”btn btn-default btn-file” ng-class=’class1′> Upload Image <input type=”file” ng-file-select=”onFileSelect($files)” accept=”.jpg,.png,.gif,.jpeg”> </span> PS: File reader module works correctly in all modern browsers. For IE, it was found to support version 11 onwards.