이 예에서 크기가 300x250, 728x90, 750x200인 광고 소재는
있습니다. Ad Manager에서는 이러한 크기와 일치하는 광고 소재만 고려합니다.
광고 선택 프로세스 중에 선택할 수 있습니다.
CSS의 광고 슬롯 <div>에 크기가 지정되지 않은 경우
GPT는 자동으로 가장 짧은 광고 크기 및
display()가 호출될 때 선언된 높이와 1픽셀보다 선언된 가장 넓은 너비입니다.
이 경우에는 750x90입니다. 그러나 이러한 크기 조정은
페이지의 다른 콘텐츠가 로드되어
콘텐츠가 이동하게 됩니다 피해야 할 사항
CSS를 사용하여 공간을 예약하려면
레이아웃 변경 최소화 가이드를 참조하세요.
여러 크기의 광고를 작업하는 경우
지정된 최대 크기의 광고를 지원해야 합니다. 이렇게 하면 광고 소재가
잘려진 부분이 있을 수 있습니다.
유동적인 광고
유동적인 광고는 고정된 크기가 없으며 광고 소재 콘텐츠에 맞게 조정됩니다.
디스플레이. 현재 유일하게 유동적인 광고는 네이티브 광고입니다.
Ad Manager에서
지원되는 유형은 다음과 같습니다
표시 영역이 1024x768 이상이면 750x200 또는 728x90 크기의 광고를 게재할 수 있습니다.
1024x768 > 표시 영역이 640x480보다 크면 300x250 크기의 광고를 게재할 수 있습니다.
표시 영역이 < 640x480, 광고를 게재할 수 없습니다.
GPT는 브라우저가
표시 영역의 크기를 감지하여
적합한 가장 큰 매핑을 사용합니다. 가장 큰
GPT 매핑은 먼저 너비를 고려한 다음 높이 (예: [100,
10] > [10, 100]). 매핑에 오류가 발생하거나 표시 영역이
크기를 결정할 수 없으면 defineSlot()에 지정된 크기가 사용됩니다.
[null,null,["최종 업데이트: 2024-08-21(UTC)"],[[["\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 ]"]]
