eekern

Banner calculators for adwords

  • 30 posts in this topic

30 posts in this topic

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

Share this post


Link to post
Share on other sites

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.appspot.com/adwords#/asset and try to understand the nonsense error messages. Because I am sure You will get a few.




 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. 

  • 2 people like this

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • 1 person likes this

Share this post


Link to post
Share on other sites

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.

  • 1 person likes this

Share this post


Link to post
Share on other sites

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.

  • 3 people like this

Share this post


Link to post
Share on other sites

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 

  • 1 person likes this

Share this post


Link to post
Share on other sites

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

 

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/oliver15years/pen/VPRZra

 

You have to make every ad size separately.

 

 

  • 1 person likes this

Share this post


Link to post
Share on other sites

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.

  • 2 people like this

Share this post


Link to post
Share on other sites

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



 

Share this post


Link to post
Share on other sites

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>
  • 3 people like this

Share this post


Link to post
Share on other sites

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="); }

  • 1 person likes this

Share this post


Link to post
Share on other sites

...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>
  • 2 people like this

Share this post


Link to post
Share on other sites

Your pen is not loading TweenMax. Hit that little gear icon on the JS panel and then choose to load TweenMax and any other scripts you need. You also don't need those tags for doctype, html etc... in the HTML panel.

 

Happy tweening.

:)

  • 1 person likes this

Share this post


Link to post
Share on other sites

Your pen is not loading TweenMax. Hit that little gear icon on the JS panel and then choose to load TweenMax and any other scripts you need. You also don't need those tags for doctype, html etc... in the HTML panel.

 

Happy tweening.

:)

 

 

 

 

Thanks, like this ?

 

Skjermbilde%202017-02-16%20kl.%2022.02.0

 

 

 

I still get blank page.

 

 

Man, this is so much harder than I hoped, haha.

 

All I want is a mobile ad for adwords with a timeline and two pictures that overlay each other.

 

 

 

Share this post


Link to post
Share on other sites

You just have one small correction to make:

// doing it this way logo is a variable that hasn't been declared
TweenMax.to(logo, 1.5, { ease: Bounce.easeOut, y: 40 });

// just drop the div id in as the target like this:
TweenMax.to("#logo", 1.5, { ease: Bounce.easeOut, y: 40 });

You're doing fine. Just keep at it. We're here to help. :)

  • 1 person likes this

Share this post


Link to post
Share on other sites

Thank you for great support PointC

I have now added GSAP trough the gear icon and removed all the code my pen don`t need.

Still it is just blank ?!

Please take a look I have no hair left to pull out : http://codepen.io/eekern/pen/XpOvzE

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.