{"id":18990845,"url":"https://github.com/ablypl/vue-dfp","last_synced_at":"2025-07-04T00:05:16.056Z","repository":{"id":57395646,"uuid":"91465004","full_name":"ablypl/vue-dfp","owner":"ablypl","description":null,"archived":false,"fork":false,"pushed_at":"2019-04-18T16:34:30.000Z","size":14,"stargazers_count":14,"open_issues_count":3,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-04T00:03:39.295Z","etag":null,"topics":["doubleclick-for-publishers","google","npm","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ablypl.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-16T14:01:17.000Z","updated_at":"2023-03-28T18:34:40.000Z","dependencies_parsed_at":"2022-09-18T23:50:12.571Z","dependency_job_id":null,"html_url":"https://github.com/ablypl/vue-dfp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ablypl/vue-dfp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ablypl%2Fvue-dfp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ablypl%2Fvue-dfp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ablypl%2Fvue-dfp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ablypl%2Fvue-dfp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ablypl","download_url":"https://codeload.github.com/ablypl/vue-dfp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ablypl%2Fvue-dfp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263421884,"owners_count":23464046,"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":["doubleclick-for-publishers","google","npm","vuejs"],"created_at":"2024-11-08T17:11:55.640Z","updated_at":"2025-07-04T00:05:15.991Z","avatar_url":"https://github.com/ablypl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue DoubleClick for Publishers\n## Installation\n\n```\nnpm install vue-doubleclick\n```\n\nThen require the plugin in you js file:\n\n```javascript\nimport DoubleClick from 'vue-doubleclick';\n\nVue.use(DoubleClick, {\n    id: '{your-dfp-id}'\n});\n```\n\nAfterwards you can you BannerAd component:\n\n```html\n\u003cgoogle-ad unit=\"{Ad Unit Name}\"\u003e\u003c/google-ad\u003e\n```\n\nComponent generates random container id, however you can pass your own value \n\n```html\n\u003cgoogle-ad unit=\"{Ad Unit Name}\" id=\"my-container-id\"\u003e\u003c/google-ad\u003e\n```\n\n## Mappings\n\nPlugin allows you to define custom mappings (forcing ad size on different screens):\n\n```javascript\nlet mappings = {\n    rectangle: [\n        { window: [0, 0], sizes: [[300, 250], [300, 300],[300, 100],[250, 250]] },\n        { window: [1050, 350], sizes: [[250, 250], [300, 250], [300, 100], [300, 600], [240, 400], [160, 600], [120,600]] },\n    ],\n    banner: [\n        { window: [0, 0], sizes: [[300, 250], [300, 300],[300, 100],[250, 250]] },\n        { window: [750, 200], sizes: [[750, 300], [750, 200], [300, 300], [300,250], [750, 100], [728, 90], [600,200]] },\n        { window: [1050, 350], sizes: [[1200, 400], [970, 90], [750, 300], [750, 200], [750, 100], [728, 90], [600,200], [900,300], [970, 250], [970, 415]] },\n        { window: [1200, 350], sizes: [[1200, 600], [1200, 400]] },\n    ]\n};\n```\n\nand then pass it as another option at install:\n\n```javascript\nVue.use(DoubleClick, {\n    id: '{your-dfp-id}',\n    mappings\n});\n```\n\n## Ad Unit Sizes\n\nYou should define your own Ad Unit Sizes, however this plugin is delivered with 2 base sizes: \n```javascript\nlet sizes = {\n    banner: [[1200, 600], [1200, 400], [300, 250], [300, 300]],\n    rectangle: [ [300, 250], [300, 300], [300, 600]]\n};\n```\n\nIf you define your own sizes, pass them just like mappings\n\n```javascript\nVue.use(DoubleClick, {\n    id: '{your-dfp-id}',\n    sizes\n});\n```\n\nContributing\n------------\n\nAny and all contributions will be greatly appreciated.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fablypl%2Fvue-dfp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fablypl%2Fvue-dfp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fablypl%2Fvue-dfp/lists"}