HTML Returned for an Ad Tweet Preview Does Not Look Right

sealabcore · 2015-08-14T21:24:32.834Z

When previewing a Tweet on ads.twitter.com the preview looks correct
https://www.dropbox.com/s/d1b8550lkc9jvgm/Screenshot%202015-08-14%2014.19.05.png?dl=0

But when we use the html returned via the preview api endpoint:
https://dev.twitter.com/ads/reference/get/accounts/%3Aaccount_id/tweet/preview/%3Atweet_id

It looks like unstyled plain html and shows the wrong button CTA:

I think a lot of our customers may cancel their ads after seeing an inaccurate preview as it is seen in the html api response.

Are we missing something, or this expected?

andrs · 2015-08-19T11:13:44.194Z

Hey @sealabcore - could you please provide us with a twurl request showcasing this issue so we can recreate it locally and investigate further?

sealabcore · 2015-08-19T17:47:37.686Z

twurl “/accounts/r4gegb/tweet/preview/632297560070189056”

preview from response has wrong buttons and seemingly no style as shown in above previews. Do I need to include some css or something?

andrs · 2015-08-20T10:54:48.359Z

You shouldn’t need to add anything more, you should be getting a fully-fledged HTML response that you can simply drop inside an iframe. Could you share the response you are getting from the API please?

brandonmblack · 2015-08-20T17:56:02.560Z

@sealabcore please make sure to follow our community guidelines for reporting issues. We’re not able to reproduce the problem you’re seeing since you haven’t provided full HTTP request and response information or twurl examples. Without that we can’t confirm if you are seeing malformed Tweet preview responses of if this is just a network issue localized to you.

To answer you question, there are no additional styles you need to include but it is possible you’re not able to download the style sheets the Tweet Preview content references.

In the Tweet preview markup you’ll see references like this:

<link href="https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.xxxx.css" rel="stylesheet" />

If you’re unable successfully download that file in your browser, then yes you will be seeing unstyled previews. Please ensure you’re successfully able to download these CSS files form Twitter’s CDN and if not provide API responses so we can figure out what the issue is.

sealabcore · 2015-08-20T18:55:44.840Z

Hi @brandonmblack

Sorry about not following the guideines. I have fixed the css issues. I was loading the frame wrong

Though the API response still has the wrong CTA button:

gist.github.com

https://gist.github.com/sealabcore/0c245b68f433c4938098#file-response-html-L34

response.html

<!DOCTYPE html>
<html>
<head>  
<meta charset="utf-8" />    
<link href="https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.1afa5e1bb454170e9e02.css" rel="stylesheet" />
</head>
<body>    
<div class="Tweet Tweet--timeline   Tweet--web      " dir="" data-tweet-id="">  
<img class="Tweet-avatar" src="https://pbs.twimg.com/profile_images/563948307777462272/fIcvap_z_normal.jpeg" width="48" height="48" alt=""/>  
<div class="Tweet-body">

This file has been truncated. show original

Here’s the api response showing our ads actual CTA value:

gist.github.com

https://gist.github.com/sealabcore/4f7ce42f2b250edcd08b

website_card_response.rb

{
  :data_type=>"card", 
  :data=> {:name=>"Kit Website Card #10", :image=>"https://pbs.twimg.com/media-preview/snf:632297541275484160/Ib6vy2D4.jpg",
           :preview_url=>"https://cards.twitter.com/cards/r4gegb/tutx", :website_display_url=>"kitcrm.com", 
           :website_cta=>"SHOP_NOW", :id=>"tutx", :account_id=>"r4gegb", :website_dest_url=>"https://www.kitcrm.com",
           :created_at=>"2015-08-14T21:07:39Z", :website_title=>"Dog toys", :website_url=>"https://www.kitcrm.com", 
           :updated_at=>"2015-08-19T06:33:30Z", :deleted=>false, :card_type=>"WEBSITE"}, 
  :request=>{:params=>{:card_id=>"tutx", :card_type=>"website", :account_id=>"r4gegb"}}
}

Do you need any more info from me?

Thanks guys!

brandonmblack · 2015-08-20T20:11:06.307Z

@sealabcore thanks for the quick follow up! Really appreciate the full response / extra detail. This definitely looks like a defect on our end re: wrong CTA. Let me follow up and I’ll post back here when I have more info.

brandonmblack · 2015-09-15T18:34:28.024Z

@sealabcore apologies for the late followup, but we deployed a fix for this issue last week. This should be resolved now.