DFP в статье Instant
Я пытаюсь понять, как добавить мои объявления DFP в мою статью Instant. У кого-нибудь есть опыт с этим? Facebook упомянул, что это возможно, но я не вижу никакой документации по нему в DFP или где-либо еще
3 ответа
Есть два способа в соответствии с их документацией. https://developers.facebook.com/docs/instant-articles/ads-analytics. Мы использовали автоматическое размещение, и наш подход заключался в том, чтобы создать маршрут для показа рекламы (полный документ) только для рекламы, а затем использовать URL-адрес через необходимый источник iframe.
в заголовке документа вы должны использовать:
<head>
<meta property="fb:use_automatic_ad_placement" content="true">
</head>
в теле:
<header>
<figure class="op-ad">
<iframe src="your src" height="250" width="300"></iframe>
</figure>
</header>
Вот пример тега GPT, который нужно вставить в тело статьи: (Я попробовал пример в справке Facebook, и есть много ошибок)
<figure class="op-ad">
<iframe height="250" width="300">
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/XXXXXX/FB_Articles_300x250', [300, 250], 'div-gpt-ad-XXXXXXXXX-0').addService(googletag.pubads());
googletag.enableServices();
});
</script>
<!-- /133801272/FB_Articles_300x250 -->
<div id='div-gpt-ad-XXXXXXXXX-0'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-XXXXXXXXX-0'); });
</script>
</div>
</iframe>
</figure>
Не забудьте поместить эту строку в заголовок настоящей статьи:
Пример с некоторым контекстом:
<!doctype html>
<html lang="pt-br" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://yoursite/your-article/">
<meta property="fb:use_automatic_ad_placement" content="true">
<meta property="fb:article_style" content="default">
<meta property="op:markup_version" content="v1.0">
</head>
<body>
<article>
<header>
<!-- cover -->
<figure class="op-ad">
<iframe height="250" width="300">
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/XXXXXX/FB_Articles_300x250', [300, 250], 'div-gpt-ad-XXXXXXXXX-0').addService(googletag.pubads());
googletag.enableServices();
});
</script>
<!-- /133801272/FB_Articles_300x250 -->
<div id='div-gpt-ad-XXXXXXXXX-0'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-XXXXXXXXX-0'); });
</script>
</div>
</iframe>
</figure>
<figure>
<img src="https://yoursite/your-article/image.jpg" />
</figure>
<!-- The title and subtitle shown in your Instant Article -->
<h1>Title;</h1>
<!-- author(s) -->
<address>
Writen by <a>Author</a>
</address>
<!-- publication date/time -->
<time class="op-published" datetime="2016-08-16T17:47:42+00:00">16 ago 2016</time>
<!-- modification date/time -->
<time class="op-modified" datetime="2016-08-16T17:47:42+00:00">16 ago 2016</time>
</header>
<!-- Article body goes here (CONTINUE LIKE A NORMAL INSTANT ARTICLE) -->
Я сохранил и теги DFP, и запрос мгновенных статей в базе данных.
Всякий раз, когда я делаю POST-запрос для синхронизации статьи с Instant Articles, мы на лету встраиваем теги DFP в документ HTML, который отправляется в IA.
При разработке и тестировании мы установили 'development_mode' => 'true' и вы можете увидеть статью в разделе статей по разработке.
Вы можете написать код для создания рекламного тега DFP на лету
/**
* Returns Array of <figure> tags enclosing <iframe> tags inside it.
*
* @param $adData
* @param $slug - Used to set targeting for restricting ads to a specific article
* @param $isInHouseArticle - Set targeting for avoiding ads for self-company article
*
* @return array
*/
private function getDFPAdCode($adData, $slug, $isInHouseArticle)
{
$DFPAds = [];
$adData = isset($adData['config']) ? $adData['config'] : [];
foreach ($adData as $ad) {
$mappings = isset($ad['mapping']) ? $ad['mapping'] : [];
$DFPAds [] = '<figure class="op-ad">
<iframe>
<script type="text/javascript">
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement("script");
gads.async = true;
gads.type = "text/javascript";
var useSSL = "https:" == document.location.protocol;
gads.src = (useSSL ? "https:" : "http:") + "//www.googletagservices.com/tag/js/gpt.js";
var node = document.getElementsByTagName("script")[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type="text/javascript">
var targetting = {
"self-company": "' . ($isInHouseArticle ? "TRUE" : "FALSE") . '"
};
googletag.cmd.push(function() {
var googleMapping = googletag.sizeMapping();
var mappingsArray = ' . json_encode($mappings) . ';
for (var i = 0; i < mappingsArray.length; i++) {
var mapping = mappingsArray[i];
var viewport_size = JSON.parse(mapping.viewport_size);
var slot_size = JSON.parse(mapping.slot_size);
googleMapping.addSize(viewport_size, slot_size);
}
var mappings = googleMapping.build();
googletag.defineSlot("'. $ad['name'] . '", ' . $ad['sizes'] . ', "' . $ad['div'] . '").setCollapseEmptyDiv(false, false).defineSizeMapping(mappings).addService(googletag.pubads());
var url = "' . '/article/' . $slug . '";
url = url.toLowerCase();
url = url.replace(\'=\', \'_\');
url = url.substring(0,40);
googletag.pubads().setTargeting("url", url);
for (var targetKey in targetting) {
var targetValue = targetting[targetKey];
googletag.pubads().setTargeting(targetKey, targetValue.toString());
}
googletag.enableServices();
});
</script>
<div id = "' . $ad['div'] . '" style = "padding: 0px !important;">
<script type="text/javascript">
googletag.cmd.push(function() { googletag.display("' . $ad['div'] . '"); });
</script>
</div>
<div id="facebook-ad"></div>
</iframe>
</figure>';
}
$insertConfig = !empty($adData[0]['properties']) ? $adData[0]['properties']: [];
return [$DFPAds, $insertConfig];
}
Вы можете получить рекламный код DFP при создании HTML-документа для запроса POST к API Instant Articles.