0

So, I built a small website using Alvaro Trigo's Fullpage.js. I have been trying to incorporate Google DFP ads throughout the site and have had a lot of problems as I am very weak when it comes to Javascript. What I have been able to do so far is to use the afterLoad callback option to include both Google analytics and Jquery DFP. It's very hacky looking, but here is the code I have:

    <script>
$(document).ready(function() {
            $('#fullpage').fullpage({
                anchors: ['home', 'sponsors', 'self-breast-exam', 'screening', 'treatment', '2015-luncheon', '2014-luncheon', 'non-profit-organizations', 'news', 'events', 'contact'],
                menu: '#menu',
                paddingTop: '37px',
                autoScrolling: true,
                scrollBar: true,
                slidesNavigation: false,
                normalScrollElements: ('#feed-control, #feed-control2'),
                fitToSection: true,
                scrollOverflow: true,
                afterLoad: 
                    function(anchorLink, index){

                    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

                    ga('create', 'UA-3905646-12', 'domain.nl');
                    ga('send', 'pageview', { 'page': anchorLink, 'title': anchorLink });

                    $(".selfexamAd").dfp({
                    dfpID: '422616648',
                    collapseEmptyDivs: 'original',
                    sizeMapping: {
                    'my-default': [
                    {browser: [1024, 768], ad_sizes: [728, 90]},
                    {browser: [600, 0], ad_sizes: [468, 60]},
                    {browser: [500, 0], ad_sizes: [320, 50]},
                    {browser: [0, 0], ad_sizes: [320, 50]}
                    ]}
                    });
                    },
});
});
</script>

This seems to more or less accomplish what I am trying to do, but the problem I am having seems to be with sections that trigger the scrollOverflow option. It seems that scrolling with the mouse wheel stops at the end of sections where the content extends vertically beyond the Viewport. You are then unable to scroll to the next section using the mouse wheel. Sections that don't overflow seem unaffected and scroll normally using the mouse wheel. Does anybody know what I can do to fix the problem?

Don Israel
  • 11
  • 4
  • A link with a reproduction of it would come on handy. The more I can say now is, why not using the `afterRender` callback instead? Otherwise you'll be calling Google on every section load. Or... is that what you want? – Alvaro Sep 15 '16 at 09:47
  • Well, the 2 actions that I am trying to accomplish in afterLoad are a) record each anchor with Google Analytics and b) generate 6 different ad slots with jquery.DFP throughout different sections of the scroll. I tried afterRender also and it produced the same result. Here's a link to the site I am working on: http://radioforacure.com/newsite – Don Israel Sep 15 '16 at 15:28
  • Make sure to use the latest fullpage.js 2.8.6 to see if that solves it. – Alvaro Sep 15 '16 at 15:41
  • Oh, and remove the console error cause din lazy.js `lazy.js:73 Uncaught SyntaxError: Invalid or unexpected token` – Alvaro Sep 15 '16 at 15:41

0 Answers0