mediamonks / generator-richmedia-temple Goto Github PK

As you can see in the below screenshot, the folder on my computer is called
bayer-lotrimin-digital-campaign

but the generator says, like if it removes dashes after the first one
Your project name (bayer-lotrimin digital campaign)
>> Please enter a projectName without spaces!

When you npm run build a banner, the images inside get corrupt.

So if you have a banner which uses an image, after build, that images has a generated name and no properties like width or height. This will cause an error when you upload to DoubleClick.

After you build and upload your creative to doubleclick you get an error.

eed2dd6a3d6f4937a6b7b5b2d49a4c4b.png rejected: The image file eed2dd6a3d6f4937a6b7b5b2d49a4c4b.png is invalid.

It would be better if the DC template gets a little clean up.

The div_main can be removed, not being used.
bannerClick can be renamed in mainExit, more clear name.
The comment in the index about the latest Tweenmax version can be removed

When you install the generator-richmedia-temple again, it will add two lines when you want to run dev :

? Please choose the current build to start developing.
ALL
./node_modules/generator-richmedia-temple/generators/createBanner/templates/doubleclick/.richmediarc
./node_modules/generator-richmedia-temple/generators/createBanner/templates/netflix/.richmediarc
./src/300x250_alt/.richmediarc

./src/300x250/.richmediarc

Please rethink all the functions that are premade when starting a new DC creative.
In my opinion the list below should be removed:

handleExpandStart
handleExpandFinish
handleCollapse
handleCollapseStart
handleOrientation
handleInteraction
handlePageLoaded
handleCollapseFinish
handleFullscreenSupport
handleFullscreenDimensions
handleFullscreenExpandStart
handleFullscreenExpandFinish
handleFullscreenCollapseStart
handleFullscreenCollapseFinish

It might be an option to add a "banner-type" option to the Yeoman generator and add these when user wants to initialise an expandable.

Can we add <meta name="ad.size" content="width={{settings.size.width}},height={{settings.size.height}}"> to our hbs file?
Required by adwords
https://h5validator.appspot.com/adwords/asset

add a version without any affiliation to doubleclick or netflix

Try out this bundle in doubleclick
bundle.zip

The idea:

Instead of using glob patterns and manually creating custom commands for run a dev command for a specific unit type. Could we instead have a feature that could search the .richmediarc configs, and maybe have a user prompt with a few options to allow for the automated creation of dev server commands:

All === npm run dev-all

size === npm run dev-[size]

or maybe a specific variation

variation === npm run dev-[variation]

this could be useful if a project has a lot of units and you want to be able to quickly run the dev server fo a specific type of unit(s).

I think is better to have an element in the banner (for example .cover) and then make that cover disappear at the beginning of the animation, instead of having .banner fading in.

Would be good if we have an exit component. So you can easily add an exit click for all platforms.

Add option to rename shared dir when creating a shared-plain.

banner.init()
.then(() => banner.loadDynamicContent())
.then(() => banner.setDynamicContent())
.then(() => banner.addEventListeners())
.then(() => banner.loadAndPlayAnimation());

Would be good to have an user agent library. That checks if you are on mobile, desktop or tablet. But also creates variables like isIOS or isIE.

Will list all the micro things i changed.

So developers can use timeline controls when developing new units.

https://docs.google.com/spreadsheets/d/1OWCaBi3CRyCZUPmne4j60siuKzsMWYKc26_b2jUf1pQ/edit#gid=2088513178

<= screenshot version

<= unit

• changing component to netflix-cta etc....
• cleaning up css

js files in script folder not loading when "imported" in index.html

TODO: Add attr to:

attrs: [
'img:src',
'video:src',
'link:href',
'source:src',
'script:src',
'netflix-video:source'
],

in createConfig.js / webpack

On Google Sheets section, it's important to say that the spreadsheet needs to be public. Otherwise, you going to get a 403 error.

By adding ?test=1

then we don't get issues on the Preview page when using FlashTalking APIs.

This won't affect other banners (doubleclick or standard)

netflix-brand-logo and netflix-cta needs to swap position on Arabic and Hebrew language

removing wc-netflix-supercut and wc-netflix-rating-bug does do not exist

3.0.1 to 3.6

Monet.logEvent("MONET_IMPRESSION", {
type: "RICH_MEDIA",
skills: ["SINGLE_TITLE", "VIDEO"]
});

Change generator-richmedia-temple to generator-display-advertising

Right now in the css, in the .BannerClick for example, you can find a generated 1x1 blank pixel:
background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');

I will change that to a .png image, in order to make the code more readable.

When adding exit-element-id in the monet-integrator in the index.html. An exit will be created so in the BaseBanner.js the this.domMainExit.addEventListener('click',monetComponent.gotoExit.bind(monetComponent)); can be removed in from the init

When the user enters the Project Name (during the question time @Generator), if you insert a Project Name containing spaces, running dev.js will break and gives you this errors:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: Invalid name: "This is my project name"
4 verbose stack at ensureValidName (/usr/local/lib/node_modules/npm/node_modules/normalize-package-data/lib/fixer.js:335:15)
4 verbose stack at Object.fixNameField (/usr/local/lib/node_modules/npm/node_modules/normalize-package-data/lib/fixer.js:215:5)
4 verbose stack at /usr/local/lib/node_modules/npm/node_modules/normalize-package-data/lib/normalize.js:32:38
4 verbose stack at Array.forEach ()
4 verbose stack at normalize (/usr/local/lib/node_modules/npm/node_modules/normalize-package-data/lib/normalize.js:31:15)
4 verbose stack at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:411:5)
4 verbose stack at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:160:5)
4 verbose stack at ReadFileContext. (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:332:20)
4 verbose stack at ReadFileContext.callback (/usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:78:16)
4 verbose stack at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:235:13)
5 verbose cwd /Applications/MAMP/htdocs/test
6 verbose Darwin 18.0.0
7 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
8 verbose node v10.11.0
9 verbose npm v6.4.1
10 error Invalid name: "This is my project name"
11 verbose exit [ 1, true ]

According to specs we've recieved from monet. We also need to have an "AUTOPLAY" element.

AUTOPLAY -- for units which automatically play a video on load.
xample: Monet.logEvent( “MONET_IMPRESSION”, {“type” : “RICH_MEDIA”, skills:[“VIDEO”, “AUTOPLAY”, “SINGLE_TITLE”]})-- this logs an impression for a rich media unit which automatically plays a video when the ad unit loads

On mobile this needs to be turned off since we don't use autoplay

so that we have a robust way of adding it, and will simply change the SVG source with the real logo

There is an issue with the feed array key target.
Hope it is clear on this image, but to explain it shortly.
When you do this to use the feed array
this.feed = dynamicContent[Object.keys(dynamicContent)[0]][0];
in the local and static content preview (the things before the Enabler process the actual feed connected) it works ok and targets the key as it should

but after the Enabler process the Spreadsheet, it changes the position of the keys and add a first key that just has the profile Id, and not the dynamic content

Here an image with some console logs, after and before the Enabler process

it automatically loads the netflix sans font which we need for all netflix units