Რა არის iFrame lobby და როგორ უნდა ინტეგრირდეს იგი
რა არის iFrame lobby
iFrame lobby არის ინტეგრირებული ლობის მოდული (თამაშების კატალოგი, ბანერები, კატეგორიები, ძებნა, სწრაფი დასაწყისი), რომელიც მასპინძლობს შინაარსის/აგრეგატორის მიმწოდებელს და ოპერატორის გვერდის შიგნით ნაჩვენებია '
მთავარი იდეა: ოპერატორი არ წერს ლობის ნულიდან, მაგრამ აკავშირებს მზა, იღებს სწრაფ დროულ ბაზარს, ჯვარედინი ბრაუზერის მხარდაჭერას და განახლებებს მისი მხრიდან გამოშვების გარეშე.
როდესაც ეს მართებულია
ახალი პროვაიდერის/ვერტიკალური სწრაფი გაშვება.
ჩვენ გვჭირდება ერთიანი ფანჯარა რამდენიმე ქვეყნის/ბრენდისთვის.
ოპერატორის შეზღუდული ფრონტის გუნდი.
დადებითი და დადებითი
უპირატესობები: სიჩქარე, ერთი კოდის ბაზა, ახალი პროდუქტების ავტომატური დატვირთვა, პროვაიდერის შეთანხმებული ანალიტიკა.
უარყოფითი მხარეები: ნაკლები კონტროლი პიქსელის სრულყოფაზე, დამოკიდებულება გამყიდველის აფთიაქზე, ტრეკინგის დახვეწილობაზე, SEO შეზღუდვებზე (შინაარსი iframe- ში არ არის ინდექსირებული, როგორც თქვენი DOM ნაწილი).
ძირითადი არქიტექტურა
1. Front (ოპერატორი): გვერდი '/casino 'სლოტებით, რომელშიც „
2. Auth განლაგება: მოკლემეტრაჟიანი 'sessionToken' (JWT/opaque) წარმოიქმნება ოპერატორის უკანა პლანზე.
3. Provider lobby: ხელმძღვანელობს ნიშანს, ქმნის ენას/ვალუტას/ლიმიტებს, ატარებს თამაშებს და ბანერებს.
4. Messaging საბურავი: 'window. postMessage 'გვერდსა და მოვლენებს შორის (ბალანსი, თამაშის დაწყება, სალაროს გახსნა და ა.შ.).
5. Cashier/KYC/RG: გამოიძახეს ოპერატორის მხარეს (iframe- ს გარეთ), მაგრამ ლობიდან ხელმისაწვდომია გუნდების მიერ.
მინიმალური განხორციელების მოთხოვნები
საავტორო უფლებები: მოკლე დონის ნიშნები (1-15 წთ) + გამჭვირვალე როტაცია (მსუბუქი როტაცია).
უსაფრთხოება: CSP, 'sandbox' და ზუსტი 'allow' iframe- ისთვის, მკაცრი ფილტრაცია 'postMessage'.
სტაბილურობა: მოვლენების კონტრაქტი (ვერსია, backward-compat), შეცდომები.
UX: ადაპტირებული ბადე, სწრაფი ნავიგაცია, ბარათის წინასწარ დატვირთვა, სკელეტონის ეკრანები.
ანალიტიკა: ერთიანი მოვლენები (impression, click, launch, error), mapplitude/GA4.
ინსტალაციის მაგალითი (HTML + უსაფრთხოება)
html
<iframe id="providerLobby"
src="https://lobby. example. com/embed? brand=ACME&lang=ru¤cy=EUR&token={{SESSION_TOKEN}}"
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
allow="fullscreen; autoplay; encrypted-media; clipboard-read; clipboard-write"
style="width:100%;height:100vh; border:0; display:block; ">
</iframe>
განმარტებები:
- 'sandbox' - ჩართეთ მხოლოდ საჭირო დროშები. ნუ მოდით 'allow-top-navigation' საჭიროების გარეშე.
- 'allow' - დაამატეთ ფიჩები შეგნებულად; 'payment' მხოლოდ იმ შემთხვევაში, თუ ნამდვილად გამოიყენება.
- 'referrpolicy' - შეზღუდეთ პარამეტრების გაჟონვა.
Content-Security-Policy:
default-src 'self';
frame-src https://lobby. example. com;
script-src 'self' https://lobby. example. com 'unsafe-inline';
img-src 'self' https://lobby. example. com data:;
connect-src 'self' https://api. example. com https://lobby. example. com;
X-Frame-Options თქვენი გვერდებისთვის ხელს არ უშლის თქვენ ინტეგრირებას. პროვაიდერი შენთან არის და არა პირიქით.
ნიშნის წარმოება უკანა პლანზე (მაგალითად, Node/Express)
js import jwt from "jsonwebtoken";
import express from "express";
const app = express();
app. get("/lobby-token", (req, res) => {
const payload = {
sub: req. user. id, brand: "ACME", currency: "EUR", lang: "ru", ts: Date. now()
};
const token = jwt. sign(payload, process. env. LOBBY_JWT_SECRET, {
algorithm: "HS256", expiresIn: "10m", issuer: "acme-casino", audience: "lobby-provider"
});
res. json({ token });
});
საუკეთესო პრაქტიკა: მოკლე TTL, ველების აუდიტი, გასაღებები HSM/Secrets Manager- ში, როტაცია 'kid'.
შეტყობინებების გაცვლა: ღონისძიების ხელშეკრულება
გამოიყენეთ 'PostMessage' whitelisting წყაროსა და მიკროსქემის შესაბამისობით.
js
//მასპინძელი (ოპერატორი)
const iframe = document. getElementById("providerLobby"). contentWindow;
const LOBBY_ORIGIN = "https://lobby. example. com";
window. addEventListener("message", (e) => {
if (e. origin!== LOBBY_ORIGIN) return;
const { type, payload } = e. data {};
switch (type) {
case "lobby:ready":
//ჩვენ გამოგიგზავნით საწყის მონაცემებს iframe. postMessage({ type: "host:context", payload: {
balance: 125. 40, kycStatus: "verified", limits: { betMax: 100 }
}}, LOBBY_ORIGIN);
break;
case "lobby:resize":
document. getElementById("providerLobby"). style. height = payload. height + "px";
break;
case "lobby:openCashier":
OpenCashier () ;//თქვენი break ფუნქცია;
case "lobby:launchGame":
launchGame(payload. gameId) ;//შეუძლია გახსნას ახალი ფანჯარა/rout break;
case "lobby:requestTokenRefresh":
refreshLobbyToken(). then(t =>
iframe. postMessage({ type: "host:newToken", payload: { token: t } }, LOBBY_ORIGIN)
);
break;
}
});
სტანდარტული მოვლენები (ნაკრების მაგალითი):
- От лобби → хосту: `lobby:ready`, `lobby:resize`, `lobby:openCashier`, `lobby:openRG`, `lobby:launchGame`, `lobby:track`, `lobby:requestTokenRefresh`, `lobby:error`.
- მასპინძელი ლობიდან: 'host: context' (ბალანსი, ლოკალი, ლიმიტები), 'host: newToken', 'host: balvesToundate', 'host: navigation'.
ლობის თამაშის დაწყება
ორი მიდგომა:1. იგივე iframe- ის შიგნით უფრო სწრაფია, მაგრამ ნაკლები კონტროლი და უფრო რთულია ტრეკინგი.
2. ცალკეული რუთი/ფანჯარა უფრო ადვილია, ვიდრე მეტრიკა, შეგიძლიათ ჩამოკიდოთ თქვენი ოვერლეები (RG/limites), უმჯობესია თავსებადობა ვებ - ვიზასთან.
მინიმალური მარშრუტი:- ლობი აგზავნის 'lobby: launchGame {gameID'.
- მასპინძელი წარმოქმნის 'gameToken' თავის ზურგზე და ხსნის '/game/: id? token=…`.
- თამაში იღებს ნიშანს, უხელმძღვანელებს, იწყება განაკვეთების სესიები.
UX და შესრულება
dapithe: 3-5 სვეტი დესკტოპზე, 2 - ტაბლეტი, 1 - მობილური; დააფიქსირეთ ბარათების სიმაღლე.
ჩონჩხი და ლაზი-ლოდინგი (სურათები' loading =“ lazy“',' fetchpriority =“ დაბალი“ გალერეებისთვის).
სწრაფი ძებნა და ფილტრები: გახსოვდეთ შერჩეული ჭდეები '? query '/' localStorage'.
კლიშეები ბარათზე: დაწკაპუნების ზონა - 44px; კლავიატურის მხარდაჭერა (A11y).
ბანერების პლეიშოლდერები: ისე, რომ ლაიუტი არ „გადახტა“.
IOS მედია პოლიტიკა: ვიდეო/აუდიო პროგრამა მოითხოვს მომხმარებლის ჟესტს; გაითვალისწინეთ ეს დემო ვიდეოებში.
მოთამაშის შესაბამისობა და პასუხისმგებლობა (RG)
Limites და Timauts: მხარდაჭერა მოთამაშის ამჟამინდელი ლობის ლიმიტების ჩვენებისთვის, მასპინძლის მხარეზე ცვლილების ფორმის გამოწვევა.
თვითკმაყოფილება: 'lobby მოვლენა: OpenRG' - ჩვენ ვხსნით თქვენს RG მოდულს iframe- ს გარეთ.
იური - ბანერები და 18 +: მასპინძლის მხარეს და არა ლობის შიგნით, ისე რომ არ იყოს დამოკიდებული პროვაიდერის შემოქმედებაზე.
GDPR/Cooks: lobby - მესამე მხარე, იფიქრეთ cookie-consent- სა და იურიდიულ ჩარჩოზე (კონტრაქტული ინოვაცია/ლეგიტიმური ინტერესი).
ლოკალიზაცია და ბრენდინგი
გადაიტანეთ ენა/ვალუტა/რეგიონი „src“ ან/და 'host: context'.
ნებადართულია თეთრი-ლაბელის ცვლადი: ფერები, ლოგოები, შრიფტები.
შეინახეთ „არჩეული/ბოლოდროინდელი“ ბლოკები ოპერატორის მხარეს ისე, რომ გამყიდველის შეცვლისას არ დაკარგოთ მონაცემები.
ანალიტიკა და მეტრიკა
ტრეკინგის ფენა (მაგალითი):- `lobby_impression`, `tile_view`, `tile_click`, `search_use`, `category_change`, `launch_game`, `error_view`.
- TTFB-Bet (ლობის შესვლის დროიდან პირველ კურსამდე), CR _ deposit-launch, CTR კატეგორიები/ძებნა, საშუალო ნახვის სიღრმე.
Iframe- დან მოვლენები გაერთიანებულია; თავიდან აიცილეთ „ორმაგი აღრიცხვა“ პროვაიდერის პიქსელებით.
ტესტის განხორციელების გეგმა
1. უსაფრთხოება: CSP შემოწმება, დამატებითი 'allow' და 'sandbox' დროშების არარსებობა, 'postMessemass- ის შესაბამისობა. origin`.
2. სესიები: ნიშნის გადინება, შერყევა, ქცევა 401/403.
3. Resaise: სწორი სიმაღლე მობილური/ვებ-ვიუზე (Android/iOS).
4. სალარო/KUS: მოდულების გახსნის/დახურვის სცენარები ლობის მოვლენებზე.
5. პროვაიდერის მიუწვდომლობა: დროის გადაღება, დანამატის ჩვენება და ჭიდაობა.
6. RG ლიმიტები: თამაშის დაწყების ჩვენება და აკრძალვა დაბლოკვის დროს.
7. იდაყვის/ვალუტის გადართვა: ფრენაზე და გადატვირთვისას.
8. ანალიტიკა: მასპინძელი მრიცხველების შედარება.
ტიპიური შეცდომები (ანტი-ნიმუშები)
ჩამოკიდეთ 'მესიჯის' ჩამონათვალი 'origin' შემოწმების გარეშე.
მიეცით iframe სრული წვდომა ('allow-same-origin allow-top-navigation-by-user-activation' „მხოლოდ იმ შემთხვევაში“).
გრძელი ნიშნები როტაციის გარეშე.
დაეყრდნო SEO- ს ლობის შინაარსს.
აურიეთ მოთამაშის ქეში და პროვაიდერის კატალოგის ქეში (არღვევს პერსონალიზაციას).
დაიწყეთ თამაში იმავე iframe- ის შიგნით, ტრეკინგისა და RG- ოვერლის კონტროლის გარეშე.
ინტეგრაციის სია iFrame lobby
- შეთანხმდნენ მოვლენების ხელშეკრულებაზე (ვერსია, ტიპები, სქემები).
- გააცნობიერა/lobby-token ერთად TTL 15 წუთი და როტაცია.
- ჩამოაყალიბა CSP, 'sandbox', 'allow', 'referrerpolicy'.
- cashier/KYC/RG დაკავშირებულია 'OpenCashier '/' OpenRG' მოვლენებთან.
- ფიქრობდნენ fallback პროვაიდერის დეგრადაციის დროს.
- შემცირდა ლოკალიზაცია, ვალუტა, ასაკობრივი ბანერები.
- მათ მოაწყეს ანალიტიკა (მომხმარებელთა/სესიის გავლით).
- ჩაატარა ჯვარედინი და მობილური ვებ - ტესტები.
- აღწერილი იყო runbook ინციდენტები და საკონტაქტო წერტილები გამყიდველთან.
iFrame-lobby არის სწრაფი და პრაგმატული გზა თამაშების კატალოგის გასაფართოებლად და დროის ბაზარზე შემცირების მიზნით. ჯანსაღი ინტეგრაციის გასაღებია მკაცრი უსაფრთხოება, მოვლენების მკაფიო კონტრაქტი, საიმედო ავტორიზაცია და გააზრებული UX/ანალიტიკა ოპერატორის მხარეზე. ერთხელ ამის გაკეთების შემდეგ, ახალ მომწოდებლებთან ინტეგრაციის მასშტაბები თითქმის „დაჭერით“.