Facebook playable ads

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!

 

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 =)

 

U can create a link with this index.html file without game.js.map file.

 

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]

 

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

 

Hey Damogi,

This post will help you out:
https://forum.unity.com/threads/can...-regular-javascript-code.594064/#post-3968980

You can basically follow the instructions there.
If you do it correctly, the JS you added using tsconfig.override.json will be embedded on your index.html. If you placed a call on your typescript, it will call the correct function.

Cheers!

 

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

 

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)

 

Hi, question bit OT.
Guilherme-Otranto do you have found where upload your index.html? thanks and sorry for OT

 

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?

 

Quick preview to make sure your game matches all facebook specs:
https://developers.facebook.com/tools/playable-preview/

The proper way to upload and use a playable as an ad is described here:
Uploading Your Playable Ads Using Ads Manager

Using the good old 0.14.5 preview version, I am pretty close to finally place my first ad *fingers crossed*

 

@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

 

(1 artist + 1 dev) X 5 days = 1 rough prototype:
http://flyingbeavers.ca/tinytests/TinyFood/ECODELIVERY/
(Use swipe on mobile and A and D key on PC)

Still needs analytics and a few bug fixes... it will be ready for some live action Soon™