Actions

Vid.AI JavaScript Version 1.0.0

From TyrooLabs


Contents

JavaScript Video Formats

Below are the Available JavaScript Video Formats:

  • Native Video
  • Discover Wall
  • Carousel
  • Interstitial


Native Video

  • In Feed

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src='http://m.tyroo.com/video-js/scripts/tyrloadVideoAds.js?v=1.9f'></script>
<script>
var tyrAdDiv = document.createElement('div');
var tyrRandomId = 'tyrAds_' + Math.floor((Math.random() * 10000) + 1);
tyrAdDiv.id = tyrRandomId;
document.getElementsByTagName('body')[0].appendChild(tyrAdDiv);
var reqAdsParams ={
          "domain": "video.tyroo.com",
          "placementId": 1729,
          "affId": 7,
          "subid1":" ",
          "subid2":" ",
          "subid3":" ",
          "subid4":" ",
          "subid5":" ",
          "gaId":" ",
          "IDFA":" ",
          "androidId":" "
}

// Customizations for background color, font-famliy, text-color of the header
var nativeStyles = {
            "background-color":"#fff",
            "font-family":"sans",
            "text-color":"#000",
            "header-visible":true,
            "footer-visible":true,
            "autoplay":true
}
loadVideoAds(reqAdsParams, tyrRandomId, nativeStyles);
</script>


Note: If you want your ads will be displayed "Native Video (In Feed)" in Non-Autoplay mode then you'll have to provide, "autoplay":false


    • image: Native Video Feed


VideoFeed.jpg


Discover Wall

* Full Screen

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src='http://m.tyroo.com/video-js/scripts/tyrloadVideoAds.js?v=1.9f'></script>
<script>
var tyrAdDiv = document.createElement('div');
var tyrRandomId = 'tyrAds_' + Math.floor((Math.random() * 10000) + 1);
tyrAdDiv.id = tyrRandomId;
document.getElementsByTagName('body')[0].appendChild(tyrAdDiv);
var reqAdsParams ={
          "domain": "video.tyroo.com",
          "placementId": 1729,
          "affId": 7,
          "subid1":" ",
          "subid2":" ",
          "subid3":" ",
          "subid4":" ",
          "subid5":" ",
          "gaId":" ",
          "IDFA":" ",
          "androidId":" "
}
var nativeStyles = {
  "inFeed": 0
}
loadVideoAds(reqAdsParams, tyrRandomId, nativeStyles);
</script>


Note: If you want your ads will display in "Discover Wall (In Feed)" then you'll have to modify the nativeStyles as below:

        var nativeStyles = {
        "inFeed": 1
        }


    • image 1: Discover Wall (Full Screen)
    • image 2: Discover Wall (In Feed)


DiscoverFullScreen.jpg
DiscoverInFeed.jpg


Carousel & Interstitial

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src='http://m.tyroo.com/video-js/scripts/tyrloadVideoAds.js?v=1.9f'></script>
<script>
var tyrAdDiv = document.createElement('div');
var tyrRandomId = 'tyrAds_' + Math.floor((Math.random() * 10000) + 1);
tyrAdDiv.id = tyrRandomId;
document.getElementsByTagName('body')[0].appendChild(tyrAdDiv);
var reqAdsParams ={
          "domain": "video.tyroo.com",
          "placementId": 1723,
          "affId": 7,
          "subid1":" ",
          "subid2":" ",
          "subid3":" ",
          "subid4":" ",
          "subid5":" ",
          "gaId":" ",
          "IDFA":" ",
          "androidId":" "
}
loadVideoAds(reqAdsParams, tyrRandomId);
</script>


    • image 1: Carousel
    • image 2: Interstitial


Carausal.jpg
Interstitial.jpg


JavaScript - Parameters

In the above "JAVASCRIPT TAG", below are the three parameters which we are passing i.e.

  • reqAdsParams
  • tyrRandomId
  • nativeStyles

        loadVideoAds(reqAdsParams, tyrRandomId, nativeStyles);


reqAdsParams

Below are the Nodes, which you'll have to provide in the script.

Node Data Type Mandatory/Recommended Description
domain String Mandatory video.tyroo.com
placementId Integer Mandatory Provide the placement Id. Can get this id from your account manager/tyroocentral platform once placement is created.
affId Integer Mandatory This is a unique Affiliate id for your authentication. Can get this id from tyroocentral platform once you register on the platform.
subid1 String Extra placeholder for Publishers.
subid2 String Extra placeholder for Publishers.
subid3 String Extra placeholder for Publishers.
subid4 String Extra placeholder for Publishers.
subid5 String Extra placeholder for Publishers.
gaId String Required in case of Web View inside App Google Advertising identifier
IDFA String Required in case of Web View inside App Apple identifier
androidId String Required in case of Web View inside App Android id of device.


tyrRandomId

Nothing to change in this parameter.


nativeStyles

You can customize nativeStyles of the above part of video template according to your requirement. If you don’t wish to modify the changes, it appears with the default settings. Another thing is that, if you don’t set/specify the value of any of the settings (or you keep this blank), it appears as default settings (below).


        
    var nativeStyles = {
            "background-color":"#fff",
            "font-family":"sans",
            "text-color":"#000",
            "header-visible":true,
            "footer-visible":true,
            "autoplay":true
        }


Background Color

It will change your background color your video.

    • image 1: "background-color":"black"
    • image 2: "background-color":"pink"


Backgroundcolorblack.jpg
Backgroundcolorpink.jpg


Font Family

Here you can change the font type of the “title & description” of your video.

    • image 1: "text-family":"times"
    • image 2: "text-family":"courier"


Fontfamily times.jpg
Fontfamily courier.jpg


Text Color

Here you can change the text color of the “title & description” of your video.

    • image 1: "text-color":"brown"
    • image 2: "text-color":"green"


Fontcolor brown.jpg
Fontcolor green.jpg


Header Visible

If you wish to keep your video header visible then put true else false.

    • image 1: "header-visible":false


HeaderFalse1.jpg


Footer Visible

If you wish to keep your video footer visible then put true else false.

    • image 1: "footer-visible":false


FooterFalse.jpg


Autoplay

If you wish to autoplay your video then put true else false.


Notes

'In case of "iOS UIWebView" add below (two) properties of WebView

webView.allowsInlineMediaPlayback = true
webView.mediaPlaybackRequiresUserAction = false