Charissa's Technical Blog: 2016

ERROR: You click on the animated banner in chrome preview, and nothing happens.
What it's supposed to do: Open up a new tab with the target page loaded.

Why this error came about:
I converted Sizmek banners into GDN banners and only converted the Generic-Ad codes to DoubleClick, and only added one GWD-exit link.

OR

I didn't follow the tut in my previous post in order, I changed the eb.click to exit ad in Design View then only converted the code in Code View. Hence, the Google Ad>Metric Names do not appear in the code.

But, in order for the tab to work you need to check if your code has:

Note:
You would already have to publish your file from GWD with exit-ad commands set in GWD on your overall tap-layer.

1. Do a quick command+F "https://" and look for the EB.clickthrough script:

<script type="text/javascript" gwd-events="handlers">
window.gwd = window.gwd || {};
gwd.ebClick = function(event) {
EB.clickthrough();
};
gwd.auto_ReplayclicktagAction = function(event) {
// GWD Predefined Function
gwd.actions.timeline.gotoAndPlay('page1', 'frame1');
};
gwd.auto_OverallclicktagAction = function(event) {
// GWD Predefined Function
gwd.actions.gwdGenericad.exit('gwd-ad', 'FunkyGirlBanner','https://linktopage', true,true);
};
</script>

a. Add in a metric name before the link. It could be the name of the file. You're going to use this again at the bottom of the code.

b. Make sure this link tally's to the link your client gives you. This will also be reused at the bottom of the code.

c. Add a ,true before the close.

2. Add this code at the bottom after </gwd-doubleclick>

<gwd-exit metric="FunkyGirlBanner" url="https://linktopage" url="true"></gwd-exit>

Note:
Sometimes you will see this & highlighted in pink in the link if you use Sublime. Make sure to replace all these pink &s with & it will change to a dark purple.

3. Go to the bottom of your code and search for this code and add in the yellow section:

<script data-exports-type="gwd-studio-registration">function StudioExports() {
Enabler.exit("https://linktopage", "true");

}

Basically, you need to add an enabler for the script to happen.

4. Save and open up the index in Chrome or whichever browser you prefer. The clickable tab should be working fine!

Thursday, August 11, 2016

Email Impression Pixel

What exactly is an e-mail impression pixel?

Basically when someone clicks on the said EDM, info on the amount of clicks will be sent to a database where the client can access the information and know, how many times it has been clicked.

Insert this link into the body:
<img src="http://linkgivenbyclientgoeshere" width="1" height="1" />

It's basically a 1px by 1px dot that's on the image.

Sunday, July 24, 2016

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

Download the JS and replace this:

You can download the JS file in the link I posted in ERROR 4 in my April 14th 2016 post.

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

with

<script type="text/javascript" src="./EBLoader.js"></script>

Remember to put the downloaded JS file at the same place where your index.html file is. Same folder.

Monday, July 4, 2016

Google Banners are unclickable

Your file might contain 3D sensing css.

change to:

transform-style: flat;
-webkit-transform-style:flat;
-moz-transform-style:flat;

to make sure your file is reading it in 2D space, not 3D.

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>:

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:

<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

Create a new "Non-Google Ad" file. This will generate the "gwdgenericad_min.js" file.
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.
Open the file in GWD.
Switch to Code View.
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>
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>
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">
Last, search for the following close tag

</gwd-doubleclick>

And replace it with:

</gwd-genericad>
Save and reopen the file.
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.