1. MashupAds Lesson 1: Making a One-Way Widget Example: AT&T Store Locator Widget

2. Make sure you’re using Firefox (IE support coming soon...)

3. Pick a URL to a site that contains functionality that you want to port into your ad. Such as, http://wireless.att.com/find-a-store/ Copy this URL to your clipboard.

4. Go to www.mashupads.com and log in with your credentials...

5. You're now in the MashupAds Dashboard. Click "Create a New Ad."

6. This is Step 1 of AdKitchen, “Create a New Ad.” To start, you’ll need to decide what type of ad you want to make. Choose “One-Way” in this case. Then click “Add Advertiser Feed” to add our store locator feed to the ad.

7. Paste the URL of the AT&T Store Locator into the box, then click “Next Step”

8. The Dapp Factory shows you the site you entered in its “Virtual Navigator.” Here you can select the functionaltiy you want to bring from the site to your ad

9. Let’s take the store search by zip code functionality. Hover over the Zip Code field in the form and note how Dapper asks if you would like to “Use as a variable input” -- you do. Check the box.

10. Save this variable as “Zip Code”

11. Next, we’ll have to use this functionality to show Dapper a couple examples of what kind of content we want to be part of the ad -- In this case, store locations by zip code.

12. Enter a zip code, and hit “Enter” or the submit button at the bottom of the form

13. Here you’ll see results from the store search you just performed. Click “Add to Basket” to tell Dapper that this is the kind of result you want to extract content from. Then, click the back button to perform another search.

14. Enter a different zip code, hit enter or the submit button to give Dapper another search result

15. You’ll see your new results, click “Add to Basket” again. Now that you have 2 examples of store locator search results, click “Next Step”

16. Dapper analyzed the search result pages and now you can select the content you want to be part of your ad’s feed. Let’s start with the name of branch. Click one of the branch names.

17. Select the second branch name. Dapper tries to guess what you want, and should select the rest of them by itself. Sometimes, it gets content you don’t want -- click the extra content (in this case, the address) to deselect it

18. When all the branch names have been selected, click “Save Field” and give the field a descriptive title, like “Branch Name”

19. Select another type of content you want in the feed for your ad -- like the branch address. Note that clicking one address automatically selects the others...remember, if it gets something you don’t want, deselect it

20. Save this field as “Address”

21. Go ahead and grab the phone number too...save as “Phone Number.” Then click “Next Step.”

22. This takes you to the Group Content stage. Here you’ll tell Dapper to present the groups of fields together in an orderly fashion. In our case, all we have to do is click “Select All” and “Save Group.”

23. Save this group as “Branch Info” and click “Next Step” when you’re done

24. Save the feed you’ve just created and you’re ready to start configuring your ad!

25. Here you can set how often you want the content in your feed to update. For time-sensitive content, you might want to make the refresh feed setting shorter, but in our case, 24 hours is just fine. You can also set how long you want Dapper to use old content should it be unable to fetch content

26. Now we’re back in the “Create a New Ad” step of AdKitchen. You can see the functionality, search by zip code, you’ve taken from AT&T’s Store Locator in the ad preview below. Click “Next Step”

27. Here you can decide which elements of the feed you just created you want to be displayed in the ad. In our case, let’s select all of them.

28. You can take a second here and actually play with the site functionality by typing in another zip code, like 90210, and see how the content refreshes with store locations in Beverly Hills. Click “Next Step” when you’re done having fun.

29. The “Ad Interface” step is where you can choose how you’d like the content to be displayed. Here you can select custom filters and other cool options, but for now let’s keep it the way it is and click “Next Step”

30. Nothing to do here -- that is until Lesson 2 where we learn how to contextualize our MashupAd...Click “Next Step”

31. That’s it! Here’s the.fla file to download, and you’re ready to customize the creative and serve your ad!