@aller/am-assets
v0.2.1
Published
Shared resources for Dagbladet, Dinside and Se&Hør. Mostly responsible for handling ad requests for these sites.
Downloads
5
Keywords
Readme
am-assets
Shared resources for Dagbladet, Dinside and Se&Hør. Mostly responsible for handling ad requests for these sites.
Setup
Just run npm install
. Then npm start
.
Testing
./startDevServer.php
- starts and webserver on port 8080, and opens your default browser to http://localhost:8080/test
To test all the sites in it's current state with your updated am-assets, you can run bash test/generateAndUpdate.sh
.
If you also have changed the styleguide you can run the script bash test/generateAndUpdateWithStyleguide.sh
that will update the links to the styleguide also. But then you need to run the correct styleguide on port 8080
(the default, you should only need to run grunt
in the styleguide folder.
This file will go and download all our sites, and change the am-assets ref to get the latest file from the dist
folder in this
repo. Check http://localhost:8081/test for link to all pages
Deploy
This repository will be deployed automagically when pushed to master. See wercker for more info
How to use
Placing adunits on the page is eazy-breezy. You just need a couple of things:
Including needed files
Make sure you have the Google Publisher Tag
included in the head
section of your page:
<script id="dfp-load">
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement("script");
gads.async = true;
gads.type = "text/javascript";
var useSSL = "https:" == document.location.protocol;
gads.src = (useSSL ? "https:" : "http:") + "//www.googletagservices.com/tag/js/gpt.js";
var node = document.getElementsByTagName("script")[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
Add the CSS to the page: https://am.medialaben.no/stylesheets/app.min.css
Add the javascript to the page: https://am.medialaben.no/scripts/app.min.js (preferably just before the closing body
tag.)
Place an adunit on the page
Each adunit is defined by a div that contains some data
attributes which is used to make a request to DFP. For example, the following adunit has these attributes:
<div id="gpt-1" class="adunit small-320x250 medium-980x300-scaled large-980x300" data-sizes="[[980,300], [970,250]]" json='{"targeting": { "seqNo": "1" }}' data-slot="/8578/dagbladet.no/forside" data-load-on="load"> </div>
Required attributes:
id
(gpt-1
): The ID of the adunit. Like any good developer, you know that IDs have to be unique. This is no exception - all adunits on a page need to have a uniqueid
.class:
adunit
: every adunit needs this class to get default styling.small-320x250 medium-980x300-scaled large-980x300
: How much space we allocate to the adunit. These classes are optional, but are highly recommended as they prevent the page from jumping when an ad loads.
data-sizes
([[980,300], [970,250]]
): What size(s) in DFP we want to ask for. Accepts one -or twodimensional arrays.json
({"targeting": { "seqNo": "1", "pos": "2" }}
): Used for targeting.data-slot
(/8578/dagbladet.no/forside
): The DFP slot to ask for.data-load-on
(load
): When to make a request to DFP.load
means to make a request on page load,view
means it's lazyloaded.400px
before it's visible in viewport is default, but this can be overruled withdata-threshold
attribute (see below).
Optional attributes
data-collapse
(0|1
): If reply from DFP was empty, collapse the adunit. We don't really use this, ever.data-threshold
({num}
): If the adunit is lazyloaded, this attribute overrules the default300px
.
As a library
Currently only a few selected features can be used from the library. Code is located in /src
and compiles to /lib
.
Motivation
At the moment we have multiple Google Tag Manager-containers with the same code duplicated everywhere. We're hoping to move the code to a library that can be included across all sites. It also gives us the possibility to write more modern JavaScript as well. This is currently implemented to SOL.no.
Next steps
Implement more features and make use of the code in the library for the browserified version as well.
Installation
Add it to package.json
in the project you want to use it:
"am-assets": "git+https://SOME_VALID_TOKEN:[email protected]/dbmedialab/am-assets.git#master",
and then simply do npm install
.
Usage
import AmAssets from 'am-assets';
const am = new AmAssets({ config }); // See code for config details
am.activeTime(); // Enables activeTime.
am.metaRefresh(); // Enables metaRefrsh.
or if you want to import a specific library do:
import activeTime from 'am-assets/lib/analytics/active-time';
activeTime({ config }); // See code for config details.
Tracking inscreen time
In order to measure the exposure articles and ads have on visitors we track how long their elements are inscreen. These metrics gets pushed to @dbmedialab/aas.
Articles
Please refer to src/analytics/article-tracking/readme.md
to see how article tracking works.
Ads
Please refer to src/analytics/viewability-tracking
to see how ad tracking works.