{"id":25476639,"url":"https://github.com/basil79/ima-wrapper","last_synced_at":"2025-11-06T00:30:35.889Z","repository":{"id":65482198,"uuid":"590070907","full_name":"basil79/ima-wrapper","owner":"basil79","description":"Wrapper for IMA SDK. IMA Wrapper is a convenience layer around Google Interactive Media Ads (IMA SDK for HTML5) which tries to make using IMA less cumbersome for common monetization use cases.","archived":false,"fork":false,"pushed_at":"2023-11-28T17:20:14.000Z","size":360,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-12T00:35:22.835Z","etag":null,"topics":["advertising","google","google-ads","iab","ima","ima-sdk","instream","instream-video-ads","javascript","outstream","outstream-video-ads","vast","vast-client-js","video","video-ads","video-player","vmap","vpaid"],"latest_commit_sha":null,"homepage":"https://adserve.tv","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/basil79.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-17T15:41:39.000Z","updated_at":"2024-05-10T20:41:08.000Z","dependencies_parsed_at":"2023-11-28T18:42:25.155Z","dependency_job_id":null,"html_url":"https://github.com/basil79/ima-wrapper","commit_stats":{"total_commits":36,"total_committers":2,"mean_commits":18.0,"dds":0.02777777777777779,"last_synced_commit":"aa21b623c5715ee7bac8dd9c0617ef6a0e9425f7"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basil79%2Fima-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basil79%2Fima-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basil79%2Fima-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basil79%2Fima-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basil79","download_url":"https://codeload.github.com/basil79/ima-wrapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239475928,"owners_count":19645041,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["advertising","google","google-ads","iab","ima","ima-sdk","instream","instream-video-ads","javascript","outstream","outstream-video-ads","vast","vast-client-js","video","video-ads","video-player","vmap","vpaid"],"created_at":"2025-02-18T12:58:38.694Z","updated_at":"2025-11-06T00:30:35.803Z","avatar_url":"https://github.com/basil79.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badgen.net/npm/v/ima-wrapper)](https://badgen.net/npm/v/ima-wrapper)\n[![downloads per week](https://badgen.net/npm/dw/ima-wrapper)](https://badgen.net/npm/dw/ima-wrapper)\n[![license](https://badgen.net/github/license/basil79/ima-wrapper)](https://badgen.net/github/license/basil79/ima-wrapper)\n\n# ima-wrapper\n\n\u003e Wrapper for IMA SDK. IMA Wrapper is a convenience layer around Google Interactive Media Ads (IMA SDK for HTML5) which tries to make using IMA less cumbersome for common monetization use cases.\n\nThis SDK can be used to create a simple in-stream/out-stream video ad player, or to implement more complex monetization scenarios such as:\n- Creating multiple instances of the [IMA SDK](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side) to request multiple ad requests at the same time (in parallel)\n- Integration with VPAID\n\nNOTE: If you have already included the [ima3.js](//imasdk.googleapis.com/js/sdkloader/ima3.js) script, the wrapper will check the IMA client side SDK version if it was included and will use it, if not, the wrapper will try to load `ima3.js` from `//imasdk.googleapis.com/js/sdkloader/ima3.js`.\n\n**Table of Contents**\n\n- [Usage](#Usage)\n- [Documentation](#Documentation)\n- [Install](#Install)\n- [Build](#Build)\n- [Run](#Run)\n- [Contribute](#Contribute)\n\n## Usage\n\n```javascript\nimport IMAWrapper from 'ima-wrapper';\n\n// Get your HTML element for ad container\nconst adContainer = document.getElementById('ad-container');\n// Get your video element\nconst videoElement = document.getElementById('video-element');\n// Define IMA wrapper, pass ad container and video element\nconst adsManager = new IMAWrapper(adContainer, videoElement, (error) =\u003e {\n    if(error) {\n        console.log(error);\n        return;\n    }\n});\n// Subscribe for events\n// AdsManagerLoaded\nadsManager.addEventListener('AdsManagerLoaded', function() {\n    // Get height and width of your video element\n    let width = videoElement.clientWidth;\n    let height = videoElement.clientHeight;\n    let viewMode = 'normal'; // fullscreen\n    // Init\n    try {\n        adsManager.init(width, height, viewMode);\n    } catch (adError) {\n        // Play your context without ads, if an error occurs\n    }\n});\n// AdError\nadsManager.addEventListener('AdError', function(adError) {\n    if(adsManager) {\n        // Removes ad assets loaded at runtime that need to be properly removed at the time of ad completion\n        // and stops the ad and all tracking.\n        adsManager.abort();\n    }\n    // ... \n});\n// AdLoaded\nadsManager.addEventListener('AdLoaded', function(adEvent) {\n    // Ad loaded, awaiting start\n    // Check if ad type is linear\n    if(adEvent.isLinear()) {\n        try {\n            // Start ad\n            adsManager.start();\n        } catch (adError) {\n            // Play video content without ads in case of error\n        }\n    } else {\n        // Ad is not linear\n    }\n});\n// AdStarted\nadsManager.addEventListener('AdStarted', function() {\n    // Pause your video content\n    videoElement.pause();\n});\n// ...\n// AdDurationChange\n// AdSizeChange\n// AdImpression\n// AdVideoStart\n// AdVideoFirstQuartile\n// AdVideoMidpoint\n// AdVideoThirdQuartile\n// AdVideoComplete\n// AdPaused\n// AdPlaying\n// AdStopped\n// AdSkipped\n// AdClickThru\n// ...\n// AllAdsCompleted\nadsManager.addEventListener('AllAdsCompleted', function() {\n    // Play your video content\n    videoElement.play();\n});\n\n\n// VAST tag url\nlet vastUrl = 'your VAST tag url';\n\n// Request Ads\nadsManager.requestAds(vastUrl);\n\n/*\n// VAST XML\nlet vastXML = `\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n    \u003cVAST version=\"2.0\"\u003e\n      \u003cError\u003e\u003c![CDATA[http://example.com/empty-no-ad]]\u003e\u003c/Error\u003e\n    \u003c/VAST\u003e`;\nadsManager.requestAds(vastXML);\n */\n```\n\n## Documentation\n\n### Pre-bundled versions\n\n### Browser script\n\nA pre-bundled version of ima-wrapper is available: [`ima-wrapper.js`](dist/ima-wrapper.js) [minified].\n\nYou can add the script directly to your page and access the library's components through the `adserve.tv` object.\n\n```html\n\u003cscript src=\"ima-wrapper.js\"\u003e\u003c/script\u003e\n```\n\n```javascript\n// Get your HTML elements for ad container and video element\nconst adContainer = document.getElementById('ad-container');\nconst videoElement = document.getElementById('video-element');\n// Define IMA wrapper, pass ad container and video element\nconst adsManager = new adserve.tv.IMAWrapper(adContainer, videoElement, (error) =\u003e {\n   if(error) {\n       console.log(error);\n       return;\n   } \n});\n```\n\n## Install\n\n### Get Started\n\nima-wrapper is available as an NPM package and can be easily installed with:\n\n    $ npm i ima-wrapper\n\n### Using Git\n\n    $ git clone https://github.com/basil79/ima-wrapper.git\n    $ cd ima-wrapper\n    $ npm ci\n\n## Build\n\nTo build the project for development:\n\n    $ npm run build:dev\n\nTo build the project for production:\n\n    $ npm run build:prod\n\nThis will generate the following file:\n\n+ `./dist/ima-wrapper.js` - Minified browser production code\n\n## Run\n\n    $ npm start\n\nThen navigate to: http://localhost:8087 in your browser\n\n### Supported Browsers\n\nima-wrapper is supported all modern browsers.\n\n## Contribute\n\nSee [CONTRIBUTING](./CONTRIBUTING.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasil79%2Fima-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasil79%2Fima-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasil79%2Fima-wrapper/lists"}