Viewing Ad Previews

Ad groups are a visual media and as such it is important to be able to preview them prior to publishing them. The Ads Preview APIs allow you to preview existing AdGroups as well as to generate previews of planned Ad Groups you intend to create. Generated previews are based on the creative and targeting you intend to use.

Note: Previews are available for type 1, 2, 4, 25 and 27 Ad Creatives.

There is a companion web based tool to the Preview Api called the Action Spec Preview tool. This shows you what a type 25 Ad Creative will look like for a given action spec both in news feed and as a Marketplace Sponsored Story.

Ad Preview CSS

In order to view the Ad Group preview correctly the Ad Preview CSS must be retrieved and included in the preview window. To retrieve the CSS make a call to the adpreviewcss connection of the Ad account object as follows:

act_{adaccount_id}/adpreviewscss

This will return the appropriate CSS as follows:

{
  "result": ".fbRightFeedbackActions{background-color:#edeff4;padding:5px 5px}\n.fb.....
}

Note: The CSS is reusable across the user session so this call only needs to be made once per session.

Existing Ad Group

The Ad group object has a previews connection which allows you to view a preview of the existing AdGroup. To retrieve this preview make a call to the previews connection of the Ad group object as follows:

{adgroup_id}/previews

This will return a HTML snippet as per the following response.

{
  "data": [
    {
      "body": "<div class=\"fbEmuEgoUnit\"><div class=\"fbAdUnit\" data-ad=\"&#123;&quot;adid&quot;:6004571811439,&quot;segment&quot;:&quot;market&quot;&#125;\" id=\"6004571811439-id_4f8bfd3ea32ea8c09887586\"><div class=\"fbEmu fbEmuStreamStory fbEmuMarketplace\"><div class=\"clearfix uiImageBlock\"><a class=\"fbEmuLink uiImageBlockImage uiImageBlockMediumImage lfloat\" onclick=\"return false;\"><img class=\"uiProfilePhoto uiProfilePhotoMedium img\" src=\"https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/161974_299761286746196_1872516558_q.jpg\" alt=\"\" /></a><div class=\"uiImageBlockContent \"><div class=\"fbEmuMainBody\"><span class=\"uiStream\"><h6 class=\"uiStreamMessage\"><span class=\"actorName actorDescription\"><a class=\"actorName firstName fbEmuLink\" onclick=\"return false;\">Move4Parkinson&#039;s</a></span> <div class=\"messageBody\"><div class=\"whitespaceLink\" id=\"uf50lh_1\"><a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\" id=\"uf50lh_2\"></a>We said in our post last week to watch this space for some exciting news... Well here it i<a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\">...</a></div></div></h6></span><div class=\"whitespaceLink\" id=\"uf50lh_3\"><a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\" id=\"uf50lh_4\"></a><div class=\"mvs plm fbEmuStreamAttachment fbEmuStreamAttachmentOffset textOnly fbEmuStreamBaseStory fbEmuStreamBaseStory\"><a class=\"fbEmuStreamTitle fbEmuLink fbEmuStreamLink\" onclick=\"return false;\">Move4Parkinson&#039;s: Move4Parkinson&#039;s Official Launch</a></div></div><div class=\"mts fsm fwn fcg\"><div class=\"whitespaceLink\" id=\"uf50lh_5\"><a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\" id=\"uf50lh_6\"></a><a class=\"uiBlingBox\" href=\"#\" rel=\"async\" ajaxify=\"\"><i class=\"img sp_arztn7 sx_90d4cf\"></i><span class=\"text\">14</span><i class=\"mls img sp_arztn7 sx_c3e4aa\"></i><span class=\"text\">1</span></a></div></div></div></div></div></div></div></div>"
    }
  ]
}

Note: For this HTML to render the Ad Preview CSS must have been loaded first.

Existing Ad Creative

The Ad Creative object has a previews connection which allows you to view the preview of the existing AdGroup. To retrieve this preview make a call to the previews connection of the Ad Creative object as follows:

{adcreative_id}/previews

This will return a HTML snippet as per the following response.

