Sunday, July 3, 2016

GWD Environments

SIZMEK: Non-Google Ads
Add in the three set of codes in previous posts. Eb Clicks.

GDN: Adwords
In these banners, you don't need to input in extra codes for tracking in the HTML after publishing. You just need to add an event>google ad>Exit>URL.

Thursday, April 14, 2016

SIZMEK GWD ERRORS

Uploading your banners into Sizmek gets annoying because GWD is a beta program with lots of bugs. To minimise errors, make sure:

• The ZIPPED Published folder has to be under 200kb


A backup image is there.

• ONLY index.html and pngs are supposed to be in the published folder. No scripts of any kind should be in it.


ERROR 1:
To include of the adkit.js or EBLoader.js is missing in the root HTML file.

If you come across this error, you may have not:

1. Put in a custom eBclick property on top of the overallTapArea into your GWD working file.

The overallTapArea is a Component>Taparea that fills the entire artboard, and its layer placed underneath the replayButtonTapArea layer.


EB.clickthrough();

To add this click,

Go to Event>
Select the OverallTapArea>
Tap Area>
Touch/Click>
Custom>
Add Custom Action>
Type ebClick into the upper fill>
Copy EB.clickthrough(); into the lower fill>

Save.

2. Open up the index.html file in Dreamweaver or Sublime or notepad, whatever platform you like best, and check to see if:

This script>
 <script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/EBLoader.js"></script>

is below this line of code>

<meta name="environment" content="gwd-adwords">

If it's not, add it in. This script is external. If your agency asks you to add in a local JS, use this script instead and download the JS in Here at ERROR 4. 
<script type="text/javascript" src="./EBLoader.js"></script>

3. Check to see if this code is present BEFORE the </head>:

  <script type="text/javascript">
    function initEB() {
      if (!EB.isInitialized()) {
        EB.addEventListener(EBG.EventName.EB_INITIALIZED, startAd);
      } else {
        startAd();
      }
    }

    function startAd() {
      document.getElementById("banner").style.visibility = "visible";
    function overall_clicktag(){
        EB.clickthrough();

    }
    }
  </script>

If it's not, add it in. Overall_clicktag is like the instance name of the overall Tap Area you put in GWD. Change it to your liking.

4. Make sure:

<body>

is replaced with:

<body onload="initEB();">
  <div id="banner" onclick="javascript:handleBannerClick();"> 


5. Add a 1px border when you publish:
Here's the grey border HEX code. And make sure you saved the backup image too. 

Hex: #666666

ERROR 2:

You must have at least a Double-Click environment or a ClickTag.



Basically you have an environment that isn't DoubleClick. For our case, our environment was at Non-Google Ad, convert it to a DoubleClick environment. My previous post has the tut.

ERROR 3:
File not supported in Sizmek.

One of your files are corrupted. Majority of the times it may be one of the images/pngs you saved. Find the corrupted image file and re-save it. Sometimes it may be the background or copy. If you saved your image as a png, and renamed it to a jpg, it will also cause an error. So, re-saving the image should be able to fix the problem.

ERROR 4:
Banner not clickable.
If your banner requires you to insert a local EBloader JS file, put the script it at the bottom. If you don't have the the file, download it Here and put it where your index.html is.




Google Web Design Conversions

Converting ad-Words/DoubleClick to Non-Google Ad and the other way round.


First and foremost, AdWords and DoubleClick are the same. No one seems to say it anywhere.
Found the answer on Stackoverflow, but there are a few things I'd still like to ad. Haha. Puns.

Adwords/DoubleClick Ads To Non-Google Ad Environment Conversion
  1. Create a new "Non-Google Ad" file. This will generate the "gwdgenericad_min.js" file.
  2. Copy the "gwdgenericad_min.js" from the New folder you just created to the existing project folder of your GWD source html file that you want to convert.
  3. Open the file in GWD.
  4. Switch to Code View.
  5. Find the following line and remove it:
    <script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
  6. Search for the following lines in the code:

    THIS. I'd like to Ad. You might not get to find the this line of code in the Code View of GWD if you copied and paste the entire line below. Look for the script instead, because you might have a different data version. data-version="1" in this tutorial is bound to change. In my case, it was data-version="8".
    <script data-source="gwddoubleclick_min.js" data-version="1.8" data-exports-type="gwd-doubleclick" type="text/javascript" src="gwddoubleclick_min.js"></script>
    Replace with the following line:
    <script data-source="gwdgenericad_min.js" data-version="1" data-exports-type="gwd-genericad" type="text/javascript" src="gwdgenericad_min.js"></script>
  7. Find the following tag under <body> tag:

    THIS. Is Confusing. Let me un-confuse you. Find this chunk and delete it.
    <gwd-doubleclick id="gwd-ad" polite-load=""> <gwd-metric-configuration> THERE'S A FEW LINES OF CODE IN BETWEEN THESE TWO TAGS. </gwd-metric-configuration>
    And replace that entire chunk with this one line:
    <gwd-genericad id="gwd-ad">
  8. Last, search for the following close tag
    </gwd-doubleclick>
    And replace it with:
    </gwd-genericad>
  9. Save and reopen the file. 
  10. Publish the file locally and add a 1px #666666 border.
