Jump to content
Search Community

Dynamic Ads using GSAP?

soupking 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 GS,

 

This is kind of a roundabout question. It has nothing to do with animation but affects my ability to build animate ads, so I thought I'd ask you guys...

 

Google has all these bundled ad types and one of their advantages is using dynamic data for ads. I personally do not like animate using GWD. I find it primitive, clunky and restraining. I'd much rather use Adobe or GSAP to animate content. 

 

So I have this carousel ad that a client wants and the marketing team is handing me this panorama ad. My perspective is I can build a better ad using Swiper and GSAP, but they want dynamic data. 

 

Is there a relative open-source alternative that I can utilize or introduce as a dynamic data option so I don't have to lean on Google as a creative resource?

 

Thanks for reading.

 

 

 

Link to comment
Share on other sites

As @somnamblst has said you don't need to use GWD for dynamic banners in Studio.

 

The main thing to remember is that when you load your banner, the GSAP timeline should come after the dynamic data has loaded.

 

  Enabler.setProfileId(9999999);
  var devDynamicContent = {};
  
  devDynamicContent.feed = [{}];
  devDynamicContent.feed[0]._id = 0;
  devDynamicContent.feed[0].id = 1;
  devDynamicContent.feed[0].exitUrl = {};
  devDynamicContent.feed[0].exitUrl.Url = 'https://www.example.com/';
  devDynamicContent.feed[0].headline1 = `Creazy Headline`;
  devDynamicContent.feed[0].subline1 = `Some more words`;
  devDynamicContent.feed[0].image1 = {};
  devDynamicContent.feed[0].image1.Type = 'file';
  devDynamicContent.feed[0].image1.Url = `https://s0.2mdn.net/creatives/assets/0000000/image.png`;
  devDynamicContent.feed[0].subline1 = `Buy Greensock Business Green`;

  Enabler.setDevDynamicContent(devDynamicContent);
  
  // Assign copy and images to DOM elements

  let tl = new TimelineMax();

 

As for text-fitting, you can mess around with some Javascript to do the same job. Might not be as quick, and you'd also have the handle the web font loading yourself as well.

 

 

  • Like 1
Link to comment
Share on other sites

I did notice that the Dynamic HTML5 templates that used to be in the template database have been removed. I have the original files from before they removed them. PM me if you would like to see them.

 

You don't have to use GWD, but you need a Rich Media vendor like Google to serve your Dynamic ads. Google Studio has great Live Chat for anything you run into, that is confusing, or not working.

  • Like 1
Link to comment
Share on other sites

On 9/11/2019 at 6:09 PM, joe_midi said:

 

As for text-fitting, you can mess around with some Javascript to do the same job. Might not be as quick, and you'd also have the handle the web font loading yourself as well.

 

 

Joe Midi, the dynamic sheets have columns for everything, so if copy needs to differ from one version to the next, it is the sheet that actually controls it, so there is a data column where you can tweak your copy to fit, and HTML tags do work in the feed.

 

Google also has a bunch of sample feed Excel files, though you really should use Google Sheets.

Link to comment
Share on other sites

1 hour ago, somnamblst said:

I did notice that the Dynamic HTML5 templates that used to be in the template database have been removed. I have the original files from before they removed them. PM me if you would like to see them.

 

You don't have to use GWD, but you need a Rich Media vendor like Google to serve your Dynamic ads. Google Studio has great Live Chat for anything you run into, that is confusing, or not working.

I think the templates are still here if you filter by dynamic: http://richmediagallery.com/create/templates

Link to comment
Share on other sites

  • 3 weeks later...

Hello everyone...

 

I follow the GS a few year...(first time I used it in Adobe Edge, from there to Animate and Hype)

Sad enough the company which use my banners want GWD files...they say that the GWD operates better..

So, for me as a creative I set my eye on GWD..

 

Is there anyone who has a basic GWD file with a little bit GS init...os i can see how GS must be used in GWD, I saw the reaction of Joe_midi that isn't just put the code in..

 

I hope that I'm clear...I'm more visual then coder, but I like the way GS works

Link to comment
Share on other sites

11 hours ago, cartimundi said:

Sad enough the company which use my banners want GWD files...they say that the GWD operates better.

That's curious. @cartimundi Do you know what their reasoning was specifically? Is it mostly that they only want to deal with a visual editor and avoid any code? Obviously I think there are a ton of things you can do easily in GSAP that'd be virtually impossible in GWD. If there's anything we can do better with our tools, of course, we'd love to hear. 

Link to comment
Share on other sites

12 hours ago, cartimundi said:

Hello everyone...

 

I follow the GS a few year...(first time I used it in Adobe Edge, from there to Animate and Hype)

Sad enough the company which use my banners want GWD files...they say that the GWD operates better..

So, for me as a creative I set my eye on GWD..

 

Is there anyone who has a basic GWD file with a little bit GS init...os i can see how GS must be used in GWD, I saw the reaction of Joe_midi that isn't just put the code in..

 

I hope that I'm clear...I'm more visual then coder, but I like the way GS works

It really is as simple as including a link to TweenMax and then starting your animation after the ad initializes (the animation code does not need to be any different than usual for GWD).

 

