cxf-ad-banner
The cxf plugin for displaying ad banners.
Where we control the place and rules for displaying the ads.
Tracking logic
https://docs.google.com/spreadsheets/d/17czPDnQWeU5jY1f_u1TwUiW9Bt3zKB7sCnGVvlDrEmA/edit?pli=1#gid=877512723
Plugin flow
flowchart TB
subgraph "index.js"
initJSONLogic
initTrackingModule
indexFNinitGameController(initGameController)
end
subgraph "game-controller.js"
gcInit(init)
registerEvents
gcLogin(loginHandler)
subgraph paymentHandler
userPaid{validatePayment}
end
end
indexFNinitGameController --> gcInit
gcInit --> registerEvents
registerEvents --- gcLogin
registerEvents --- paymentHandler
userLogin([userLogin]) -- check JSON rules /over level10 etc/ --> gcLogin
gcLogin --> initBannerAd
subgraph adManager
subgraph initBannerAd
googletag{googletag}
googletag -- yes --> enableAd
googletag -- no --> loadGoogleTagSDK
end
addGoogleTagLogic --- initGPTLogic
addGoogleTagLogic --- startObserverForGameWidth
disableAd
end
subgraph htmlManager
addBannerDiv
end
loadGoogleTagSDK --> addGoogleTagLogic
addGoogleTagLogic --- addBannerDiv
userUpdatePay([userUpdatePay]) --> paymentHandler
userPaid -- pass JSON rule --> disableAd
click loadGoogleTagSDK "https://developers.google.com/publisher-tag/guides/get-started" "Google Publisher Tags"
Google Publisher Tags documentation
how-to
enable DEBUG messages
Debug messages are implemented via Debug lib
For enable CXF-AD-BANNER debug messages just run in a browser console
localStorage.debug = 'CXF-AD-BANNER:*'
Test locally
To be able to test the project locally the easiest way is by using a proxy and forcing a redirect of the deployed code to the one compiled locally. To do that follow these steps:
-
Run the local project by running the npm run serve
in the root folder
It's going to give you a local link where the project is running. e.g. http://localhost:4005/index.js
-
Open the game (either staging or live)
-
Open the network tab in the dev tools and search for the json file where all the plugins are being listed (usually they are called {game}.json, e.g. empire.json or bigfarm.json)
the content of the file will be something like this:
[
"<script src='https://hotpkg.com/@goodgamestudios/cxf-announcements@0.19.2/dist/announcements.js'></script>",
"<script src='https://hotpkg.com/@goodgamestudios/cxf-events@1.21.1/dist/bigfarm.js'></script>",
"<script src='https://hotpkg.com/@goodgamestudios/cxf-webshop@6.20.0/dist/webshop-cxf.js'></script>",
"<script src='https://hotpkg.com/@goodgamestudios/cxf-tracking@production'></script>",
"<script src='https://hotpkg.com/@goodgamestudios/cxf-error-handler@production'></script>",
"<script src='https://hotpkg.com/@goodgamestudios/cxf-dialog@1.6.1'></script>",
"<script src='https://hotpkg.com/@goodgamestudios/cxf-fullscreen@production'></script>",
"<script src='https://hotpkg.com/@goodgamestudios/cxf-shop-zipcodes@production'></script>",
"<script src='https://hotpkg.com/@goodgamestudios/cxf-ia@production/dist/bigfarm.js'></script>",
"<script src='https://hotpkg.com/@goodgamestudios/cxf-ad-banner@production/dist/index.js'></script>"
]
-
Identify the ad banner plugin link (in this case the last one), copy it and enter this link in the browser (it should redirect to another link and display a script code)
the final link in this case will be something like this:
https://cdn.jsdelivr.net/npm/@goodgamestudios/cxf-ad-banner@1.8.3/dist/index.js
-
Finally you can use this last link in the proxy application (e.g. https://app.requestly.io/) and point it to your local script
-
Now just reload the game page and your local script will be running
Deployment
The project is being deployed to npm, so pay attention to not run the incorrect deploy script
It's already being deployed in the pipeline, so you might prefer to deploy there than running this local scripts:
ci:deploy:dev
ci:deploy:staging
ci:deploy:production