Freemius Purchase Completion JavaScript Callback Filter

purchaseCompleted.php

<?php
    // Add GA tracking only if user opted-in OR if non-WP.org compliant product.
    function my_after_purchase_js( $js_function ) {
        return 'function ( response ) {
            /**
             * Since the user just entered their personal & billing information, agreed to the TOS & privacy,
             * know they are running within a secure iframe from an external domain, they implicitly permit tracking
             * this purchase. So initizlizing GA here (after the purchase), is legitimate.
             */
            ga('create', 'UA-XXXXXXX', 'auto');
            
            console.log("checkout", "purchaseCompleted");
        }';
    }  

    function my_checkout_enrich ( $html ) {
        return '<script type="text/javascript">
            (function() {
                if ( null == ga ) {
                    // Add code to include GA.
                }
            })();
        </script>' . $html;
    }

    my_freemius()->add_filter('checkout/purchaseCompleted', 'my_after_purchase_js');
    my_freemius()->add_filter('templates/checkout.php', 'my_checkout_enrich');
?>

There is a bug in my_freemius()->add_filter('checkout/purchaseCompleted', ''my_after_purchase_js);

It should be my_freemius()->add_filter('checkout/purchaseCompleted', 'my_after_purchase_js');

@irfan-blackandwhite put it in a PHP file that is included after your freemius code is initialized.

How does this code tie with the tracking of purchases with Google Analytics? I can see that the purpose is to return a JS function that will act as callback. The callback receives a data object, but it's unclear of what that object contains, and how it can be used to track the purchase. A more detailed example would be useful. Thanks.

@daigo75 it's the exact same implementation of the example shown here, just a different way to register for the same event handler.

If you dive into the implementation of the checkout's JS code, the callable param provided as purchaseCompleted in the handler.open() will use our postMessage FS.PostMessage.receiveOnce( 'purchaseCompleted' , callable ) implementation.

By using the filter, it does the exact same thing in templates/checkout.

Thanks for the clarification. 👍

Hi,

Below is an example with Google Tag Manager.

my_freemius()->add_filter('checkout/purchaseCompleted', function ($js_function) {
	return "function ( response ) {
	    window.dataLayer = window.dataLayer || []
	    function gtag(){dataLayer.push(arguments)}
	    gtag('js', new Date())
            gtag('config', 'UA-XXXXXXXXXXX', {
	      'cookie_domain': 'example.com'
	    });
           var
		isTrial = (null != response.purchase.trial_ends),
		isSubscription = (null != response.purchase.initial_amount),
		total = isTrial ? 0 : (isSubscription ? response.purchase.initial_amount : response.purchase.gross).toString()
	    window.dataLayer.push({
		'event': 'purchase',
		'price': total
	    })
	}"
});

my_freemius()->add_filter('templates/checkout.php', function ($html) {
	return '<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXXXX"></script>' . $html;
});

@hqwebs This might be a silly question, but where should I add this code?