Jump to content

Codepen Notification

You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

Banner calculators for adwords

Started by eekern, Feb 11 2017 08:01 AM calculators - - - - -

25 replies to this topic
eekern

Post #1 by eekern , 11 February 2017 - 08:01 AM

Hi, this is my first post so maybe I missed a thread about this but after little search I decided to create a topic.

I REALLY want to create a adwords ad with calculators, I have seen this it the fatloss space, the credit card space and want to make it for my PPC agency.

Is it some guides somewhere I can follow, some examples?


Thanks alot,
eekern


  • Back to top

Oliver16Years

Post #2 by Oliver16Years , 11 February 2017 - 11:12 AM

I am not sure what is calculators but if You want to make an adWords ad

 

You have to Load GSAP from CDN:

<script src = 'https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js' ></script>\r\n"
 
You must add this script to your html:
<script src = 'https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js' ></script>\r\n
 
Your have to include click area like this:
<div id = clickTag onclick = 'window.open(ExitApi.exit());' ></div>
 
You can Inline your assets:
You must compress the ad's folder into a maximum 150k .zip.
 
You have to stop all animations within 30sec.
 
After all this crazy stuff, check the .zip with https://h5validator..../adwords#/asset and try to understand the nonsense error messages. Because I am sure You will get a few.




 

www.bannerhost.hu (2012)

  • Back to top

ohem
  • ohem
  • 242 Likes (Specialist)
  • 312 posts

Post #3 by ohem , 11 February 2017 - 03:11 PM

Like, an actual functional calculator?  You can Google "Javascript calculator" or check Codepen for examples: http://codepen.io/se...&type=type-pens


  • Back to top

eekern

Post #4 by eekern , 11 February 2017 - 06:50 PM

Ok I forgot to mention that I am a total noob. I only understand HTML and CSS

Can I use js in adwords ?


Thanks a lot


  • Back to top

eekern

Post #5 by eekern , 11 February 2017 - 06:51 PM

The more correct term is "ROI calculators"

Example, drag a stick of "how much do you want to spend on ads" and see the number of profit go up.


  • Back to top

Oliver16Years

Post #6 by Oliver16Years , 12 February 2017 - 05:52 AM

That's gonna be a GSAP draggable with a draggable part over the clickArea.

https://greensock.co...Drag/Draggable/


www.bannerhost.hu (2012)

  • Back to top

eekern

Post #7 by eekern , 13 February 2017 - 10:18 AM

Got it, thanks.

Sorry to ask simple questions but I have read a lot of threads and wonder if:

 

  • flash + GSAP the most preferred way to create adwords dsplay ads?
     
  • I also wonder if I can make a opt in (ask for mail or phone number) inside display ads ?




Thanks


  • Back to top

Oliver16Years

Post #8 by Oliver16Years , 13 February 2017 - 09:02 PM

Got it, thanks.

Sorry to ask simple questions but I have read a lot of threads and wonder if:

 

  • flash + GSAP the most preferred way to create adwords dsplay ads?
     
  • I also wonder if I can make a opt in (ask for mail or phone number) inside display ads ?

Thanks

 

You can make adWords ads in Flanimate, Edge, with handcoding. I cannot recommend GWD beacause You will get insane very quickly. You have to pass their validator which isn't an easy task. It is so dumb, You can't imagine. It's tries to disassemble Your code and put it back together and alarming on valid, unrecognized solutions. Even if Your ad passed the validator, it can fail if You upload it to adWords campaign manager. One advice: don't use SVG in adWords ads until You have a proper hack for it. ( PM me if You need it )
I remember when we fooled the validator with a simple <script> tag injector which allowed us to use any CDN link. :D

 According the user input: best if You spend a half day reading their Faqs. I never did anything like that before. 


www.bannerhost.hu (2012)

  • Back to top

eekern

Post #9 by eekern , 13 February 2017 - 10:36 PM

Thanks for quick reply, I will invest in Edge then.

Isn't it ironic that the google ad program sucks for making google ads :shock: ? 


  • Back to top

ohem
  • ohem
  • 242 Likes (Specialist)
  • 312 posts

Post #10 by ohem , 13 February 2017 - 11:54 PM

Edge is no longer being developed by Adobe.  If you're just starting out, it would be best not to invest time learning an outdated program.


  • Back to top

Oliver16Years

Post #11 by Oliver16Years , 14 February 2017 - 05:36 AM

Edge is no longer being developed by Adobe.  If you're just starting out, it would be best not to invest time learning an outdated program.

Edge is exists and working and can make HTML ads, but You are right: it's is abandonware, Adobe Animate is a much better choice.


www.bannerhost.hu (2012)

  • Back to top

joe_midi

Post #12 by joe_midi , 14 February 2017 - 09:56 AM

I recommend trying to create some simple banners with straight HTML/CSS/JS.

 

It really helps to learn the fundamentals of how the DOM works and how each part interacts with each other as that would give you a better understanding of how you should go about building something.


Checkout my Github for some banner templates that use GSAP.

