Wikia/ad-products is deprecated
Code has been merged to Wikia/ad-engine and it is avaialable as a submodule.
AdProducts
Dependencies
Installation
npm install github:Wikia/ad-products#semver:^4.2.0 --save
Usage (ES6)
Required files
Add listed files to your build step:
- src/styles/styles.scss
Register template loader plugin in AdEngine
import { AdEngine, templateService } from '@wikia/ad-engine';
import { FloatingRail } from '@wikia/ad-products';
templateService.register(FloatingRail, {
startOffset: -15
});
// Configure and run your ad-engine
// ...
// new AdEngine(customContext).init();
// ...
Call template from DFP creative
<script>
top.loadCustomAd && top.loadCustomAd({
type: 'floatingRail',
// ...
});
</script>
Available templates
Big Fancy Ad Above
Name: bfaa
Default config:
{
"desktopNavbarWrapperSelector": ".wds-global-navigation-wrapper",
"handleNavbar": false,
"mobileNavbarWrapperSelector": ".global-navigation-mobile-wrapper",
"slotSibling": ".topic-header",
"slotsToEnable": [
"bottom_leaderboard",
"incontent_boxad"
]
}
Description:
- desktopNavbarWrapperSelector - desktop navbar DOM selector
- handleNavbar - decides whether template should adjust navbar
- mobileNavbarWrapperSelector - mobile navbar DOM selector
- slotSibling - DOM sibling element next to BFAA slot
- slotsToEnable - decides which slots should be enabled on Fan Takeover load
Template parameters:
- player
- slotName
- src
- uap
- lineItemId
- creativeId
- backgroundColor
- autoPlay
- resolvedStateAutoplay
- videoTriggers
- videoPlaceholderElement
- splitLayoutVideoPosition
- image1
- image2
- aspectRatio
- resolvedStateAspectRatio
- videoAspectRatio
- loadMedrecFromBTF
- moatTracking
Big Fancy Ad Below
Name: bfab
Template parameters:
Check Big Fancy Ad Above.
Floating rail
Name: floatingRail
Default config:
{
"enabled": true,
"railSelector": "#rail",
"wrapperSelector": "#rail-wrapper",
"startOffset": 0
}
Description:
- enabled - decides whether template is usable
- railSelector - element which is going to have
position: fixed
- wrapperSelector - rail wrapper
- startOffset - decides when rail starts floating
Template parameters:
- offset - how long (in px) rail is going to be fixed
Creative usage:
<script>
top.loadCustomAd && top.loadCustomAd({
type: 'floatingRail',
offset: 500
});
</script>
Example pages
Before you open an example page please run below command in order to build local js and css files.
npm install
npm run build
Contribution
In order to keep files updated on example pages use below command:
npm run watch
Lint all files
npm run lint
Developing ad-products and ad-engine together
Use npm link
- Checkout both repositiories
- Go to
ad-engine
directory and typenpm link
- Go to
ad-products
directory and typenpm link @wikia/ad-engine
From now changes in ad-engine
repo will be visible on ad-products
demo pages.
Publish new version
- Use your regular workflow. Push changes to branch, test them and create pull request to dev.
- Switch to dev branch once you merge all changes and pull new changes from github
- Bump version (remember to follow Semantic Versioning)
npm version patch
This command runs preversion script which:
- run all tests
- lint all files
- build dist directory with output files for "client's" repositories
- adds built files to commited version
- Push changes to github
git push --follow-tags