{
  "data": [
    {
      "body": "<div class=\"fbEmuEgoUnit\"><div class=\"fbAdUnit\" data-ad=\"&#123;&quot;adid&quot;:1,&quot;segment&quot;:&quot;market&quot;&#125;\" id=\"1-id_4f8bff70b3e614c22965366\"><div class=\"fbEmu fbEmuStreamStory fbEmuMarketplace\"><div class=\"clearfix uiImageBlock\"><a class=\"fbEmuLink uiImageBlockImage uiImageBlockMediumImage lfloat\" onclick=\"return false;\"><img class=\"uiProfilePhoto uiProfilePhotoMedium img\" src=\"https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/161974_299761286746196_1872516558_q.jpg\" alt=\"\" /></a><div class=\"uiImageBlockContent \"><div class=\"fbEmuMainBody\"><span class=\"uiStream\"><h6 class=\"uiStreamMessage\"><span class=\"actorName actorDescription\"><a class=\"actorName firstName fbEmuLink\" onclick=\"return false;\">Move4Parkinson&#039;s</a></span> <div class=\"messageBody\"><div class=\"whitespaceLink\" id=\"ufh2al_1\"><a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\" id=\"ufh2al_2\"></a>We said in our post last week to watch this space for some exciting news... Well here it i<a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\">...</a></div></div></h6></span><div class=\"whitespaceLink\" id=\"ufh2al_3\"><a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\" id=\"ufh2al_4\"></a><div class=\"mvs plm fbEmuStreamAttachment fbEmuStreamAttachmentOffset textOnly fbEmuStreamBaseStory fbEmuStreamBaseStory\"><a class=\"fbEmuStreamTitle fbEmuLink fbEmuStreamLink\" onclick=\"return false;\">Move4Parkinson&#039;s: Move4Parkinson&#039;s Official Launch</a></div></div><div class=\"mts fsm fwn fcg\"><div class=\"whitespaceLink\" id=\"ufh2al_5\"><a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\" id=\"ufh2al_6\"></a><a class=\"uiBlingBox\" href=\"#\" rel=\"async\" ajaxify=\"\"><i class=\"img sp_arztn7 sx_90d4cf\"></i><span class=\"text\">14</span><i class=\"mls img sp_arztn7 sx_c3e4aa\"></i><span class=\"text\">1</span></a></div></div></div></div></div></div></div></div>"
    }
  ]
}

Note: For this HTML to render the Ad Preview CSS must have been loaded first.

Generate Preview

The Ad account object has a generatetepreviews which can be used to generate a preview of what an AdGroup would look like with a given Ad Creative and targeting spec. To generate a preview make a call to the generatepreviews connection of the Ad account object while supplying an Ad Creative and (optional) targeting spec as follows:

act_{adaccount_id}/generatepreviews?creative=___&targeting=____

This will return a HTML snippet as per the following response.

{
  "data": [
    {
      "body": "<div class=\"fbEmuEgoUnit\"><div class=\"fbAdUnit\" data-ad=\"&#123;&quot;adid&quot;:1,&quot;segment&quot;:&quot;market&quot;&#125;\" id=\"1-id_4f8c0170e948c6151933434\"><div class=\"fbEmu fbEmuStreamStory fbEmuMarketplace\"><div class=\"clearfix uiImageBlock\"><a class=\"fbEmuLink uiImageBlockImage uiImageBlockMediumImage lfloat\" onclick=\"return false;\"><img class=\"uiProfilePhoto uiProfilePhotoMedium img\" src=\"https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/161974_299761286746196_1872516558_q.jpg\" alt=\"\" /></a><div class=\"uiImageBlockContent \"><div class=\"fbEmuMainBody\"><span class=\"uiStream\"><h6 class=\"uiStreamMessage\"><span class=\"actorName actorDescription\"><a class=\"actorName firstName fbEmuLink\" onclick=\"return false;\">Move4Parkinson&#039;s</a></span> <div class=\"messageBody\"><div class=\"whitespaceLink\" id=\"ufs1mo_1\"><a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\" id=\"ufs1mo_2\"></a>We said in our post last week to watch this space for some exciting news... Well here it i<a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\">...</a></div></div></h6></span><div class=\"whitespaceLink\" id=\"ufs1mo_3\"><a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\" id=\"ufs1mo_4\"></a><div class=\"mvs plm fbEmuStreamAttachment fbEmuStreamAttachmentOffset textOnly fbEmuStreamBaseStory fbEmuStreamBaseStory\"><a class=\"fbEmuStreamTitle fbEmuLink fbEmuStreamLink\" onclick=\"return false;\">Move4Parkinson&#039;s: Move4Parkinson&#039;s Official Launch</a></div></div><div class=\"mts fsm fwn fcg\"><div class=\"whitespaceLink\" id=\"ufs1mo_5\"><a class=\"fbEmuLink\" onclick=\"return false;\" rel=\"async\" ajaxify=\"\" id=\"ufs1mo_6\"></a><a class=\"uiBlingBox\" href=\"#\" rel=\"async\" ajaxify=\"\"><i class=\"img sp_arztn7 sx_90d4cf\"></i><span class=\"text\">14</span><i class=\"mls img sp_arztn7 sx_c3e4aa\"></i><span class=\"text\">1</span></a></div></div></div></div></div></div></div></div>"
    }
  ]
}

Note: For this HTML to render the Ad Preview CSS must have been loaded first. Some developers have found that the best results are obtained by adding the returned HTML into a <div> element with width: 235px; padding: 16px 0 0 18px;