Jump to content
Search Community

Banner calculators for adwords

eekern test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
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.




 
Link to comment
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

Link to comment
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. 

  • Like 2
Link to comment
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.

  • Like 3
Link to comment
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.

See the Pen XpOvzE by eekern (@eekern) on CodePen





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 

  • Like 1
Link to comment
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.

See the Pen XpOvzE by eekern (@eekern) on CodePen

 

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:

See the Pen VPRZra by oliver15years (@oliver15years) on CodePen

 

You have to make every ad size separately.

 

 

  • Like 1
Link to comment
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



 

Link to comment
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>
  • Like 3
Link to comment
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="); }

  • Like 1
Link to comment
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>
  • Like 2
Link to comment
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.

 

 

 

Link to comment
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. :)

  • Like 1
Link to comment
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.
×
×
  • Create New...