Кнопки AMP по местоположению ⇐ CSS

[Anonymous]

Я работаю над проектом (веб-сайт AMP), в котором у меня есть кнопки, которые должны отображаться только в определенных местах и ​​быть скрытыми в других местах. Однако я изо всех сил пытаюсь сделать так, чтобы в каждом из выбранных мест были разные ссылки. Даже GPT-4 не смог решить эту проблему для меня. Вот код, который я сейчас использую:
Во-первых, вот мои настройки CSS и HTML:

Код: Выделить всё

@media only screen and (max-width: 768px) {
.iframe--vGcGG {
width: 100% !important;
height: 100vw !important;

transform-origin: center center;
border: 4px solid #e22174;
}
}
.iframe--vGcGG {
border: 4px solid #e22174;
}


123



[url=https://123]play[/url]



.geo-button {
display: none;
margin: 10px 0;
}
body.amp-geo-group-KZ .geo-button,
body.amp-geo-group-AZ .geo-button,
body.amp-geo-group-RU .geo-button {
display: block;
width:100% !important;;
text-align:center !important;;
}




{
"ISOCountryGroups": {
"KZ": ["KZ"],
"AZ": ["AZ"],
"RU": ["RU"],
"default": ["default"]
}
}

Я пытался реализовать функциональность кнопок с помощью AMP, но столкнулся с проблемой, когда кнопки исчезали и отображались неправильно. Вот скрипт и дополнительная конфигурация AMP, которые я использую:
Проблема в том, что кнопки должны отображаться для разных стран, но иногда они отображаются неправильно (все их) или не иметь вообще. Может ли кто-нибудь помочь мне понять, что я делаю неправильно? Мы будем очень признательны за любые рекомендации о том, как правильно отображать разные кнопки для разных мест с правильными ссылками!

Подробнее здесь: https://stackoverflow.com/questions/786 ... y-location