STOP! It's (Duncan) BannerTime !

  • Back to top

eekern

Post #13 by eekern , 14 February 2017 - 08:27 PM

Thanks Joe_midi I decided to listen to you and try some codepens, and I hit a problem right away, how do I "activate" the gsap ?


This is my pen, I am sure you can see the error right away.
http://codepen.io/eekern/pen/XpOvzE



My question now is:

Is it a way I can "code" the ad to fit all adwords sizes ?




My goal is ti make a slider and have before/after pictures changing when a visitor drag the slider :)





Thanks 


  • Back to top

Oliver16Years

Post #14 by Oliver16Years , 14 February 2017 - 09:12 PM

Thanks Joe_midi I decided to listen to you and try some codepens, and I hit a problem right away, how do I "activate" the gsap ?


This is my pen, I am sure you can see the error right away.
http://codepen.io/ee...pOvzE<br><br> I found out that what I wanted was "slider" not "calculator" so I think my ad goal is maybe even easier than what i first anticipated.

My question now is:

Is it a way I can "code" the ad to fit all adwords sizes ?




Thanks 

 

In a banner ad, we can access the elements via id because it is running in separate namespace of an iFrame. We must put the color value into quotes:

http://codepen.io/ol...ears/pen/VPRZra

You have to make every ad size separately.

 


www.bannerhost.hu (2012)

  • Back to top

Web Dizajner

Post #15 by Web Dizajner , 14 February 2017 - 09:14 PM

Is it a way I can "code" the ad to fit all adwords sizes ?

 

It is impossible or better to say it is almost impossible. It is possible with percentage values and float property.


  • Back to top

eekern

Post #16 by eekern , 15 February 2017 - 06:52 AM

got it, thank you so much.

Now that gsap is activated and I can start play around with it, do I have to enter the size somewhere or will it auto fit?

Let`ts say I will only use mobile ads first: 300 x 250, 320 x 480, and 480 x 320



 


  • Back to top

Web Dizajner

Post #17 by Web Dizajner , 15 February 2017 - 09:10 AM

Let`ts say I will only use mobile ads first: 300 x 250, 320 x 480, and 480 x 320



 

You can start with HTML with CSS like this for e.g. 300x250 banner

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Banner</title>
<meta name="ad.size" content="width=300,height=250">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<!-- layout -->
<style>
body {
  margin:0px;
}
#stage {
  position: absolute;
  width: 300px;
  height: 250px;
  left: 0;
  top: 0;
  border: 1px solid black;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}
</style>

<!-- animation -->
<script>
    window.onload = function() {
}
</script>

</head>
<body>
<div id="stage"></div>
</body>
</html>


Oliver16Years

Post #18 by Oliver16Years , 15 February 2017 - 09:20 AM

got it, thank you so much.

Now that gsap is activated and I can start play around with it, do I have to enter the size somewhere or will it auto fit?

Let`ts say I will only use mobile ads first: 300 x 250, 320 x 480, and 480 x 320



 

 

The ad will be loaded into the iFrame at the x:0, y:0 coordinates. Everything will be cropped at the frame's far borders I think, but best if You crop your ad with overflow: hidden.

adWords requires a line in the <head> which is telling him the dimensions of Your ad:

<meta name = 'ad.size' content = 'width=300,height=250' >

I am using a main container <div> called 'Stage' with this style:

#Stage { width: 300px; height: 350px; position: absolute; overflow: hidden; cursor: pointer; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTYnIGhlaWdodD0nMTYnIHZpZXdCb3g9JzAgMCAxNiAxNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyA+PHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzE2JyBoZWlnaHQ9JzE2JyBmaWxsPScjNjY2Jy8+PHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzgnIGhlaWdodD0nOCcgZmlsbD0nIzk5OScvPjxyZWN0IHg9JzgnIHk9JzgnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyM5OTknLz48L3N2Zz4="); }


www.bannerhost.hu (2012)

  • Back to top

Web Dizajner

Post #19 by Web Dizajner , 15 February 2017 - 09:44 AM

...and then you can start to create banner adding more div, css and animation:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Banner</title>
<meta name="ad.size" content="width=300,height=250">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<!-- layout -->
<style>
body {
  margin:0px;
}
#stage {
  position: absolute;
  width: 300px;
  height: 250px;
  left: 0;
  top: 0;
  border: 1px solid black;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}
#rectangle {
  position: absolute;
  visibility: hidden;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 75px;
  background: red;
  z-index: 1;
}
</style>
 
<!-- animation -->
<script>
    window.onload = function() {
 
    tl = new TimelineMax();
 
    tl.from(rectangle, 1, {autoAlpha:0, x:"-=300", ease:Back.easeOut}); 
}
</script>
 
</head>
<body>
<div id="stage">
  <div id="rectangle"></div>
</div>
</body>
</html>

  • Back to top

Web Dizajner

Post #20 by Web Dizajner , 15 February 2017 - 09:46 AM

You can now zip that last html and check it in https://h5validator....pot.com/adwords


  • Back to top




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

3rd Party Advertisement