[null,null,["最后更新时间 (UTC)：2024-08-21。"],[[["\u003cp\u003eAd slots must define eligible ad sizes, which can be fixed, multi-size, fluid, or responsive to the viewport.\u003c/p\u003e\n"],["\u003cp\u003eFixed-size ads require a defined \u003ccode\u003e<div>\u003c/code\u003e element to prevent layout shifts, while multi-size ads need layout flexibility to accommodate the largest size.\u003c/p\u003e\n"],["\u003cp\u003eFluid ads, primarily used for native ads, automatically adapt to creative content but can impact performance and require careful consideration.\u003c/p\u003e\n"],["\u003cp\u003eResponsive ads tailor ad sizes to different devices by mapping viewport sizes to eligible ad sizes, offering greater control over ad delivery.\u003c/p\u003e\n"],["\u003cp\u003eAd Manager's ad selection process considers only creatives matching the defined ad sizes, ensuring relevant ad delivery.\u003c/p\u003e\n"]]],["Ad slots require specified ad sizes, varying by ad type and slot flexibility. Fixed-size ads use a single size, like `300x250`. Multi-size ads support various sizes, such as `300x250`, `728x90`, and `750x200`, with Ad Manager selecting matching creatives. Fluid ads adapt to creative content, often used for native ads. Responsive ads define different creative sizes based on viewport dimensions, mapping viewport sizes to ad sizes for various devices, and will adapt dynamically based on the browser's detected size.\n"],null,["# Ad sizes\n\nEvery ad slot you define must specify the ad size(s) eligible to serve in that\nslot. The way ad sizes are specified varies depending on the type of ads to be\ndisplayed, as well as the size and flexibility of the ad slots themselves.\n\nIn some cases, ad size might be overridden at the line item level within\nGoogle Ad Manager. Visit the [help center](//support.google.com/admanager/answer/3187916) to learn\nmore.\n\nFull code for the examples included in this guide can be found on the [ad\nsizes](/publisher-tag/samples/ad-sizes) sample page.\n\nFixed-size ads\n--------------\n\nYou can define an ad slot with a single fixed size. \n\n googletag\n .defineSlot(\"/6355419/Travel/Europe/France/Paris\", [300, 250], \"fixed-size-ad\")\n .addService(googletag.pubads());\n\nIn this example, only creatives with size `300x250` will be served.\n\nKey point: When working with fixed-size ads, we strongly recommend that you\ndefine the size of the `\u003cdiv\u003e` element where the creative will render. Since\ncreatives are often rendered asynchronously, they might cause other elements on\nthe page to shift if insufficient space is reserved for them.\n\nMulti-size ads\n--------------\n\nIf an ad supports multiple sizes, provide a list of supported sizes when\ndefining the ad slot. \n\n googletag\n .defineSlot(\n \"/6355419/Travel/Europe\",\n [[300, 250], [728, 90], [750, 200], \"fluid\"],\n \"multi-size-ad\",\n )\n .addService(googletag.pubads());\n\nIn this example, creatives with sizes `300x250`, `728x90`, and `750x200` can be\nserved. Ad Manager only considers creatives matching these sizes\nduring the [ad selection process](//support.google.com/admanager/answer/1143651).\n\nIf dimensions are not specified for the ad slot `\u003cdiv\u003e` in CSS,\nGPT automatically sets the dimensions equal to the shortest\ndeclared height and widest declared width over 1px when `display()` is called.\nIn this case, that would be `750x90`. However, this sizing might occur after\nother content on the page has loaded, causing that content to shift. To avoid\nlayout shifts, reserve space using CSS as shown in the\n[minimize layout shift](/publisher-tag/guides/minimize-layout-shift) guide.\n\nWhen working with multi-size ads, ensure that your layout is flexible enough to\nsupport an ad with the largest size specified. This will avoid creatives being\ninadvertently cropped.\n\nFluid ads\n---------\n\nFluid ads have no fixed size, but rather adapt to fit the creative content they\ndisplay. [Native ads](//support.google.com/admanager/answer/6366845) are currently the only fluid ad\ntype supported by Ad Manager.\n\nWhen working with fluid ads, a custom `fluid` size might be specified. \n\n googletag\n .defineSlot(\"/6355419/Travel\", [\"fluid\"], \"native-ad\")\n .addService(googletag.pubads());\n\nIn this example, the ad slot will have the width of its parent container and\nresize its height to fit the creative content. The steps GPT\ntakes to resize the ad slot are as follows:\n\n1. Ad response is received.\n2. Creative content is written into an iframe, with initial height set to `0px` and width set to `100%`.\n3. Once all resources in the iframe have finished loading, the creative is made visible by setting the height of the iframe equal to the height of the iframe's `\u003cbody\u003e` element.\n\n| Due to the flexible nature of fluid ads, there are a number of caveats to be aware of, including:\n|\n| - Fluid ads will generally take longer to become visible than ads with a fixed size.\n| - Fluid ads might trigger a reflow of page content when they are resized, which can [negatively affect\n| performance](/speed/docs/insights/browser-reflow).\n| - Fluid ads might render incorrectly if an ancestor element of the creative iframe has a fixed height less than that of the fluid creative content.\n\nResponsive ads\n--------------\n\nResponsive ads extend multi-size ads and allow you to specify the size of the\ncreatives to serve based on the size of the viewport of the browser making the\nrequest. This functionality can be used to control the size of creatives served\nto different types of devices (desktop, tablet, mobile, etc.).\n\nThis is accomplished by defining a mapping between viewport size and ad size,\nthen associating that mapping with an ad slot. \n\n```javascript\nconst responsiveAdSlot = googletag\n .defineSlot(\n \"/6355419/Travel/Europe\",\n [\n [300, 250],\n [728, 90],\n [750, 200],\n ],\n \"responsive-ad\",\n )\n .addService(googletag.pubads());\n\nconst mapping = googletag\n .sizeMapping()\n .addSize(\n [1024, 768],\n [\n [750, 200],\n [728, 90],\n ],\n )\n .addSize([640, 480], [300, 250])\n .addSize([0, 0], [])\n .build();\n\nresponsiveAdSlot.defineSizeMapping(mapping);\n```\n\nIn this example, the mapping specifies:\n\n- When viewport \\\u003e= `1024x768`, ads sized `750x200` or `728x90` can serve.\n- When `1024x768` \\\u003e viewport \\\u003e= `640x480`, ads sized `300x250` can serve.\n- When viewport \\\u003c `640x480`, no ads can serve.\n\nGPT will detect the size of the viewport of the browser making\nthe request and use the largest mapping that fits. To determine the largest\nmapping GPT first considers width, then height (i.e., `[100,\n10]` \\\u003e `[10, 100]`). In the event of an error in the mapping or if the viewport\nsize can't be determined, the sizes specified in `defineSlot()` will be used.\n\nThe mapping is then associated with an ad slot by calling the\n[Slot.defineSizeMapping()](/publisher-tag/reference#googletag.Slot_defineSizeMapping) method. This method\naccepts an array of mappings in the following format: \n\n```javascript\n[\n [\n [viewport-width-1, viewport-height-1],\n [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]\n ],\n [\n [viewport-width-2, viewport-height-2],\n [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]\n ],\n ...\n]\n```\n\nThe order of viewport sizes within this array defines their priority. The\n[`SizeMappingBuilder`](/publisher-tag/reference#googletagsizemappingbuilder) used in the\n[example above](#responsive-example) is a convenient way to generate an array of\nthis format, with sizes automatically ordered from largest to smallest. In that\nexample, the output of\n[`SizeMappingBuilder.build()`](//developers.google.com/publisher-tag/reference#googletag.SizeMappingBuilder_build) is: \n\n [\n [[1024, 768], [[750, 200], [728, 90]]],\n [[640, 480], [[300, 250]]],\n [[0, 0], []]\n ]"]]
