amp-dynamic-css-classes는 body 태그에 동적 클래스를 추가합니다. 이 글에서는 이 태그에 대해 자세히 알아보겠습니다.
amp-dynamic-css-classes로 작업하려면 다음 스크립트를 추가해야 합니다.
<script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>
amp-dynamic-css-classes에서 처리하는 두 가지 중요한 클래스가 있습니다.
- amp-referrer-*
- amp-viewer
각각에 대해 자세히 논의하겠습니다.
Amp-Referrer-*
이 클래스는 사용자가 오는 방법에 따라 설정됩니다. 사용자가 구글에서 오는 경우 구글과 관련된 리퍼러 클래스가 설정됩니다. Twitter와 Pinterest에도 동일하게 적용됩니다.
리퍼러 유형에 따라 클래스를 사용할 수 있습니다.
예를 들어 구글의 경우 사용자가 구글 검색 엔진에서 amp 페이지를 클릭하면 다음 클래스가 추가됩니다.
- amp-referrer-www-google-com
- amp-referrer-google-com
- amp-referrer-com
이와 마찬가지로 Twitter, Pinterest, Linkedin 등에서 사용할 수 있는 클래스가 있습니다.
Amp-Viewer
Amp 뷰어는 기본적으로 구글 캐시에서 세부 정보를 가져오기 위해 amp URL을 변경합니다. 구글 검색에서 무언가를 검색하면 표시되는 캐러셀에 모든 amp 페이지가 있습니다.
클릭하면 구글 URL을 접두사로 사용하는 URL로 리디렉션됩니다. amp-viewer 클래스는 사용자가 amp-viewer에서 동적 클래스를 사용하여 페이지를 볼 때 설정됩니다.
amp 페이지를 클릭하면 주소표시줄에 표시되는 URL은 다음과 같습니다.
https://www.google.com/amp/s/m.ytn.co.kr/news_view.amp.php%3fparam=0103_202105120551045943
이제 amp-dynamic-css-classes의 작동을 확인하는 예제를 살펴 보겠습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Dynamic Css Classes</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-dynamic-css-classes.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize
.min.css">
<style amp-custom>
body:not(.amp-referrer-pinterest-com) .if-pinterest,
body:not(.amp-referrer-ampbyexample-com) .if-ampbyexample,
body:not(.amp-referrer-google-com) .if-google,
body:not(.amp-referrer-twitter-com) .if-twitter,
body:not(.amp-referrer-linkedin-com) .if-linkedin,
body:not(.amp-referrer-localhost) .if-localhost {
display: none;
}
body:not(.amp-viewer) .if-viewer,
body.amp-viewer .if-not-viewer {
display: none;
}
p {
padding: 1rem;
font-size:25px;
}
</style>
</head>
<body>
<h3>Google AMP - Dynamic Css Classes</h3>
<div>
<p class="if-pinterest">You were referred here or embedded by Pinterest!</p>
<p class="if-twitter">You were referred here or embedded by Twitter!</p>
<p class="if-google">You were referred here or embedded by Google!</p>
<p class="if-ampbyexample">You came here directly! Cool :)</p>
<p class="if-localhost">You came here directly! Cool :)</p>
</div>
<div>
<p class="if-not-viewer">Hey! You are not coming from amp viewer</p>
<p class="if-viewer">Hey! From amp viewer.</p>
</div>
</body>
</html>