Advanced embedding

Advanced instructions on how to embed your calculator directly on your website.

When embedding an iframe you have several inline options to enable/disable in the iframeResizer script.

Example with all inline options added:

<script class="ldScriptLoader" src="https://leaddoubler.s3.eu-west-1.amazonaws.com/files/ldScriptLoader.js" id="ldScript" iframesrc="{calculatorURL}" lazyLoad="true" urlCheck="" autoScroll="true" scrollOnLoad="false" offset="0" loadParams="true" postGA="" gaTracker="" dataLayerTracking="" gtagTracking=""></script>

Options

title

Description:
Adds the title attribute to the iframe

Value:
My iframe title

Default value:
""

Full code example:

title="My iframe title"

lazyLoad

Description:
Loading of the calculator will first occur when in view

Value:
true or false

Default value:
true

Full code example:

lazyLoad="true"
or
lazyLoad="false"

urlCheck

Description:
Only accepts ‘commands’ from the specified URL. E.g: "http://myCalculator.beregner.net"

Value:
{URL}

Default value:
""

Full code example:

lazyLoad="http://myCalculator.beregner.net"

autoScroll

Description:
Automatically scrolls to top of calculator when navigating in quizzes

Value:
true or false

Default value:
true

Full code example:

autoScroll="true"
or
autoScroll="false"

scrollOnLoad

Description:
Automatically scrolls to calculator when parent page has been loaded

Value:
true or false

Default value:
false

Full code example:

scrollOnLoad="true"
or
scrollOnLoad="false"

offset

Description:
Numerical value: Used in combination with autoScroll so the page scrolls "offset" more or less. Usefull when having a fixed position banner to account for.

Value:
{offsetAmountInPx}

Default value:
""

Full code example:

offset="300"

loadParams

Description:
Automatically loads parameters from URL into the iframe on load, so the values can be used in the calculator.

Value:
true or false

Default value:
true

Full code example:

loadParams="true"
or
loadParams="false"

postGA

Description:
Activates the ability to post tracking data to Google Analytics through the iframe.

Value:
true or false

Default value:
"false"

Full code example:

postGA="true"
or
postGA="false"

Example object to send directly from calculator (not from plug’n’play script):

var tracking = {
    hitType: 'event',
    eventCategory: 'My category',
    eventAction: 'My action',
    eventLabel: 'My label'
}
parent.postMessage(tracking, "*");

gaTracker

Description:
If the parent page has multiple GA trackers, you can specify which one to send to. It defaults to just "send". If you provide "myCustomTracker", it will send data like: ga("myCustomTracker.send", objectFromPostmessage).

Value:
myCustomTracker

Default value:
""

Full code example:

gaTracker="myCustomTracker"

dataLayerTracking

Description:
Sends data from calculator to dataLayer on embedded page

Value:
true or false

Default value:
"false"

Full code example:

dataLayerTracking="true"
or
dataLayerTracking="false"

Example object to send directly from calculator (not from plug’n’play script):

var tracking = {
    'event': 'my_event',
    'myCustomField': 'My value',
    'myCustomField2': 'My value',
}
parent.postMessage(tracking, "*");

gtagTracking

Description:
Sends data from calculator to gtag() on embedded page

Value:
true or false

Default value:
"false"

Full code example:

gtagTracking="true"
or
gtagTracking="false"

Example object to send directly from calculator (not from plug’n’play script):

var tracking = {
    'event': 'my_event',
    'extra': {
        event_category: 'My category',
        event_label: 'My label'
    }
}
parent.postMessage(tracking, "*");

cookieInformation

Description:
Can be used to sends data from the calculator to a Cookie Information configured site when on embedded on a page

Value:
true or false

Default value:
"false"

Full code example:

cookieInformation="true"
or
cookieInformation="false"

Plug’n’play script for simple tracking

To use the following tracking script, you need to add it to your calculator in the "Analytics code":

<script id="ldTrack" eventCategory="prisberegner" eventAction="started" eventLabel="dataindsamling" trackOnLoad="false" trackingType="GA4/ga/gtag/dataLayer" src="https://leaddoubler.s3-eu-west-1.amazonaws.com/files/ldTrack.js" measurementId="" apiSecret="" eventName=""></script>

When using "dataLayer" and "gtag", specify the "event" in the eventAction parameter.
When using "GA4", specify measurementId, apiSecret, clientId and eventName. The parameters with "event" in the nam are not used.

Extra

To scroll into view, you can with javascript call resizeNotify("top") from the calculator. This method is automatically called in “quiz mode” and when calculator is loaded on parent page.