Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

Facebook playable ads

Discussion in 'Project Tiny' started by Guilherme-Otranto, Feb 12, 2019.

  1. Guilherme-Otranto

    Guilherme-Otranto

    Joined:
    Mar 12, 2014
    Posts:
    28
    Has anyone been successful in creating a Facebook playable ad using Unity Tiny?

    I managed to get a Tiny project to work as an instant game, as described here:


    But that is not quite enough to get it to work on the playable ads, it seems.
    From: https://www.facebook.com/business/help/412951382532338
    I see 2 main problems:
    1) How to call the FbPlayableAd.onCTAClick() when a call to action is clicked
    2) How to create a single HTML file with all the assets.

    Anyone has any ideas on how to can progress?
    I already have a functional game/playable ad, but I am currently stuck on (1), don't know how to go about calling the function...

    Any help is greatly appreciated!
     
  2. Guilherme-Otranto

    Guilherme-Otranto

    Joined:
    Mar 12, 2014
    Posts:
    28
    Okay, so I advanced a little bit, let me describe it here!

    On the Facebook platform, I can upload the HTML file if there is a function that calls FbPlayableAd.onCTAClick().
    This can be done by simply adding:

    Code (CSharp):
    1. <script type="text/javascript">
    2.     function CTACaller() { FbPlayableAd.onCTAClick(); }
    3. </script>
    From what I can tell, it will accept any HTML that has the function call anywhere.

    The problem then becomes, how do I call a function from the main HTML from inside the project?
    I can manage to set Unity Tiny to build a single HTML file (on the build settings, click on the "single file output" option). But this generates three problems:

    1) How do I ensure that a function such as the one described above is on the HTML file? I could manually add it, but that would not solve problem 2...

    2) How do I ensure that such function is being called from my typescript code, inside the project?

    3) Currently the build is actually generating two files: index.html and game.js.map.
    Is there a way to make this into a single file? Adding game.js.map into the html?

    Again, thanks for any help you can provide =)
     
  3. alamac123

    alamac123

    Joined:
    Mar 15, 2017
    Posts:
    21
    U can create a link with this index.html file without game.js.map file.
     
  4. Guilherme-Otranto

    Guilherme-Otranto

    Joined:
    Mar 12, 2014
    Posts:
    28
    Sorry, alamac123, I did not follow what you meant...

    I did, however, manage to join the game.js.map into the html.
    Instead of defining the link on the html, I set it to data and copy/pasted the whole file in.
    For now it is a manual process, but it will be trivial to automate this with the setup I have (which includes a post processing that edits the html).

    Anyhow, problem 3 is solved, now to work out how to define and call the function on the main html...

    [edited for clarity and typo correcting]
     
    alamac123 likes this.
  5. damogi

    damogi

    Joined:
    Feb 10, 2019
    Posts:
    5
    Hi Guilherme

    I have a problem, I dont know how to call

    function CTACaller() { FbPlayableAd.onCTAClick(); }

    from my typescript code. Can you explain me?

    Thank you so much
     
    Last edited: Feb 15, 2019
  6. Guilherme-Otranto

    Guilherme-Otranto

    Joined:
    Mar 12, 2014
    Posts:
    28
  7. damogi

    damogi

    Joined:
    Feb 10, 2019
    Posts:
    5
    Hi Guilherme,

    I still have the same problem, I have the tsconfig,override,json, but I don't know what to put in the external folder and where do I have to do the call?

    Thanks
     
  8. Guilherme-Otranto

    Guilherme-Otranto

    Joined:
    Mar 12, 2014
    Posts:
    28
    Hi Damogi,

    So, if you have something like this on your tsconfig.override.json:
    Code (CSharp):
    1. {
    2.  
    3.     "compilerOptions": {
    4.  
    5.         "allowJs": true
    6.  
    7.     },
    8.  
    9.     "include":[
    10.         "External/SomeScript.js"
    11.     ]
    12.  
    13. }
    You can add a script called SomeScript.js to the External folder, and that script will be available on you final html build. It will be injected into the file somewhere and any functions defined there will be available.

    For instance, say SomeScript.js is:
    Code (CSharp):
    1. function SomeExternalFunction()
    2. {
    3.   console.log("This is being called from SomeScript.js, which in turn is called from unity code, success!!!");
    4. }
    Then, with this setup, you can finally call the function SomeExternalFunction() from your unity code (right now typescript, soon c#, I guess). Just as you normally would: SomeExternalFunction();

    Do note that the External folder should be in the root of your current project (i.e., right next to the utproject file)
     
    Jalol likes this.
  9. lordubik

    lordubik

    Joined:
    Feb 18, 2013
    Posts:
    68
    Hi, question bit OT.
    Guilherme-Otranto do you have found where upload your index.html? :) thanks and sorry for OT :D
     
  10. Guilherme-Otranto

    Guilherme-Otranto

    Joined:
    Mar 12, 2014
    Posts:
    28
    Hi lordubik,
    Sorry, I don't follow your question. I admit this issue is a bit hazy on my mind though, so I might be missing something obvious.
    What do you mean by 'upload you index.html'? You mean in the facebook platform, to create the ad?
     
  11. Jalol

    Jalol

    Joined:
    Sep 23, 2013
    Posts:
    21
    DavidHutch likes this.
  12. DavidHutch

    DavidHutch

    Joined:
    Feb 25, 2019
    Posts:
    1
    @Jalol How did it go? Were you successful in creating a playable ad using 0.14.5? I am having trouble getting the size down of the html file down. Would appreciate any suggestions or tips you found. Thanks
     
  13. Jalol

    Jalol

    Joined:
    Sep 23, 2013
    Posts:
    21
    EvOne and DavidHutch like this.