Here's a step by step article on Medium: https://medium.com/@alexcleary/google-web-designer-and-greensock-c11473130184

 

To keep things cleaner, you can also keep your animation in an external JS file.

  • Like 1
Link to comment
Share on other sites

10 hours ago, GreenSock said:

That's curious. @cartimundi Do you know what their reasoning was specifically? Is it mostly that they only want to deal with a visual editor and avoid any code? Obviously I think there are a ton of things you can do easily in GSAP that'd be virtually impossible in GWD. If there's anything we can do better with our tools, of course, we'd love to hear. 

 

Doesn't have to do with AMP....I ain't a coder, but try to find my way to a smooth banner, like I did with GSAP..

( i've reed something about it, and that is was introduced before the summer, same time my older banner weren't succeed)

 

Before I made them with Hype Tumult (which I loved) to banners were way beter, smoother than with GWD, but they say that it didn't count(?) the way a Google display ad build his history to serve out.. Beside that the ads are dynamic so the images and prices are feed by a database.

 

I didn't saw any info, just the words...maybe because they all work with windows...and hype is a osx program.

 

I'm gonna copy the ad build with gwd and change the transitions for gap code, and hope it works, with the same count or whatever.

 

See also the zip I attach...

maybe someone can help me, put the gsap code in it?

 

gwd_preview_300x250.zip

Link to comment
Share on other sites

I think a lot of companies are being pressured into using GWD as they’re not present with any other option. (Which is entirely untrue!)

 

Whether it’s budget constraints or people-availability, it’s easier to get a designer trained on GWD than it is to get a front-end developer to build a few banners. 

 

Side-note: I might be given the green(sock)-light to open source one of my dynamic banner projects! 

 

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

Hello...again

 

I'm trying to translate a gwd banner into a gwd banner with gsap...this works, but only for the picture (gwd-image) I can do animation.

There a some database input for text, this area has the format "span" but this aint animate

 

I made the ID for the gwd-image unique...which I also did for the text (span) but this doesn't change/control/affect the banner..

 

Isn't possible or do I something wrong?

 

I'd like to do al the chances in the banner by gsap (code)

hope anybody can help me

 

 

Link to comment
Share on other sites

it's very difficult to troubleshoot blind - can you provide a reduced test case that shows the issue? This sounds more like a GWD question than a GSAP one. If you're trying to animate transforms on a <span> element, that might be the issue because some browsers will not allow that. You can try setting display:inline-block on them in the CSS. But again, the only way we can help you effectively is if you show us the "broken" version in the browser (not a screen shot - I mean the actual ad in code form, viewable in the browser).

Link to comment
Share on other sites

No no, we need to see it in the browser, not just the 1000+ lines of code. 

 

I glanced at your file and I only see GSAP code that's animating image elements - where's the code that's trying to animate <span> elements? If you still want help, please send us a URL where we can see the [broken] version running in the browser where you're trying to animate the <span> elements (or whatever the problem is). The more reduced you can make the test case, the better your chances of getting an answer. Thanks! 

Link to comment
Share on other sites

I did not use GWD for Dynamic but what I did learn is that the feed controls almost everything. FYI Studio provides live chat, and they actually are more into GWD Dynamic than they are into custom HTML Dynamic. You need to set up your Dynamic campaign in Studio and transform your feed so you can get the local dev code. 

 

Edited to add, you definitely use HTML tags in your feed columns that are for copy. 

 

When you transform your feed, you then choose whether you want GWD or custom HTML output

 

Also you will not see things the way they are intended under Creative preview in Studio. Only under Dynamic preview do you see the values being pulled from the feed. If you have multiple sizes in your feed, you must filter for the correct size.

 

I actually used Animate CC for animation, and just made Animate publish templates that used the Studio CSS and JS. After I transform my feed, the generated code looks something like this. In this example logos, background images and subline are dynamic based on Metro Codes.


 

/ NOTE: Here starts the pasted section from Studio.



  Enabler.setProfileId(******);
    var devDynamicContent = {};

    devDynamicContent.****_8sizes_subline_Sheet1 = [{}];
    devDynamicContent.****_8sizes_subline_Sheet1[0]._id = 0;
    devDynamicContent.****_8sizes_subline_Sheet1[0].uniqueid = 10;
    devDynamicContent.****_8sizes_subline_Sheet1[0].Reporting_Label = "***_300x250";
    devDynamicContent.****_8sizes_subline_Sheet1[0].isActive = true;
    devDynamicContent.****_8sizes_subline_Sheet1[0].isDefault = false;
    devDynamicContent.****_8sizes_subline_Sheet1[0].geo_location_name = "";
    devDynamicContent.****_8sizes_subline_Sheet1[0].logo = {};
    devDynamicContent.*****_8sizes_subline_Sheet1[0].logo.Url = "https://s0.2mdn.net/creatives/assets/*******/***_300x250.png";
      devDynamicContent.****_8sizes_subline_Sheet1[0].background = {};
    devDynamicContent.****_8sizes_subline_Sheet1[0].background-image.Url = "BG_300x250_v1.jpg";
    devDynamicContent.****_8sizes_subline_Sheet1[0].Exit_URL = {};
    devDynamicContent.****_8sizes_subline_Sheet1[0].Exit_URL.Url = "https://someURL.com";
    devDynamicContent.****_8sizes_subline_Sheet1[0].subline = "Free 1 Hour Shipping!";
    
     devDynamicContent.****_8sizes_subline_Sheet1[0].cta = "Shop Now";
    Enabler.setDevDynamicContent(devDynamicContent);


 

  • Like 1
