gtag.js Implementation - Global & Event

Hello Adobe DTM Community,

Reaching out to see if anyone can provide some guidance on the implementation of the gtag.js global (base) and event tag. As the event tag pulls in page data layer values these tags have been implemented as non-sequential JS tags. As the global tag needs to fire first, a page rule has been set up to fire the global tag at the bottom of the page, and a separate page rule set up to fire the event tag on page load. With this configuration I am running into the issue where "gtag" is undefined when the event tag fires. Any assistance regarding this implementation will be very appreciated. 

Global:

DTM.loadScriptCallback("https://www.googletagmanager.com/gtag/js?id=AW-12345678", function() {

    window.dataLayer = window.dataLayer || [];

    function gtag() {

        dataLayer.push(arguments);

    }

    gtag('js', new Date());

    gtag('config', 'AW-12345678');

    gtag('config', 'DC-87654321');

});

Event:

var productID = DTM.getVariable("product")[0].productInfo.productID;

    gtag('event', 'page_view', {

        'send_to': 'AW-12345678',

        'ecomm_prodid': productID

    });

Thank you.