Archive for June, 2012

For those of you using Google Analytics, I’ll show you how to use tracking events in Edge to monitor statistics for events executed in your Edge compositions (Adobe also offers a web analytics solution called SiteCatalyst, which we may cover later).

Set up your analytics account

If you’re integrating your Edge composition with a page that already contains your tracking code, you can skip this step and move onto “Tracking Events in Edge”.

Once logged in, visit the Admin tab to grab your tracking code towards the bottom of the page.

Copy and paste your tracking code into the .html of your Edge composition.

Now that you’re all set up we can begin to track.

Tracking Events in Edge

Event tracking in Edge is actually quite simple. You can track anything bound to an event or have tracking executed automatically via triggers on the timeline. In this example, I’m going to set up event tracking for several events in my composition.

I’ll be using the analytics code for event tracking as documented here using the _trackEvent method. Visit the Google Analytics tracking guide to learn how to use these paramaters.

I’ve set up events in a few different parts of my composition. You can set up as many or as little events as you’d like; I’ve added plenty to give a few examples of events you can track.

Ready to upload

Now that all your tracking code is in place, you’re ready to upload. Once your composition is uploaded to your website Gogle Analytics will start tracking the events. Note: it might take a while between the time the event is fired to when Google receives it.

Edit June 16 2012 – The following post is a way to integrate your Edge content without the use of iframes. For detailed information on how to integrate your Edge compositions using iframes (which will also allow you to preserve your Muse project for editing) visit the Muse documentation page here.

This post will show you how to integrate your Edge compositions into Adobe Muse. Be warned, this does involve some code – BUT – don’t let this intimidate you! If you’re the type that would rather poke a fork in your eye than code, fear not. All we’ll be doing is copy and pasting.

This post also assumes you have the basics of Muse and Edge down and is not a tutorial on how to use either. For resources on how to use Muse, check out muse.adobe.com. For resources on how to use Edge, check out edge.adobe.com.

Getting started

I’ve created a very basic site in Muse which has some simple navigation and a placeholder for the banner I will later create in Edge. There’s two caveats to integrating Edge content into Muse;

Integrating Edge compositions requires HTML export out of Muse, and therefore you will not be able to edit your site in Muse once the Edge content is integrated. Make sure your site is good to go before publishing. If not, the process of merging your Edge content is fairly easy once you’ve done it a few times so if you need to change your site, you’ll just have to republish and reinput the Edge snippets.

You will not be able to upload your site via Business Catalyst in Muse after you’ve integrated your Edge content, since the site is published as HTML from Muse.

With that out of the way, here is the basic site I created.

Once you’ve completed your site, go to the File menu and select “Export as HTML”.

After you publish, you should see something similar to this in your published directory.

Onto Edge

In this example, I’ve made a simple banner in Edge which I’ll be putting into my Muse site.

Save your Edge composition in the same directory as your Muse published content. Your folder should now look something like this:

And now we code (kind of)

Put down the fork! By code I really mean copy and paste – we’ll be merging the content between the Edge HTML and the Muse HTML.

Open the two HTML files in the directory you’ve been saving your work in.

We’ll start with the Edge HTML. First, copy the following code:

Then switch over to the Muse HTML. Look for the closing </head> tag (there will be only one in the document). This is where we’ll paste the code.

Your Muse HTML should now look like this:

We’re halfway done!

Open up the index.css file that Muse exported. If you’re not familiar with CSS, it’s an output file that works similarly to how styles work in InDesign, Illustrator or Photoshop. Muse will export the styles for every element you create defining things like colour, fonts, position, etc.

I know I set my placeholder to 700px wide, so doing a search I can instantly find the name of the placeholder. Make sure the Edge content you create and the placeholder you created in Muse match sizes; if the dimensions are off it can cause your page to style incorrectly.

In this case, the ID of my placeholder is #u141.

Now that we know what the ID is of our placeholder, we can integrate our Edge content. Go back to the Muse HTML page and do a search for your ID. ID’s can only exist once on a page, so it will be the only one you find.

There’s one more line we have to grab from the Edge HTML. Return to the Edge HTML and copy the following line:

Return to the Muse HTML and paste it in between the <div> tags of our placeholder. It will now look something like this:

You’re done! Now your Muse HTML page is ready to go.

Make sure when you deploy your website you include all of the Muse and Edge files.

Since both Edge and Muse are very new products, our efforts have been put into making our individual products better before focusing on cross-product workflows. Edge has already started exploring workflows with other products, including InDesign and iBooks. When it comes to Edge and Muse, is there room for improved integration? Absolutely! However that’s for a future release, as for now you’ll have to get your hands a little dirty to make the two work together.