Add custom html to the index generated - Game Distribution compatibility

Hi mates, I’m trying to make an extension to integrate Game Distribution into my game but as request by Game Distribution an script must be added to the head of the index.html and a div line into body.

I managed to do it adding it after export the game but what i want to know if there is a way to add those lines from the events editor inside GDevelop 5, so I can create some sort of extension to reuse in other games.

This is how it looks like.

All previous scripts from GDevelop…

This is a script requested by Game Distribution to be added on the head

< script src=“//acdn.adnxs.com/cmp/cmp.complete.bundle.js” async>< /script>

< /head>
< body>

This is the div tag to be added in body requested by Game Distribution

< div id=“container”>

This is the script must be added requested by Game Distribution

< script>

 window["GD_OPTIONS"] = {
    debug: false,
    gameId: "hklgjgkggggkgiylgukgykguug",
    advertisementSettings: {
      autoplay: true
    },
    onEvent: function (event) {
      switch (event.name) {
        case "SDK_GAME_START":
          // ...
          break;
        case "SDK_GAME_PAUSE":
          // ...
          break;
        case "SDK_READY":
          // ...
          break;
        case "SDK_ERROR":
          // ...
          break;
        case "SDK_GDPR_TRACKING":
          // ..
          break;
        case "SDK_GDPR_TARGETING":
          // ..
          break;
        case "SDK_GDPR_THIRD_PARTY":
          // ..
          break;
      }
    }
  };
  (function (d, s, id) {
    var js,
      fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id))
      return;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://html5.api.gamedistribution.com/main.min.js";
    fjs
      .parentNode
      .insertBefore(js, fjs);
  })(document, "script", "gamedistribution-jssdk");

(function() {
    //Initialization
    var game = new gdjs.RuntimeGame(gdjs.projectData, {});

    //Create a renderer
    game.getRenderer().createStandardCanvas(document.body);

    //Bind keyboards/mouse/touch events
    game.getRenderer().bindStandardEvents(game.getInputManager(), window, document);

    //Load all assets and start the game
    game.loadAllAssets(function() {
        game.startGameLoop();
    });
})();

< /script >

< /body >
< /html >

I’m not so techie, but I don’t think it could be added as an extension. I bet it would take a change of the source code.

But, you could probably make some wrapper script with your favorite scripting language to add these automatically after export, outside GDevelop. Don’t ask me for details :see_no_evil:

Oh sure what I made is to edit the index.html in the runtime folder of GDevelop 5 but my question is if there is a way to do it from inside GD so i don’t need to edit the index every time I export the game.
It’s ok, until I figured out i keep doing it this way.
Thanks anyway.

Let’s move this to #gdevelop-general:feature-requests and get some tech input from @Bouh or @arthuro555 as to if/how we could integrate this.

Sure if some of then can do an extension it would be awesome.
Since Game Distribution only request some minor modifications I think that some with more knowledge of JavaScript can do an extension easily.

What I try is to create an extension where the user just write the Game ID and the rest of the code requested by them is included, but I don’t know how to code JavaScript in GDevelop 5, sorry.

Can’t you just put all of this in a JS event? You can use the DOM api to add the script tags you need and just put the js code directly in it too.

If you really want to modify the HTML, you can’t do it in extensions and we probably won’t add that either. You can try to use GDExporter, a CLI GDevelop game exporter I made that supports plugins, and make a plugin to do that. See this one as example of injecting a script tag into the index.html

Sure there is a way to do it with JS Events, but the problem is I don’t know how to code JavaScript in GDevelop there is no tutorials and the documentation i found is for older versions of GDevelop so is impossible for me to learn how to.
Thanks anyway.
I tried but with no luck, I saw the integration of Game Distribution in Construct 3 and Defold but the javaScript is different that the GDevelop so I messed up and I give up.

Well you’re not using any GDevelop APIs, so it shouldn’t be an issue. Additionally, there do is API docs for JS events: https://docs.gdevelop-app.com/GDJS Runtime Documentation/. If you are asking for resources on coding in javascript, you can find some by making a google search.

LOL I didn’t know that docs awesome so now I have an stating point to learn and check for documentation.
Thanks Arturo.