{"id":19019493,"url":"https://github.com/ff0000-ad-tech/tmpl-standard-base","last_synced_at":"2025-04-23T05:18:50.343Z","repository":{"id":38052101,"uuid":"127814372","full_name":"ff0000-ad-tech/tmpl-standard-base","owner":"ff0000-ad-tech","description":"Example starting point for a 300x250 standard HTML display ad.","archived":false,"fork":false,"pushed_at":"2024-09-10T02:16:47.000Z","size":6067,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"bsa/standard__base__default","last_synced_at":"2025-04-17T20:39:14.509Z","etag":null,"topics":["animated","banner","compiled","es6","framework","iab","javascript","lightweight","static","template","webpack"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/ff0000-ad-tech.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-02T21:25:15.000Z","updated_at":"2024-09-10T02:16:51.000Z","dependencies_parsed_at":"2024-12-22T12:38:37.324Z","dependency_job_id":null,"html_url":"https://github.com/ff0000-ad-tech/tmpl-standard-base","commit_stats":{"total_commits":312,"total_committers":7,"mean_commits":44.57142857142857,"dds":"0.32692307692307687","last_synced_commit":"9195d60eaa2474f998e2a7a9a4f33da03837b2d1"},"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff0000-ad-tech%2Ftmpl-standard-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff0000-ad-tech%2Ftmpl-standard-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff0000-ad-tech%2Ftmpl-standard-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff0000-ad-tech%2Ftmpl-standard-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ff0000-ad-tech","download_url":"https://codeload.github.com/ff0000-ad-tech/tmpl-standard-base/tar.gz/refs/heads/bsa/standard__base__default","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250373251,"owners_count":21419766,"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":["animated","banner","compiled","es6","framework","iab","javascript","lightweight","static","template","webpack"],"created_at":"2024-11-08T20:12:39.451Z","updated_at":"2025-04-23T05:18:50.302Z","avatar_url":"https://github.com/ff0000-ad-tech.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"##### 160over90 - Ad Technology\n\n# Standard - Base\n\n[Getting Started](#getting-started)\n\n[Authoring](#authoring)\n\n- [Scopes](#scopes)\n- [Assets](#assets)\n- [Variation](#variation)\n- [Aliases](#aliases)\n- [Excluded Folders](#excluded)\n- [Modular Strategies](#modular)\n\n[Publishing](#traffic)\n\n[Plugins](#plugins)\n\n[Ad Networks](#ad-networks)\n\n[Binary Assets](#binary-assets)\n\n[Advanced Usage](#advanced-usage)\n\n### Intro\n\nBuild banners with [Preact](https://preactjs.com/) (aka React/JSX) \u0026 [GSAP](https://greensock.com/gsap/). Compile using [Creative Server](https://github.com/ff0000-ad-tech/wp-creative-server/blob/master/README.md) (Webpack/Babel) and deliver to traffic, out-of-the-box, without any boilerplate configuration.\n\nBoilerplate is **~15k**, assuming GSAP-CDN is cached. The output is bundled, per-size, per-index into concise IAB-compatible packages:\n\n![Sample Output](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/tmpl-standard-base/sample-output.png)\n\nThe goal of this framework is\n\n- Technical flexibility\n- Size/Speed\n- Ease-of-use\n\nMost ad-authoring suites are opinionated and specific to their intended ad-network. FF0000-Ad-Tech is a blank slate: Just adaptable, lightweight, and easy-to-author HTML units.\n\nWe commonly run these ads in Google Studio with Dynamic Content. They've run in Sizmek and Flashtalking. Or they can be run as generic HTML ads in almost any display network. They have also been adapted to work with proprietary vendors like Netflix, ESPN, and Twitch.\n\nThis toolset has been in constant use \u0026 development since 2011.\n\n\u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\n# Getting Started\n\n1.  [NPM Install](#install) this template\n2.  Run [Creative Server](#creative-server)\n3.  Begin a [Watch Process](#watch-process)\n4.  [Preview](#preview) the result\n5.  [Author](#authoring) your Size/Index \u0026 `build.js`\n6.  Publish for [Traffic](#traffic)\n\n### System Dependencies\n\nMake sure your machine has at least these versions installed:\n\n- Node `^14.3.0`\n- NPM `^6.0.0`\n\nYou can check your versions in Terminal (or shell of preference): Execute commands `node -v` and `npm -v`. If you need to update or install, check online for instructions for your operating system.\n\n\u003ca name=\"install\"\u003e\u003c/a\u003e\n\n### Install Ad Template\n\nClone or Download this repo and unzip it. In Terminal, `cd` into the result directory, then:\n\n```sh\nnpm install\n```\n\nThis will install the top-level and build-level packages.\n\n\u003ca name=\"creative-server\"\u003e\u003c/a\u003e\n\n### Creative Server\n\nCreative Server app will help you manage, compile, \u0026 package your volume of sizes/indexes. See the [README for Creative Server](https://github.com/ff0000-ad-tech/wp-creative-server/blob/master/README.md) for more info:\n\nRun it with this command:\n\n```sh\nnpm run browser\n```\n\nIn order to restart Creative Server, use `npm run server`.\n\n\u003ca name=\"watch-process\"\u003e\u003c/a\u003e\n\n### Watch Process\n\nThis template must be compiled (webpacked) in order to run in a browser.\n\nCreative Server can start a \"Watch Process\" that will recompile the ad every time its source files are saved.\n\n![CS Watch Process](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/tmpl-standard-base/cs-watch-process.png)\n\nIf you want more visibility, click ![Terminal Icon](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/tmpl-standard-base/terminal-icon.png). This will copy the Webpack command to your clipboard. Paste \u0026 execute that in your Terminal. Similarly, clicking ![Webpack Icon](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/tmpl-standard-base/webpack-icon.png) will copy the Traffic command to your clipboard, for better visibility when run from a shell.\n\n\u003ca name=\"preview\"\u003e\u003c/a\u003e\n\n### Preview\n\nThe 👁 icon links to the `2-debug/[size]` folder. Similarly, the **Date/Time--\u003e** indication links to a traffic preview.\n\n\u003ca name=\"authoring\"\u003e\u003c/a\u003e\n\n## Authoring\n\n\u003ca name=\"scopes\"\u003e\u003c/a\u003e\n\n### Scopes\n\n- [1-build/[size]](#size)\n  - [index.html](#index)\n  - [build.js](#build)\n  - [components](#components)\n    - [Control](#components)\n    - [Ad](#components)\n- [1-build/common](#common)\n  - [fonts](#fonts)\n  - [AdData.js](#common)\n  - [Preflight.js](#common)\n\n\u003ca name=\"size\"\u003e\u003c/a\u003e\n\n#### 1-build/[size]\n\nSizes that share similar creative can be added as \"size folders\", using the `[0-9]x[0-9]` format. Each size folder must have its own `index.html`, `build.js`, and `backup.jpg`.\n\nThe `index.html`'s global `adParams.adWidth` and `adParams.adHeight` object should be updated accordingly:\n\n![Ad Params](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/tmpl-standard-base/ad-params.png)\n\n\u003ca name=\"index\"\u003e\u003c/a\u003e\n\n##### 1-build/[size]/index.html\n\nAn Index contains:\n\n- Click Tag\n- Settings (`window.adParams`)\n- Backup JPG\n- Exit Mechanics\n- Preload DOM\n- Failover\n\nA build can have many sizes. A size can have many indexes. See [Variation](#variation) for more detail.\n\nAdd any build-specific data you need to `window.adParams`. This will be available throughout your build.\n\nDOM the preloader in `\u003cdiv id=\"preloader\"\u003e...\u003c/div\u003e` and add to the top `\u003cstyle\u003e...\u003c/style\u003e` block as needed.\n\n\u003ca name=\"build\"\u003e\u003c/a\u003e\n\n##### 1-build/[size]/build.js\n\n- `build.js` - Preflight \u0026 top Preact render function of the ad.\n\n\u003ca name=\"components\"\u003e\u003c/a\u003e\n\n##### 1-build/[size]/components/\\*\\*/\\*\n\nComponents are where the creative authoring starts! This is straight-forward JSX/Preact/React/SASS-style authoring.\n\nImporting fonts \u0026 image assets will cause them to be bundled into the [fba-payload.png](#binary-assets). Importing components (javascript) or CSS will be bundled into the `build.bundle.js`.\n\nSee the [Assets](#assets) section for examples.\n\nSee [Alias](#aliases) for more information on resolving imports to different locations in the build.\n\n\u003ca name=\"common\"\u003e\u003c/a\u003e\n\n#### 1-build/common/\n\nDifferent sizes often share structure, function, and assets. Use the [1-build/common/](#common) path for those assets, components, and libs.\n\nThe following modules are initially set up as common across sizes:\n\n- `common/js/AdData.js` - Global stateful object that can be referenced anywhere as `adData`\n- `common/js/Preflight.js` - Dynamic asset load and other runtime decisions, after the preload, ahead of the build.\n\n\u003ca name=\"assets\"\u003e\u003c/a\u003e\n\n### Assets\n\nImages and fonts are [Binary Assets](#binary-assets). To get them compiled into a single payload, declare them like so:\n\n#### Images\n\n```javascript\nimport { ImageManager } from 'ad-assets'\nimport '@size/images/my_asset.png'\n\nvar image = new Image()\nimage.src = ImageManager.get('my_asset') // id is the filename of the image-asset\n```\n\n#### Fonts\n\n```javascript\n// Usually done once per font in `./1-build/common/js/AdData.js`.\nimport '@common/fonts/template_font.ttf'\n// \"template_font\" will get unpacked at runtime and declared via CSS\n```\n\n#### Components\n\n```javascript\n// import size-specific component, from `1-build/[@size]/components` folder\nimport '@size/components/MyComponent'\n\n// import shared component, from `1-build/common/components` folder\nimport '@common/components/MySharedComponent'\n```\n\n\u003ca name=\"variation\"\u003e\u003c/a\u003e\n\n### Variation\n\n#### Sizes\n\nTo add a size, duplicate an existing `1-build/[@size]` folder. Now you can tailor this build-size to your needs. Consider the [Module Strategies](#modular) as you scale a campaign.\n\nTo make this process go smoothly, make sure to import build-assets with the `@size` alias. This will alleviate you needing to update your imports, per-size.\n\n#### Indexes\n\nTo generate variations of an existing size, duplicate an existing `1-build/[@size]/[@index]`. This index will load the same `build.js`. Use the `window.adParams` as defined in the `index.html` to add variation data or control.\n\n![Index Targets](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/tmpl-standard-base/index-targets.png)\n\nThe `@index` alias can be used when an index variation of the same size needs to import assets specific to itself. In this case `@size` would not work without appending an index-key from the `window.adParams`.\n\nInstead, you can create a folder with the same name as the index variation. Then import the asset with the alias: `@index`. During compile, if no folder matching the current index-target is found, `@index` will default to the main index scope.\n\n\u003ca name=\"aliases\"\u003e\u003c/a\u003e\n\n### Aliases\n\nThere are several aliases that make pathing easier:\n\n- `@common` - `1-build/common`\n- `@size` - `1-build/[size]/js`\n- `@index` - `1-build/[size]/[index-folder]`\n\nFor example:\n\n```javascript\nimport { Logo } from '@common/components/Logo.js'\n```\n\n\u003ca name=\"excluded\"\u003e\u003c/a\u003e\n\n### Excluded Folders\n\nThese folders will not copied to `2-debug` or `3-traffic`:\n\n- js\n- components\n- styles\n- fonts\n- images\n\nContent in these folders are expected to be imported somewhere in the build, and thus bundled in the output.\n\nUse different folder-names if you have dynamic assets that need to be available at runtime.\n\n\u003ca name=\"modular\"\u003e\u003c/a\u003e\n\n### Modular Strategies\n\nSharing code (aka, writing components in `1-build/common`) drastically reduces the footprint of a build, but it requires more data management \u0026 logic to deal with the differences. It can get abstract quickly.\n\nTo flatten, you can move shared components to a specific `1-build/[size]/js`. Then import using the `@size` alias, thereby making the module size-specific. Downside here: Code redundancy between sizes. But, it can be more straightforward to comprehend.\n\nBoth strategies have their place. It is up to you and your needs.\n\n\u003ca name=\"traffic\"\u003e\u003c/a\u003e\n\n## Publishing\n\n##### Deploy Profiles\n\nCreative Server lets you maintain Profiles for different deploy targets. For each, different settings can be injected into the selected size / indexes, depending on the intended Network \u0026 media targets.\n\n![Deploy Profiles](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/tmpl-standard-base/deploy-profiles.png)\n\nClick the \"+\" icon to define a new profile. Click the ![Settings Icon](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/tmpl-standard-base/settings-icon.png) to override index settings for this profile.\n\nThe dropdown lists [Plugins](#plugins) that can be used on the selected set of ads. Click the 🔥 icon to execute.\n\n![Bulk Compile](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/tmpl-standard-base/bulk-control.png)\n\n\u003ca name=\"plugins\"\u003e\u003c/a\u003e\n\n## Plugins\n\nPlugins are declared as dependencies in the top `./package.json`. Once installed, they will appear in Creative Server in various places, depending on their function.\n\n![Plugins](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/tmpl-standard-base/plugins.png)\n\nSeveral plugins are installed by default that simplify publishing:\n\n- [cs-plugin-bulk-compile](https://github.com/ff0000-ad-tech/cs-plugin-bulk-compile), compiles all of the selected ads, at once -- laugh while your CPU cries.\n- [cs-plugin-vendor-indexes](https://github.com/ff0000-ad-tech/cs-plugin-vendor-indexes), for when assets are hosted on a 4th party CDN and only then `index.html` and `backup.jpg` are needed for media. This plugin will transfer those files from your traffic output to `./4-vendor`.\n\n\u003ca name=\"ad-networks\"\u003e\u003c/a\u003e\n\n## Ad Networks\n\nThis template is a standard banner format, configured for general HTML display, ala DCM (Doubleclick Campaign Manager).\n\nOther templates for DC Studio, Flashtalking, and Sizmek have been created. Templates have also been built for several proprietary dynamic solutions like 160over90's Velvet-DPS \u0026 Netflix's Monet.\n\nAs much as possible, we have tried to isolate Network interfacing to the `index.html`, so that creative is easily ported from one template-type to another.\n\nSome networks, like Flashtalking, have very unique packaging requirements. In this case, we've built plugins, like [cs-plugin-vendor-ft](https://github.com/ff0000-ad-tech/cs-plugin-vendor-ft) to simplify the packaging process.\n\n\u003ca name=\"binary-assets\"\u003e\u003c/a\u003e\n\n## Binary Assets\n\nAssets like images \u0026 fonts are 25% bigger when expressed as base64 text. Even after gzip, there is significant waste. Loading the assets individually is even worse in terms of load delay.\n\nTo solve these problems, we compile all binary assets into a single load that is streamed into the ad and written into the DOM in a single execution loop.\n\nSee the [authoring](#authoring) notes above for how to implement.\n\n\u003ca name=\"advanced-usage\"\u003e\u003c/a\u003e\n\n## Advanced Usage\n\nAlternative workflows, frameworks, and components can be integrated as needed.\n\nFor example, Web Components, home-grown modules, etc..._anything that Webpack can load can be compiled_. Be encouraged to modify -- we are always interested in different use-cases. Such efforts will advance the overall project goals: To offer a flexible, lightweight, and intuitive system for building interactive ad content.\n\nIf you want to adapt Creative Server to a different setup (index, hierarchy, etc), contact [us](https://github.com/gmcdev) and we can help you with our `webpack.config.js` which has been divided into sub-modules for organizational purposes.\n\nRepos in [@ff0000-ad-tech](https://github.com/ff0000-ad-tech) dealing with Webpack \u0026 Creative Server are:\n\n- `wp-...` prefix are webpack related modules.\n\n- `cs-...` prefex are Creative Server related modules.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fff0000-ad-tech%2Ftmpl-standard-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fff0000-ad-tech%2Ftmpl-standard-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fff0000-ad-tech%2Ftmpl-standard-base/lists"}