Skip to content

Latest commit

 

History

History
213 lines (175 loc) · 7.72 KB

publisher-amp-reference.md

File metadata and controls

213 lines (175 loc) · 7.72 KB

Implementing AMP springAds Integration

The springAds setup differs a lot from any other AMP ads setup and is orientated by the regular display setup using adSSetup object for defining the environment and ads to be called.

Said that, first you will have to integrate a director amp-ad tag, declaring your ads and targets on page:

<amp-ad height="1"
    type="springAds"
    data-adssetup='{
        "view": "amp",
        "partners": true,
        "adPlacements": ["banner","mrec","mrec_btf","mrec_btf_2"],
        "adSlotSizes": {
            "banner": [{
              "minWidth": 1,
              "sizes": [[320, 50], [9, 9]] // in this example banner is the first slot directly in view and therefore only allows one size (and 9x9 to enable programmatic) because it will not be resized by AMP
            }],
            "mrec": [{
              "minWidth": 1,
              "sizes": [[300, 250], [300, 300], [250, 250], [320, 160], [300, 150], [320, 50], [320, 75], [320, 80], [320, 100], [300, 100], [300, 50], [300, 75], [9, 9]]
            }],
            "mrec_btf": [{
              "minWidth": 1,
              "sizes": [[300, 250], [300, 300], [250, 250], [320, 160], [300, 150], [320, 50], [320, 75], [320, 80], [320, 100], [300, 100], [300, 50], [300, 75], [9, 9]]
            }]
        },
        "pageName": "demo_story",
        "publisher": "adtechnology.axelspringer.com",
        "target": "singleAds;multiAds;you;me;team=adtech,MIT;"
    }'>
</amp-ad>

As in normal web the next thing you will need are adslot, so fitting the adPlacements of the adslot you will have to implement these amp-ad-tags:

IMPORTANT:

Unlike regular web _btf will not dealed as sightloader seperatly since amp already only renders ads when next to the viewport

[...content...]
<-- static banner for first viewport that is not resizeable -->
<amp-ad width="320" height="50" type="springAds" data-adslot="banner"></amp-ad>
[...content...]
<-- dynamic banner for after first viewport that are allowed to be resized by AMP -->
<amp-ad width="100vw" layout="fluid" type="springAds" data-adslot="mrec"></amp-ad>
[...content...]
<-- dynamic banner for after first viewport that are allowed to be resized by AMP -->
<amp-ad width="100vw" layout="fluid" type="springAds" data-adslot="mrec_btf"></amp-ad>
[...content...]
<-- dynamic banner for after first viewport that are allowed to be resized by AMP -->
<amp-ad width="100vw" layout="fluid" type="springAds" data-adslot="mrec_btf_2"></amp-ad>
[...content...]

ads not in adSSetup / infinite scrolling

To inject an adslot you do not know it will surely be inserted into the article on pageload like for infinite scrolling pages you can just ad a new adslot. This is meant to trigger auctions and a single adload, so loading will take longer than for elements declared in adSSetup and they cannot be excluded by other campaigns on the same page impression anymore.

<-- dynamic banner for after first viewport that are allowed to be resized by AMP -->
<amp-ad width="100vw" height="fluid" type="springAds" data-adslot="mrec_btf_123"></amp-ad>
[...content...]

AMP Story ads (work in progess - available soon)

For AMP Stories the amp-ad will be replaced by an amp-story-auto-ads wrapper. Also please make sure your page loads this component:

<script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>

The parameters will be still defined the same just in a different way, e.g.:

<amp-story-auto-ads>
<script type="application/json">
    {
        "ad-attributes": {
            "type": "springAds",
            "data-adslot": "stories"
        }
    }
</script>
</amp-story-auto-ads>

Alternativ Xandr integration

Basic single ad

<amp-ad width=300 height=250
        type="appnexus"
        data-member="7823"
        data-code="mywebsite.de-amp-ressort_story-mrec"
></amp-ad>

connected ads

<amp-ad width=300 height=250
        type="appnexus"
        data-target="mrec"
        json='{
            "pageOpts": {
                "member": 7823
            },
            "adUnits": [{
                "disablePsa": true,
                "invCode": "mywebsite.de-amp-ressort_story-mrec",
                "sizes": [[300, 250]],
                "keywords": {
                    "misc": ["rock", "pop"]
                },
                "targetId": "mrec"
            },{
                "disablePsa": true,
                "invCode": "mywebsite.de-amp-ressort_story-mrec",
                "sizes": [[300, 250]],
                "keywords": {
                    "misc": ["rock", "pop"]
                },
                "targetId": "mrec_2"
            }]
        }'
        rtc-config='{
            "vendors": {
                "criteo": {
                    "ZONE_ID": "%PROVIDED BY MediaImpact%", 
                    "LINE_ITEM_RANGES": "0..10:0.01;10..25:0.05;25..50:0.10;50..100:0.25",
                    "PUBLISHER_SUB_ID":"testid"
                }
            },
            "timeoutMillis": 1000
        }'
></amp-ad>

Teads

Hardcoding method

As we are fully integrated with Google AMP, the Teads AMP tag has the following format when hardcoded:

<amp-ad width=300 height=1 noloading type="teads" data-pid="PAGE_ID" layout="responsive"> 
        <div placeholder></div> 
</amp-ad>

The only parameter to update is the data-pid = PAGE_ID field.

AMP Script Parameters:

  • width & height = format size – FIXED
  • type = "teads" = AMP ID – FIXED
  • data-pid = PAGE ID (PID) – MODIFIABLE
  • layout = "responsive" = Responsive Template – FIXED

In order to center the player in landscape mode, add the following CSS parameter to the AMP CSS container (amp-custom): amp-ad { margin: auto }

AMP Tag location One of the limits within an AMP environment is the effective sandboxing of all iFrames. This means we are unable to dynamically select the best location for our player and it is up to you, as a publisher, to insert the element in the correct location on the page where the inRead player should be initialized.

(Excerpt from the teads manual)

Notes

  • We're using the regular integration of Xandr full md found here
  • The standard size for Ads on AMP ist 300x250 (mrec), if you need extra sizes please contact us.
  • data-target is the placement name. e.g. for Medium Rectangle should be "mrec"
  • data-code / JSON:
    • member is a static value, please don't change it
    • Please don't forget to send us a fallback ad in order to avoid white spaces on you AMP Site. If you don't have any fallback ad please change disablePsa="true" to disablePsa="false", after doing it you will get fallback ads from Xandr.
    • invCode is a combination of the following information:
      • Website --> mywebsite.de
      • amp --> it is the platform, please don't change it
      • ressort_story --> it is the adlevel "Vertaggung" from you CMS. It is the same value used for the other platforms.
      • Placement --> actually we just use the placement "mrec" for AMP, if you need of them please contact us.
    • sizes ist the size of the ad. Actually ist the same size of the Amp container
    • keywords --> if you want to send keywords, please us the object "kw_misc" and place every keyword comma separated.
    • targetId has the same value of data-target.

Help

If you have some question don't hesitate to contact us:

Gertrud Kolb

Head of AdSolutions Corporate Digital Platforms

Tel: +49 30 2591 72504 gertrud.kolb@spring-media.de

Carlos Bracho

Senior Ad Technology Lead Corporate Digital Platforms

Tel: +49 30 2591 76784 Mobile: +49 151 44619807 carlos.bracho@axelspringer.de

Ad Technology Team adtechnology@axelspringer.de