@goodgamestudios/cxf-banners

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:

1. 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

2. Open the game (either staging or live)

3. 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>"
]

4. 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

5. Finally you can use this last link in the proxy application (e.g. https://app.requestly.io/) and point it to your local script

6. 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