Here's another Sizmek link that might help.




Non-Google Ad Environment To Adwords/DoubleClick Ads  Conversion
    1. Create a new Adwords ad file. This will generate the " gwddoubleclick_min.js" file.

    1. Copy the gwddoubleclick_min.js from the New folder you just created  to  the  existing project folder . This is a required file for DoubleClick ad.

    1. Open the file in GWD.

    1. Switch to Code View.

    1. Search for the following lines in the code:

    1. <script data-source="gwdgenericad_min.js" data-version="1" data-exports-type="gwd-genericad" type="text/javascript" src="gwdgenericad_min.js"></script>

    Replace with the following line:

    <script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
    <script data-source="gwddoubleclick_min.js" data-version="1.8" data-exports-type="gwd-doubleclick" type="text/javascript" src="gwddoubleclick_min.js"></script>

    1. Then, search for the following open tag:

    <gwd-genericad id="gwd-ad">

    Replace with the following line:

    <gwd-doubleclick id="gwd-ad" polite-load="">
        <gwd-metric-configuration></gwd-metric-configuration>

    1.  Last, search for the following  close tag :

    </gwd-genericad>

    And replace  it with:

    </gwd-doubleclick>

    1.  Go back to Design view.
    2. Convert your Overall_clicktag Tap Area from eb.Click to GoogleAd>Exit Ad> And type in a metric name, the name of your file is prefered for example: '160x600_FileA'> And copy and paste the link your agency gives you into the URL box under the Mertric Name. *Note* The Google Ad option will only appear after completing steps 6 to 8. A metric name is basically like an instance name, something for the program to recognise for it to execute the action of opening the link.
    3. Save and preview the file. Click the banner and make sure it opens up a new tab with the link intended.
    4. Publish the file locally and select Polite Load. Add a 1px grey border too, #666666. *Note* Polite Load basically means that the banner would allow the rest of the home page load first, only loading itself. How gentlemanly.
    5. Got the tut from Here.

Sunday, December 6, 2015

Sprite Sheet generators

Found these two sprite sheet generators which are really cool.

http://www.piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgIDI5oTOCAw/edit

There's even onion skin so that you can animate your stuff pixel by pixel. Gonna try it out with a gif.


ww.leshylabs.com/apps/sstool/

This ones pretty cool too. But I had to rename the entire PNG sequence because this online generator reads it numerically from 0-end. Yeah I took a green screen video, Key Lighted it to remove the green screen and rendered 2 secs of it out into RGB+Alpha format so the transparency is still there. 2.09 secs of the video gave me about 57 Pngs.



Here's a fiddle.
https://jsfiddle.net/simurai/CGmCe/

Wednesday, November 11, 2015

Bootstrap

A really useful link I found.

https://getbootstrap.com/components/#navbar

Thursday, October 22, 2015

Cool parallax mouse over

My website
http://toa.edu.my/showcase/degree/interactive-media/assets/images/im9/root/index.html

The Script
http://codepen.io/yvesvanbroekhoven/pen/igtmy

Wednesday, October 7, 2015

Wooband wifi

I had my dad help me replace the batteries and the jammed up liPower (I can't sew, I fail as a woman) with some conductive thread and hook up my wifi xbees which SEEMED to be working fine when I tested them out with alligator clips (which are Jam's which I have yet to return to him).

HOWEVER,

When everything is sewed up, the rgb gets jammed at light blue. Tested it with Unity and found out the wiring must have messed up the connections to my accelerometer chip.

Here are some pics. I'm just too...lazy to troubleshoot. So I'm just gonna show whatever I have at TOA tmr while I fix this problem one day in the future.