1 2 Previous Next 46 Replies Latest reply on Nov 22, 2016 5:24 AM by rosebudd Branched to a new discussion.

    Edge web banner and clicktag

    BMBusstra

      Hello.

       

      Is it posible to place a Edge Animation on a website, just like you can do with a flash web banner?

      What files do I have to send to the website-owner?

      How do I save my Edge Animation so that I have the files I nead?

       

      And can I ad a clicktag to the Edge animation so that it is trackable?

        • 1. Re: Edge web banner and clicktag
          TimJaramillo Level 4

          Hi there, to place an Edge Animation on a pre-existing webpage, you can follow the steps below (taken from this DreamWeaver thread: http://forums.adobe.com/thread/1120897). Here is another post that has relevant info: http://forums.adobe.com/message/4819947

           

          To add a clicktag to the Edge Animate composition, you should be able to attach your JS clickTag code to the Stage.click event.

           

          1. Publish from Edge Animate. (This creates the necessary files to run the animation. Also, the code referenced in Step 2 and 3 below will be included in the .html file that Animate creates inside the publish/web folder, which you can just copy/paste.)

          2. Add a <div> to the page that has the ID of Stage and the correct class name for your stage (i.e. the "Composition ID" for your project in Animate).
            For example: 
            <div id="Stage" class="EDGE-1655086"></div>

          3. Include the Preload.js file and the default style in your page's header, within Edge Runtime HTML comments.
            For example: 
            <!--Adobe Edge Runtime-->
            <script type="text/javascript" charset="utf-8" src="test-1655086_edgePreload.js"></script>
            <style>
            .edgeLoad-EDGE-1655086 { display:none; }
            </style>
            <!--Adobe Edge Runtime End-->

          4. Make sure to upload all of the include files to your server in the appropriate relative locations. This includes the xxx_edge.js files, xxx_edgeActions.js file, xxx_edgePreload.js file, the edge_includes folder and its contents, any other files/folders created inside the "publish/web" folder when you publish from Edge Animate (e.g. "images" folder, etc.).
          • 2. Re: Edge web banner and clicktag
            dhosford Employee Moderator

            Hi there,

             

              Yes you can easily add an Edge Animate file into a website, after you publish it using the Publish Settings in Edge Animate. You can import to existing HTML easily with Dreamweaver CS6, just click in your div where you want the edge animate project to be and choose:

             

            Insert > Media > Edge Animate Composition

             

              Keep in mind that in Edge Animate you'll have to export for web and devices and use the .oam file that it creates for you.

             

              You need to include all of the Edge Animate files on your server in order for the animate project to appear on your website. I would suggest making a separate folder inside your root directory for your website called "Edge Animate" and simply upload the whole folder so it stays neat and tidy. :)

             

              You can read about Edge Animate and Analytics here:

            http://blogs.adobe.com/edge/2012/06/29/would-you-like-some-statistics-with-that/

             

            I hope this helps! Let me know if you need further clarification!!

            • 3. Re: Edge web banner and clicktag
              dhosford Employee Moderator

              Hi there,

               

                I just wanted to circle back on this thread and provide screenshots to be more helpful. Tim's answer is absolutely correct as well, but I am going to elaborate with using the Dreamweaver CS6 import method:

               

                In Edge Animate, you will need to set up your project to be published for use in Dreamweaver. Go to File > Publish Settings, and click on Animate Deployment Package. This will create the necessary .oam file that Dreamweaver needs to insert your Edge Animate project.

               

              filePublish.png

               

              settings.png

               

              After, click "Save", and then choose File > Publish to publish the .oam file. After you click "Publish", Edge Animate will generate the files in the same location in which you saved your Edge Animate project.

               

              publish.png

               

              Now open up Dreamweaver. If you already have a <div> or predetermined area in which you'd like to place your Edge Animate banner, click inside of the area or <div></div>.

               

              From the Menu bar at the top, choose Insert > Media > Edge Animate Composition. Then, navigate to your Edge Animate project folder, and choose the "publish" folder, and then the "animate package" folder. Select your Edge Animate project's .oam file and click Insert.

               

              media.png

               

              animatePackage.png

               

              And that's it! Your Edge Animate project will be added into existing HTML simply by using Dreamweaver. Once again, Tim's answer is also absolutely correct and will produce the same results, I just wanted to highlight this feature in Dreamweaver CS6 in case anyone in the community needed this information as reference. : )

              • 4. Re: Edge web banner and clicktag
                Toosey Corr Alot

                Hi There,

                 

                I know you say

                 

                'To add a clicktag to the Edge Animate composition, you should be able to attach your JS clickTag code to the Stage.click event.'

                 

                but can you tell me how to actually do that as I have never done this before and am having great difficulty in figuring it out.

                 

                With Regards

                 

                Gerard

                • 5. Re: Edge web banner and clicktag
                  TimJaramillo Level 4

                  Hi Gerard,

                   

                  1) Add a click event to the Stage. This will make the whole stage clickable. You could alternately create an invisible symbol on top of your content, and add the click event to that symbol.

                   

                  2) Add the below line of code to that click event (assuming your click tag function is called "clickTAG"):

                  window.clickTAG();

                   

                  Basically, "window" takes us back to the html page in terms of scope. So this allows us to call the "clickTAG" js function in the head of that html page.

                  • 6. Re: Edge web banner and clicktag
                    Toosey Corr Alot Level 1

                    Sorry to dumb this down but I don't wan't to miss anything. If this was a flash ad I would put the following (with the function called clickTAG as you said). Oh and this entire ad is within an iframe tag if that makes a difference.

                     

                    on (release) {

                    if (_root.clickTAG.substr(0,5) == "http:") {

                    getURL(_root.clickTAG, "_blank");

                    }

                    }

                     

                    So what I am going to do is add the following to the head of my html to create an event;

                     

                          <script type="text/javascript">

                            $(document).ready(function(){

                                $("#Stage").click(function(){

                                    window.clickTAG();

                                });

                            });

                        </script>

                     

                    Is that right, and here is the stupid question, where does the www.mysite.com link go? With the code above I am getting two errors saying

                     

                    Uncaught ReferenceError: $ is not defined

                     

                    Thanks so much for your help.

                    • 7. Re: Edge web banner and clicktag
                      TimJaramillo Level 4

                      Hi there, below is an example. Personally, I would put the call to window.clickTAG(); inside of Edge.

                       

                      You are getting those errors because you are probably not importing the jQuery library. Edge uses jQuery, so you can import that version to the page: edge_includes/jquery-1.7.1.min.js

                       

                      Usually the site's vendor sets up the clickTAG function, but you can see a psuedo example set up in the html page of this example.

                       

                      Example:

                      http://www.timjaramillo.com/code/edge/clickTag/index.html

                       

                      Source:

                      http://www.timjaramillo.com/code/edge/_source/clickTag.zip

                      • 8. Re: Edge web banner and clicktag
                        Toosey Corr Alot Level 1

                        Ahhh I get it now. Where I was falling down was inserting a trigger and not an action which meant I was not even seeing the click option which was confusing me no end.

                         

                        Looking at your file really helped and once I did it a few times it made sense but just to be clear this is how I see it now. I will say it it simple terms, mainly because I am simple but also so any Edge newbies coming after me can also get it..

                         

                        1. As you initially said, attach your JS clickTag code to the Stage.click event. In this case we are using... window.clickTAG(); assuming that the function calling the clickTAG is called clickTAG and not CLICKtag or some other variation.

                         

                        2. To test if this is working or not I put in a function that the clickTAG event calls into play. I manually entered this function with some script in the .html file using a text editor. This test script went into the <head> and after the <!--Adobe Edge Runtime End--> comment. The following is what I entered;

                         

                            <script type="text/javascript" charset="utf-8">

                                  // called by Stage.click function in Edge

                                  function clickTAG(){

                                            window.location.href = "http://www.adobe.com";

                                            console.log('clickTAG function on html page triggerred');

                                  }

                        </script>

                         

                        3) One question just to be totally clear as I am a total newbie to clicktags. If I am supplying an ad with a 'clicktag' to someone so they can track the ad clicks do I supply my file with the above <script> included or do I assume that they will look after that themselves, all I do is the window.clickTAG(); part and away they go ?

                         

                        How does that all sound to you ? Oh by the way you are a life saver, I have seen it working so I am happy, this was doing my head in... If you live in or ever come to Ireland I will buy you a pint or two ..

                         

                        Rgds

                         

                        Gerard Cooley

                        • 9. Re: Edge web banner and clicktag
                          TimJaramillo Level 4

                          Hey Gerard, glad to help!

                           

                          Yes, points 1 and 2 are accurate.

                           

                          Regarding point 3: if you are dealing with prominant websites, they will already have their clickTag function set up on the html page, in which case you will need to check with each site to confirm what their clickTag function is called (usually it's either: clickTag or clickTAG).

                          • 10. Re: Edge web banner and clicktag
                            Toosey Corr Alot Level 1

                            Hi TimJaramillo,

                             

                            Thanks so much for the help before, unfortunatley it turns out they are still having an issue with the file (going through doubleclick) so with a bit more of experience under my belt with flash based clicktags I have some more info to bring to the table and hopefully a fix to this issue...

                             

                            The new info is that I had a closer look at a flash based ad which works and uses the following AS2 code;

                             

                            (A) on (release) { geturl (_root.clickTag, "_blank"); }


                            At the moment from our previous conversation I am using the following code in Adobe edge which is

                             

                            (B) window.clickTAG();

                             

                            Could you tell me what I change the above (B) to in order to replicate the AS2 code they are using in the working swf file ?

                             

                            Thanks Again

                             

                            Rgds

                             

                            Toose

                            • 11. Re: Edge web banner and clicktag
                              TimJaramillo Level 4

                              Hi Toosey, there are several different clickTag variables. Confirm that their clickTag variable name is "clickTag", and if so, try the below line:

                               

                              window.open( window.clickTag, '_blank' );

                               


                              • 12. Re: Edge web banner and clicktag
                                lujan30

                                Hi dhosford Thank you for your explanation about how to embed Adobe Edge into an html page.  Very clear.

                                • 13. Re: Edge web banner and clicktag
                                  TheNovalita

                                  I just wanted to add a thanks to you for taking the time to help. It's very kind.

                                  • 14. Re: Edge web banner and clicktag
                                    rosebudd Level 3

                                    Unfortunately building ads regardless of what platform you use must be able to be served by ad software. To use Doubleclick you must use Doubleclick's enabler.js annd DC specific sytntax for the so called clickTag which is called an exit in DC lingo.. It is not as simple as rewriting the Flash actionscript clickTag for Edge.

                                     

                                    If you wish to use Edge to build ads which more often than not will not be hardcoded on a publisher page you will need to build them for one of the vendors that will traffic a tag to serve the ad. This tag is considered a third party tag, as opposed to simply providing an art file (SWFs, JPGs, GIFs).

                                     

                                    Start with one of the ad specific templates created to work with Edge and Doubleclick.

                                     

                                    Rich Media Gallery | Template Database

                                     

                                    Then follow this build guide.

                                     

                                    Edge In-page build guide - DoubleClick Creative Solutions Help

                                     

                                    Advertising must offer tracking metrics or it is not advertising.

                                    • 15. Re: Edge web banner and clicktag
                                      kichostone Level 1

                                      Hi,

                                       

                                      How do you change the cursor to hand, when you rollover the Stage to click?

                                      Thanks

                                      • 16. Re: Edge web banner and clicktag
                                        rosebudd Level 3

                                        Doubleclick update...

                                         

                                        Turns out that not all HTML5 banner ads despite having multiple files associated with them are considered Rich Media, and have to be trafficked through Doubleclick Studio as third party tags. If there is nothing like expanding, video, or dynamic, your Edge In Page banners can be zipped and simply uploaded to DCM.

                                         

                                        If your Edge banner is not rich media you will not use the Studio enabler.

                                         

                                        You will put this in the head, and Doubleclick will dynamically change the URL

                                         

                                        Doubleclick CDN - Banner Animation - GreenSock

                                         

                                        <script type='text/javascript'> var clickTag = 'http://www.google.com'; </script> 


                                        You change the cursor in the cursor panel. Default is auto.

                                        • 17. Re: Edge web banner and clicktag
                                          tanvira5454192 Level 1

                                          Just add these before closing head . That's all

                                          <script type="text/javascript" charset="utf-8"> // called by Stage.click function in Edge function clickTAG(){ window.location.href = "http://www.adobe.com"; console.log('clickTAG function on html page triggerred'); } </script>

                                          • 18. Re: Edge web banner and clicktag
                                            productionArtistChad Level 1

                                            Clicktag isnt something you're going to be using anymore.

                                            I just uploaded a bunch of banners to doubleclick here is what you need

                                             

                                            open the index file and paste everything I have highlighted in red.

                                             

                                            <!DOCTYPE html>

                                            <html>

                                            <head>

                                            <!--doubleclick html enabler-->

                                            <script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script>

                                             

                                             

                                              <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

                                              <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

                                              <title>Untitled</title>

                                            <!--Adobe Edge Runtime-->

                                                <script type="text/javascript" charset="utf-8" src="edge_includes/edge.6.0.0.min.js"></script>

                                                <style>

                                                    .edgeLoad-EDGE-13296544 { visibility:hidden; }

                                                </style>

                                                                <style>

                                            #bg-exit {

                                                 position: absolute;

                                                 width: 100%;

                                                 height: 100%;

                                                 top: 0px;

                                                 left: 0px;

                                                cursor: pointer;

                                                 opacity: 0;

                                                 z-index:99;

                                            }

                                            </style>

                                            <script>

                                              AdobeEdge.loadComposition('Executive_728x90', 'EDGE-13296544', {

                                                scaleToFit: "none",

                                                centerStage: "none",

                                                minW: "0px",

                                                maxW: "undefined",

                                                width: "728px",

                                                height: "90px"

                                            }, {"dom":{}}, {"dom":{}});

                                            </script>

                                            <!--Adobe Edge Runtime End-->

                                            </head>

                                            <body style="margin:0;padding:0;">

                                              <div id="Stage" class="EDGE-13296544">

                                              <div id="bg-exit"></div>

                                              </div>

                                            </body>

                                            </html>

                                             

                                            Now open up the javascript file and paste this at the top.

                                             

                                            // If true, start function. If false, listen for INIT.

                                            window.onload = function() {

                                              if (Enabler.isInitialized()) {

                                                  enablerInitHandler();

                                              } else {

                                                  Enabler.addEventListener(studio.events.StudioEvent.INIT,

                                            enablerInitHandler);

                                              }

                                            }

                                            function enablerInitHandler() {

                                                // Start ad, initialize animation,

                                                // load in your image assets, call Enabler methods,

                                                // and/or include other Studio modules.

                                                // Also, you can start the Polite Load

                                            }

                                            function bgExitHandler(e) {

                                                Enabler.exit('Background Exit');

                                            }

                                            document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);

                                             

                                             

                                            then uopload to doubleclick and put a dummy url in the exit event window.

                                            • 19. Re: Edge web banner and clicktag
                                              productionArtistChad Level 1

                                              "https://s0.2mdn.net/ads/studio/Enabler.js"

                                               

                                              this was suppose to be in red it was auto highligted a blue link.

                                              • 20. Re: Edge web banner and clicktag
                                                rosebudd Level 3

                                                Unfortunately to compound confusion Edge Animate published banners come in two flavors as regards to Doubleclick.

                                                 

                                                Doubleclick has a unit called DCRM which stands for Rich Media and uses Studio. DCM standds for Doublkeclick Campain Manager. Your AdOPs people use it to book ads.

                                                 

                                                Only Rich Media units have to be uploaded trafficked and served through Doubleclick Studio. The vast majority of banners can be uploaded as a zip file to DCM after minimal mods to the published HTML file..

                                                 

                                                The DCM banners have a completely different syntax and do not use enabler.js. Uploading a Studio banner to DCM will fail as DCM will say there is no clickTag.

                                                 

                                                If you are not doing expandables, dynamic, video, etc. you are not obligated to run your ads through Studio with the higher costs, and longer time frame associated with Studio QA.

                                                 

                                                Moderators we need a sticky for this.

                                                 

                                                FYI DoubleClick has Rich Media Studio Edge templates for download. You don't have to do anything except hit Publish.

                                                 

                                                Rich Media Gallery | Template Database

                                                 

                                                If your ad is going to be uploaded to DCM, follow this procedure. Except adding the enabler.js to the head, this one is correct.I have had a zipped ad uploaded to DCM using the below. My Studio ready ad was rejected.

                                                 

                                                What is the proper way to add ClickTAG to an Edge Banner?

                                                • 21. Re: Edge web banner and clicktag
                                                  candelariomon

                                                  Yes I'd like to know this as well.

                                                  • 22. Re: Edge web banner and clicktag
                                                    a_doggy

                                                    Can we somehow get to the bottom of this??  Adobe, we need a clear answer on this.

                                                    As flash advertising is becoming less accepted and html5 banners taking over, we need to know a clear guideline to getting clickTags implemented.

                                                    Personally I've loved getting into Edge Animate and I think it has great promise in the future of dynamic web content design and delivery - But as a designer I am only equipped (like most seasoned designers) to manipulate JavaScript.  Hard coding js language goes beyond the majority of creatives.

                                                     

                                                    Personally, here's another question i'd like to throw out to all the designers out there & ad-hosts.....

                                                    *Why do we (as designers) need to supply the clickTag code into our HTML5 ads anyways?  Shouldn't the ad-host (vendor) input it themselves?  My ad designs are completely functional, and supplier ready within hours, but the clickTag issue is rampant everytime I do an output and provide initial testing files to suppliers.  This process usually ends up taking days to resolve and the solutions are vague, and determinate on each unique vendor.

                                                     

                                                    The whole reason we needed to input clickTags into flash was because .swf files after publish were "closed architecture" (uneditable by vendors).  Soooooooo...... Can we not all band together and force the ad-hosts to get off their butts for 5 minutes and implement their own tracking code?  Each vendor is unique, and their clickTag function is often proprietary... why do WE need to bend over backwards trying to figure out complex code that we can't even test, only to find out that it doesn't work, wasting time with back and forth emails, uploads, convoluted 60 page guides from vendor reps who don't have a clue what they're talking about???  (kind of ranting, sorry... but I do believe I'm on to something here).

                                                     

                                                    The communities responses would be greatly appreciated.

                                                    • 23. Re: Edge web banner and clicktag
                                                      rosebudd Level 3

                                                      HTML5 IS html/css and javascript. Nothing proprietary.

                                                       

                                                      Actionscript was case sensitive, so clickTAG, and clickTag were not the same.

                                                       

                                                      Rich Media vendors have proprietary APIs.

                                                       

                                                      You are using software that even though there are some similarities, does not use the exact same syntax as javascript.

                                                       

                                                      clickTag btn syntax for Edge, if your ad IS NOT Rich Media (expandable, video, frequency capped), and won't be uploaded to a Rich Media vendor for tag creation and serving.

                                                       

                                                      window.open(clickTag, "_blank");

                                                       

                                                      HTML5 javascript equivalent.

                                                       

                                                      onclick="javascript:window.open(window.clickTag)"

                                                       

                                                      variable that defines clickTag

                                                       

                                                      <script type="text/javascript">

                                                      var clickTag = "https://www.google.com";

                                                      </script>

                                                       

                                                      Google/Doubleclick makes their money from impression fees, and there ad serving platforms, DFP, DCM, AdWords, etc. If you think it is too hard,  Google has created a free HTML5 banner ad creating UI called GWD.

                                                       

                                                      HTML5 Immersion for DoubleClick - Google+

                                                      • 24. Re: Edge web banner and clicktag
                                                        resdesign Adobe Community Professional & MVP

                                                        I personally think designers may be shortsighted by not learning coding. BTW when you know coding your income increases exponentially and you are ahead of all the only designer guys.

                                                         

                                                        Just saying! 

                                                         

                                                        In the mean time check out this tutorial I posted this month.

                                                        Edge Animate and doubleClick Banners 101 - Tutorial #10

                                                        1 person found this helpful
                                                        • 25. Re: Edge web banner and clicktag
                                                          a_doggy Level 1

                                                          I am not just talking about DoubleClick.  I design interactive ads to dozens of vendors/ad-hosts, all of which have different criteria for clickTag implementation.  I also know my way around code enough to build complex website designs etc.  I just don't have the experience conceiving bare js from scratch so to speak.  I believe there needs to be a standards setup in regards to incorporating tracking mechanisms for online ads - it's just not there yet I believe.  And I also believe the ad-hosts have gotten lazy in regards to implementing tracking (since we handled it within flash).  Ultimately, I should be busy designing, not dissecting server tracking code, which isn't part of my job description.

                                                          • 26. Re: Edge web banner and clicktag
                                                            resdesign Adobe Community Professional & MVP

                                                            If Edge continues development, I will add this on the request sheet.

                                                            Thanks for your input.

                                                            • 27. Re: Edge web banner and clicktag
                                                              TimJaramillo Level 4

                                                              I'd also add that currently the media vendor Pointroll/Cofactor does not accept Edge Animate files (nor Hype, Sencha or Google Swiffy). They've told me that they're working on accepting these formats hopefully in the next few months. I'd also be wary of the extra file size that the Edge Animate "includes" js file adds to your files- it's about 100k. When you're building to a 150k spec, that 100k can cause you nightmares. Some vendors won't count the load if you target the CDN version of this "include" js file, but some do count it.

                                                               

                                                              I've been doing a fair amount of html5 banner ads recently, and I've been using vanilla html and javascript, to keep it very simple and straightforward. I'll start this off by saying that GSAP (Greensock Animation Platform) is an absolutely essentially part of my process.

                                                               

                                                              Here's the basic structure of my banner builds:

                                                              1. I add all of my images inside divs, to the index.html file (I add a class to each div that sets the CSS "position" property to "absolute" for each div). These images/divs are nested within a parent div which has its CSS "position" property set to "block".
                                                              2. Then I use the GSAP "set" method to actually position each object in my standalone javascript file. I base my javascript file on the "Revealing Module Pattern", penned by Christian Heilmann: http://christianheilmann.com/2007/08/22/again-with-the-module-pattern-reveal-something-to- the-world/
                                                              3. Then I use GSAP to animate everything (ideally TimelineMax to make sequencing super easy, or TweenLite with delays on each Tween, if file size requirements are especially tight).

                                                               

                                                              It's a pretty simple setup (once you do it a few times), and it works with every media vendor (with slight variations to click tag button implementation).

                                                               

                                                              In regards to the click tag? ... This is a bit tricky, but in my experience, the key is to keep badgering the media vendor to provide you with an example implementation (most vendors will be able to supply you with a template to reference). Often your initial contact at the media vendor will be an account executive (non-tech). They won't know anything about the details for implementing the click tag button, so you'll need to reach out to a tech/dev/QA person at the media vendor to get this info. Usually it's as simple as making a button (a simple div on top of all other layers), and adding a click event listener to that button, and then on click, you call whatever function, API call, etc, that the media vendor tells you to call.

                                                               

                                                              This may sound complicated, but in all honesty, if you're working in the digital space these days as an animator/designer, in the long run it will make your work life much easier (and more profitable) if you learn the basics of html, css and javascript. It's painful at first, but once you get the basics down, it's not so bad!

                                                              • 28. Re: Edge web banner and clicktag
                                                                rosebudd Level 3

                                                                Pointroll dropped the ball on HTML5 IMHO. They are scrambling to save face.

                                                                 

                                                                Doubleclick Studio had HTML5 templates as early as 2013 including Edge Animatre ones. So did AdForm. Google has put a lot of resources into GWD, and it is free.

                                                                • 29. Re: Edge web banner and clicktag
                                                                  TimJaramillo Level 4

                                                                  It is odd that Google Web Designer is still at the beta stage, after several years!

                                                                   

                                                                  Google Web Designer

                                                                  • 30. Re: Edge web banner and clicktag
                                                                    resdesign Adobe Community Professional & MVP

                                                                    Hi There Tim,

                                                                    Long time no see. I agree with you. It is strange. Have you tried it?

                                                                    • 31. Re: Edge web banner and clicktag
                                                                      TimJaramillo Level 4

                                                                      Good to see you Marie! I have played around with Google Web Designer a bit (few months ago) ... it felt like a stripped down, simplified version of Edge Animate.

                                                                       

                                                                      As an experienced AS3/JS coder, I feel more comfortable doing most of my animation through code (GSAP). I have more control with code, my files are more streamlined, I can build animations quicker, and I can repurpose files much faster (I only have to change x, y, alpha, etc values in my code). I know for some of the other users in this forum, javascript code is like a completely foreign language that seems un-learnable, and combining all the separate pieces together seems impossible (html, CSS, JS- Edge Animate does all that for you).

                                                                       

                                                                      But as I preach to all the "designers that don't know any code" who contact me in the forums for help: once you have a handle on the basics of coding, you'll be amazed at what you can do! And I'm not trying to steer people away from Edge Animate, (because I've combined coded animation, with Edge Animate as an asset organizer and layout tool, with great results).

                                                                      • 32. Re: Edge web banner and clicktag
                                                                        sarcasmrox3 Level 1

                                                                        Hello Tim,

                                                                         

                                                                        I'm definitely new to this HTML5 process and by reading this entire thread, it seems that many other users are as well. I can't speak for anyone but as a designer that actually WANTS to eventually learn code (and more specifically how to make these simple banner ads as it's somewhat important to the transition my job is heading towards), where can I go to start?

                                                                         

                                                                        A little background about me as a "coder", I took literally one semester of coding in college and I've only been out of school for about a year and a half. I've been working for a company that used flash for their banners. I was hired as a simple graphic designer for the basic artwork and slowly made my way towards editing emails and updating their flash ads, incorporating the clickTAG. But as stated earlier, the company is in this reorg process and it's time to learn HTML5 (a lot easier said by the vendors than done by us non-experienced coding designers). *Important: There are no coders in my department as we're starting from scratch so temporarily I'm on my own... (yay).

                                                                         

                                                                        Reading this thread, I can see there are many different answers to the same problem and I definitely get that. I've looked into Google Web Designer, bannerflow, read about GSAP and looked at their site (but seemed confusing for a non-coder), and just downloaded Edge Animate (then started reading this thread). My overall goal, since this is still the learning process, is to simply recreate one small flash banner as an HTML5 banner with everything working correctly and incorporating all the functions necessary (this dreaded clickTAG).

                                                                         

                                                                        I don't mind studying a bit and I love learning. I want to eventually learn how to code from scratch and all that good stuff but immediately these HTML5 banners are my first priorities. As an experienced AS3/JS coder, would you be able to provide some insight or references on where I can quickly (and overtime) learn how to create such a simple SIMPLE animated banner? It's a bit overwhelming when I'm asked to create a simple 50k banner with a clickTAG then asked to create them in HTML5 but as I do research, I can't find any definitive file size specs or program or format or way of creating same banner without running into issues.

                                                                         

                                                                        Any and all help from other users would be much appreciated. I will check out the tutorial link I seen above earlier in the thread and will try and follow this thread as closely as possible. I'm glad (and scared) that this thread has continued since 2013 and I look forward to reading some responses.

                                                                         

                                                                        TL;DR - HELP! I need to learn how to make a simple HTML5 animated banner (just fades and slides) with a "clickTAG". As a non-coder, I would prefer a simple answer and some insight on where I can go to learn more. I'm very willing to learn and I love tearing things apart to learn, but I simply don't know where to start.

                                                                         

                                                                        Thank you all for this thread thus far! Keep being awesome.

                                                                        • 33. Re: Edge web banner and clicktag
                                                                          rosebudd Level 3

                                                                          The Greensock folks have been kind enough to create a subforum just for HTML5 banner ads. I highly recommend it. Unfortunately this Adobe Edge forum has no admins currently, and many of the banner questions have had confusing answers partly because ad vendors have their own APIs, and Google/Doubleclick has many flavors of ads available. There are experienced hand coding banner creators sharing their experiences with getting their banners out the door and accepted by the major ad serving software platforms (DCRM, DCM, GDN, Adwords, Celtra, etc.) . I personally have started with codepen banners, and modified them as a learning tool.

                                                                           

                                                                          Banner Animation - GreenSock

                                                                           

                                                                          In addition the Greensock folks are in constant contact with the major ad vendors. And report immediately when new info becomes available.

                                                                           

                                                                          More banner stuff from Greensock

                                                                           

                                                                          http://greensock.com/html5-banners

                                                                           

                                                                          GreenSock | Getting Started with GSAP (GreenSock Animation Platform)

                                                                           

                                                                          GreenSock | Learning Landing Page

                                                                           

                                                                          A Lynda.com tute

                                                                           

                                                                          Watch Creating an HTML5 Banner Ad with GreenSock (GSAP) Online Video Course

                                                                          • 34. Re: Edge web banner and clicktag
                                                                            Neacail81

                                                                            haha, i guess Green sock is the way to go, time to up my skills as a designer i guess. *yelp*

                                                                            • 35. Re: Edge web banner and clicktag
                                                                              natasam62790935

                                                                              Hi guys.
                                                                              I'm having a big problem solving this clickTag issue, and I see that you know a lot about this theme.
                                                                              Im working on an expandable banner in Edge Animate. And its done, except that I cannot implement script and clickTag for Publisher.

                                                                               

                                                                               

                                                                              This is their instruction, an example how the code should looks like:
                                                                              There should be included JS just before <body/>:

                                                                              <script type="text/javascript">

                                                                                var parsed =

                                                                                (document.location.href.split('#')[1]||'').split('&');

                                                                                var params = parsed.reduce(function (params, param) {

                                                                                var param = param.split('=');

                                                                                params[param[0]] =

                                                                                decodeURIComponent(param.slice(1).join('='));

                                                                                return params;

                                                                                }, {});

                                                                                // change link href

                                                                                document.getElementById('creativelink').href = params.clickTag;

                                                                                </script>

                                                                               

                                                                              Thats okay. But the link instruction is:
                                                                              A clickable place should be surrounded by:

                                                                              <a id="creativelink" target="_blank"> <img src="..." /> </a>

                                                                               

                                                                              So, I thought to make the whole stage clickable (and since the stage is expanding it seems like a good idea).
                                                                              So what should I place there in Edge:

                                                                              window.clickTAG();

                                                                              or

                                                                              window.open(clickTag, '_blank');

                                                                              or something else?

                                                                               

                                                                              Also, if so, what should I place in the script instead of their ('creativelink')?

                                                                               

                                                                               

                                                                              This is how Edge code look like when implement click event:

                                                                              Symbol.bindElementAction(compId, symbolName, "${Stage}", "click", function(sym, e) {

                                                                                 // insert code for mouse click here

                                                                                 window.open(clickTag, "_blank");

                                                                               

                                                                              If you would be kind to help, I would appreciate.
                                                                              Thanks a lot.

                                                                              • 36. Re: Edge web banner and clicktag
                                                                                natasam62790935 Level 1

                                                                                Or is there a way to add everything into an published file?

                                                                                </head>

                                                                                <body style="margin:0;padding:0;">

                                                                                  <div id="Stage" class="EDGE-130900273">

                                                                                  </div>

                                                                                </body>

                                                                                </html>

                                                                                Thanks

                                                                                • 37. Re: Edge web banner and clicktag
                                                                                  rosebudd Level 3

                                                                                  <div id="Stage" class="EDGE-268777131"   id="creativelink"

                                                                                  onclick="javascript:window.open(window.clickTag)" target="_blank">

                                                                                    </div>

                                                                                     

                                                                                      <script type="text/javascript">

                                                                                  var parsed =

                                                                                  (document.location.href.split('#')[1]||'').split('&');

                                                                                  var params = parsed.reduce(function (params, param) {

                                                                                  var param = param.split('=');

                                                                                  params[param[0]] =

                                                                                  decodeURIComponent(param.slice(1).join('='));

                                                                                  return params;

                                                                                  }, {});

                                                                                  // change link href

                                                                                  document.getElementById('creativelink').href =

                                                                                  params.clickTag;

                                                                                  </script>

                                                                                  • 38. Re: Edge web banner and clicktag
                                                                                    natasam62790935 Level 1

                                                                                    Hi, thanks a lot for your time

                                                                                     

                                                                                    I've tried this, but click won't work: Untitled

                                                                                     

                                                                                    I've edit it a bit and click now works. But I'm not sure does it trigger the script, or just open some blank page? Untitled

                                                                                    • 39. Re: Edge web banner and clicktag
                                                                                      natasam62790935 Level 1

                                                                                      This is the edited code and Im not sure does it work and trigger the script. I'm scared that it just opens a blank page:

                                                                                      <div id="Stage" xml:id="creativelink" class="EDGE-130900273" onclick="javascript:window.open(window.clickTag)" target="_blank">

                                                                                      </div>

                                                                                       

                                                                                      <script type="text/javascript">

                                                                                      var parsed =

                                                                                      (document.location.href.split('#')[1]||'').split('&');

                                                                                      var params = parsed.reduce(function (params, param) {

                                                                                      var param = param.split('=');

                                                                                      params[param[0]] =

                                                                                      decodeURIComponent(param.slice(1).join('='));

                                                                                      return params;

                                                                                      }, {});

                                                                                      // change link href

                                                                                      document.getElementById('creativelink').href =

                                                                                      params.clickTag;

                                                                                      </script>

                                                                                      1 2 Previous Next