Edge web banner and clicktag

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

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

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.

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.

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.

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

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

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.

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.

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

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

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

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

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' );

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