Integration Guide v1.6

Integration Guide . v1.
-
This documentation describes how to implement and use our different formats.
Table of content
1.Formats
1.1 Impact
1.2 Inline
1.3 Skyline
1.4 Billboard
1.5 Static
2. Tag parameters
2.1 Required parameters
2.2 Optional parameters
2.3 Simple API “onReady(api)”
3. Ad Serving in Google Ad Manager (formerly known as DFP 1x1)
Step1: Create a new Ad Unit (Inventory tab)
Step2: Generate tags
Step3: Create a new Order/Line Item (Orders tab)
Step4: Add a new Creative (Creatives tab)
4. Multiple formats on the same page
2
1.Formats
You can checkout live demos of our formats from our gallery:
https://app.impactify.io/formats-gallery
For a better user experience, you can put one or multiple tags per page. You just need to
choose the right formats that you need for your pages.
Note: only the static format is compatible with players included inside a safe iframe.
1.1 Impact
The player is positioned fixed to the viewport, usually at the bottom of the screen.
Mobile Desktop
Place the tag inside the <body> tag:
3
<script>
window.impactifyTag = window.impactifyTag || [];
impactifyTag.push({
appId: 'paste-your-app-id'
,format: 'screen'
,style: 'impact'
});
(function(d, s, id) {
var js, ijs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://ad.impactify.io/static/ad/tag.js';
ijs.parentNode.insertBefore(js, ijs);
}(document, 'script', 'impactify-sdk'));
</script>
4
1.2 Inline
The video player starts out as an in-page video player that is not sticky. As the user scrolls
the page, it transitions from playing in the in-page video player to playing in a sticky video
player like the Impact Screen.
Mobile
Desktop
Paste the tag inside the main column where you want the player to appear:
5
<div id='impactify-screen-inline'></div>
<script>
impactifyTag.push({
,format: 'screen'
,style: 'inline'
});
</script>
6
1.3 Skyline
The Skyline format is an Inline format that's sticky at the top of the viewport.
It starts out as an in-page video player that is not sticky. As the user scrolls the page, it
transitions from playing in the in-page video player to playing in a sticky video player like the
Impact Screen.
Mobile
Desktop
7
<div id='impactify-screen-skyline'></div>
<script>
impactifyTag.push({
,format: 'screen'
,style: 'skyline'
});
</script>
8
1.4 Billboard
The Billboard format starts out at the top of the page as a static (not sticky). As the user
scrolls the page, the format transitions from playing in the in-page video player to playing in a
sticky video player like the Impact format.
The key difference between this format and the Inline is that once the Billboard format is in
impact mode (sticky) and you scroll back up to the top of the page it will not transform back
to a Static format anymore (it will disappear).
Mobile
Desktop
9
Paste the tag inside the <body> tag:
<script>
impactifyTag.push({
,format: 'screen'
,style: 'billboard'
});
</script>
10
1.5 Static
The static format acts like an in-page video player that is not sticky, when the user scrolls
past it it will disappear.
Mobile Desktop
<div id='impactify-screen-static'></div>
<script>
impactifyTag.push({
,format: 'screen'
,style: 'static'
});
</script>
11
2. Tag parameters
This section contains technical information and is targeted towards tech-savvy people that
are familiar with HTML5 and Javascript.
2.1 Required parameters

Field Type Description / values Default
appId string The website unique ID on Impactify
format string “screen”, “display”
2.2 Optional parameters

Field Type Description / values Default
onAd function The onAd() callback function is triggered when

Impactify returns the ads to play for the given
format.
onNoAd function The onNoAd() callback function is triggered if

there is no ad to display for the given format.
You can use this callback function to execute
javascript code when an ad request does not
return any ad.
container string Format container in the form of a css selector
language string change the language to be used by the SDK for language of
things like “Skip ad” translations the browser
top int Distance from top of viewport (px). 0

The close button will be displayed inside the
player for sticky inline.
+ align format to the top of the page
bottom int Distance from bottom of viewport (px) 0
align string “left”, “right”, “center” (Impact Screen) right
gdpr int “0”, “1” 0
gdpr_consent string GDPR consent string. If a CMP is available, this null