Link to comment
Share on other sites

On 10/23/2019 at 4:51 PM, GreenSock said:

No no, we need to see it in the browser, not just the 1000+ lines of code. 

 

I glanced at your file and I only see GSAP code that's animating image elements - where's the code that's trying to animate <span> elements? If you still want help, please send us a URL where we can see the [broken] version running in the browser where you're trying to animate the <span> elements (or whatever the problem is). The more reduced you can make the test case, the better your chances of getting an answer. Thanks! 

I published it now, in a zip...its that enough?

https://we.tl/t-xApbIa2HaK

 

I didn't animate the <span> because it didn't work

the gsap with the images worked...and I did the same for the <span> without result

 

as you can see...I'm still a newbie trying to get into the code world ;-)

 

Link to comment
Share on other sites

On 10/23/2019 at 5:11 PM, somnamblst said:

I did not use GWD for Dynamic but what I did learn is that the feed controls almost everything. FYI Studio provides live chat, and they actually are more into GWD Dynamic than they are into custom HTML Dynamic. You need to set up your Dynamic campaign in Studio and transform your feed so you can get the local dev code. 

 

Edited to add, you definitely use HTML tags in your feed columns that are for copy. 

 

When you transform your feed, you then choose whether you want GWD or custom HTML output

 

Also you will not see things the way they are intended under Creative preview in Studio. Only under Dynamic preview do you see the values being pulled from the feed. If you have multiple sizes in your feed, you must filter for the correct size.

 

I actually used Animate CC for animation, and just made Animate publish templates that used the Studio CSS and JS. After I transform my feed, the generated code looks something like this. In this example logos, background images and subline are dynamic based on Metro Codes.


 


/ NOTE: Here starts the pasted section from Studio.



  Enabler.setProfileId(******);
    var devDynamicContent = {};

    devDynamicContent.****_8sizes_subline_Sheet1 = [{}];
    devDynamicContent.****_8sizes_subline_Sheet1[0]._id = 0;
    devDynamicContent.****_8sizes_subline_Sheet1[0].uniqueid = 10;
    devDynamicContent.****_8sizes_subline_Sheet1[0].Reporting_Label = "***_300x250";
    devDynamicContent.****_8sizes_subline_Sheet1[0].isActive = true;
    devDynamicContent.****_8sizes_subline_Sheet1[0].isDefault = false;
    devDynamicContent.****_8sizes_subline_Sheet1[0].geo_location_name = "";
    devDynamicContent.****_8sizes_subline_Sheet1[0].logo = {};
    devDynamicContent.*****_8sizes_subline_Sheet1[0].logo.Url = "https://s0.2mdn.net/creatives/assets/*******/***_300x250.png";
      devDynamicContent.****_8sizes_subline_Sheet1[0].background = {};
    devDynamicContent.****_8sizes_subline_Sheet1[0].background-image.Url = "BG_300x250_v1.jpg";
    devDynamicContent.****_8sizes_subline_Sheet1[0].Exit_URL = {};
    devDynamicContent.****_8sizes_subline_Sheet1[0].Exit_URL.Url = "https://someURL.com";
    devDynamicContent.****_8sizes_subline_Sheet1[0].subline = "Free 1 Hour Shipping!";
    
     devDynamicContent.****_8sizes_subline_Sheet1[0].cta = "Shop Now";
    Enabler.setDevDynamicContent(devDynamicContent);


 

Sorry somnamblst.

 

I didn't get everything ( as a newbie)

 

what I understand is that the "google" studio got a good chat to help me.

that's nice and will be helpful..which I will try next week..the partner of the company is on holiday

 

the company which made these banners did everything in gwd,

me as a designer want to have more tools to make the banners nicer, better, smoother with also the possibility to change the ads frequenter.

 

Thats why I want to change all the animations with gsap instead of animation in the timeline.

 

I don't understand this (sorry, is my failure..)

Edited to add, you definitely use HTML tags in your feed columns that are for copy. 

 

GSAP in the gwd banner works in the preview of gwd.

I don't know if its works when we export it to google studio..(I hope)

 

the text in the banners are feed by a database, that's why I think it works with <span>

this feed must be kept, otherwise we have to much work every week, every week the offers changing..

 

the images I can animate by gsap

but when I use the same gsap animation for the <span> it won't work

 

Thanks everyone which are helping me..

I'm trying to get into the gsap world...( I had it work on Adobe animatie...after that in Tumult Hype (all without feed)

...but now we are over to gwd with feed and I'm hoping it will work...this would be a game changer for me and the work

I Believe it would work...

 

 

 

 

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