parameter will be filled automatically.
onClose function Callback function fired when the format has null
closed
onReady function Callback function fired when the format is ready. null
disableInitialLoad boolean Disable autoloading of the format. You can False

enable this value if you want to control the
12
display of the format via the API object.
onAdStarted Callback function fired each time a new ad is null

played
alwaysMuted boolean Mute the sound of the format every time False
autoReload boolean Reload the formats automatically in single page False

apps (React, Angular, Vue.js..) when the user
change pages
2.3 Simple API “onReady(api)”

Method Description
load() Load the format
close() Closes the format and removes ad assets

loaded at runtime
Example code
<script>
impactifyTag.push({
"appId": "myportal.com",
"format": "screen",
"style": "impact",
"disableInitialLoad": true,
"onReady": function(impactifyApi){
// SDK is ready
top.publisherApi = impactifyApi;
},
"onAd": function(){
console.log('Ad started...');
},
"onNoAd": function(){
console.log('No ad to display');
}
});
</script>
13
3. Ad Serving in Google Ad Manager (formerly
known as DFP 1x1)
All of our tags can be delivered via most common ad serving platforms through just a 1×1
pixel tag.
Step1: Create a new Ad Unit (Inventory tab)
1. Enter the code that identifies the ad unit.

2. Choose an ad unit size of 1x1.
3. Click on Save.
14
Step2: Generate tags
Generate the Google Publisher Tag. Copy and paste the tag in the head and body section of
your HTML.
1. Click on “Generate the tags”.
2. Select the newly created ad unit.
3. Choose “Type” Google Publisher Tag.
4. Copy and paste the tag results in the appropriate sections of your HTML.
15
Step3: Create a new Order/Line Item (Orders tab)
1. On “Inventory Size” select “Standard”.

2. Select inventory ad slot “1x1”.
3. Choose “Type” (Sponsorship = 100% SOV, Standard, Network, etc).
4. On “Add Targeting”, select “Inventory” and include the desired ad unit (should match
“Inventory Size” 1x1).
5. Click on “Save”.
16
Step4: Add a new Creative (Creatives tab)
1. Select “Third Party”.

2. HTML Type - Select “Standard”.
3. Paste the Impactify tag code into the “Code Snippet” box.
4. Confirm target ad unit size is 1x1.
5. Uncheck “Serve into a SafeFrame” (important).
6. Ignore macros warning and “don't recognize tag” warning.

7. Click on save.
17
4. Multiple formats on the same page
If you have multiple formats on the same page (exp: four in-line formats) they will
behave like an in-read. When the user scrolls away, one of the in-lines would transform
into impact mode and it will stick to the bottom right corner, while the other formats will
check to see if there is an active format in impact mode, in this case there is one,
therefore the remaining In-line formats will not transform to impact mode and will stay in
in-read mode.
You can see that the top right format has transformed into impact mode at the bottom
right on the page, while the other formats stayed in in-read mode.
18

Integration Guide v1.6

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Integration Guide v1.6

Uploaded by

Copyright:

Available Formats

Integration Guide . v1.

Place the tag inside the <body> tag:

2.1 Required parameters

appId string The website unique ID on Impactify

format string “screen”, “display”

2.2 Optional parameters

onAd function The onAd() callback function is triggered when

onNoAd function The onNoAd() callback function is triggered if

container string Format container in the form of a css selector

top int Distance from top of viewport (px). 0

bottom int Distance from bottom of viewport (px) 0

align string “left”, “right”, “center” (Impact Screen) right

gdpr int “0”, “1” 0

gdpr_consent string GDPR consent string. If a CMP is available, this null

disableInitialLoad boolean Disable autoloading of the format. You can False

onAdStarted Callback function fired each time a new ad is null

autoReload boolean Reload the formats automatically in single page False

2.3 Simple API “onReady(api)”

load() Load the format

close() Closes the format and removes ad assets

Step1: Create a new Ad Unit (Inventory tab)

1. Enter the code that identifies the ad unit.

1. On “Inventory Size” select “Standard”.

1. Select “Third Party”.

6. Ignore macros warning and “don't recognize tag” warning.

You might also like