CODEWITHSUNDEEP
google-analyticsgoogle-tag-manager
Joe's Ideas
Joe's Ideas

Reputation: 550

Custom script to send GA purchase event doesn't work anymore with GTM

I had this custom script sending a GA purchase event working fine, but then I switched to Google Tag Manager and the script doesn't work anymore.

The logic is that when someone purchases a service, they're directed to a thank you page, where the transaction data is populated into the URL from the PHP charge.

Then this script fires on that page and reads the URL to assign the transaction info, and send to analytics:

var pkg,
      value,
      ID = window.location.href.split("=")[1];

if (window.location.href.indexOf("starter") > -1) {
  value = 150;
  pkg = "Starter";
} else if (window.location.href.indexOf("professional") > -1) {
  value = 250;
  pkg = "Professional";
} else if (window.location.href.indexOf("entrepreneur") > -1) {
  value = 350;
  pkg = "Entrepreneur";
} else {
  value = 0;
  pkg = "error";
}

if (value > 0) {
    // Google Analytics Ecommerce Tracking
    gtag('event', 'purchase', {
      "transaction_id": ID,
      "value": value,
      "currency": "USD",
      "items": [
        {
          "id": pkg,
          "name": pkg,
          "quantity": 1,
          "price": value
        }
      ]
    });
}

With GTM, I have this script as a "custom html" tag.

If I do a test charge and populate that URL/thank you page, I get a console error saying gtag() is not a function.

So I tried ga(), that doesn't produce an error, but it also doesn't send the event.

Then I read about dataLayer, so I tried wrapping it in that instead of ga() / gtag():

dataLayer.push({
    'event', 'purchase', {
    "transaction_id": ID,
    "value": value,
    "currency": "USD",
    "items": [
      {
        "id": pkg,
        "name": pkg,
        "quantity": 1,
        "price": value
      }
    ]
  }
});

And that gave me a javascript error. Seems I might also need to put an empty dataLayer variable somewhere on the page, but not sure how this works.

Any ideas? Alternative, should I be sending this event via PHP instead? (never used PHP with GA so wasn't sure).

Upvotes: 0

Views: 1685

Answers (2)

Joe's Ideas
Joe's Ideas

Reputation: 550

If anyone finds this in the future, here's what worked.

CODE:

<script>
var value, ID, pkg;

// populate variables

// push vars to the datalayer
if (value > 0) {
    dataLayer = [];
    dataLayer.push({
       'transactionId': ID,
       'transactionTotal': value,
       'transactionProducts': [{
           'sku': pkg,
           'name': pkg,
           'price': value,
           'quantity': 1}],
       'event' : 'purchase'
   });
}

// GTM script here
</script>

GOOGLE TAG MANAGER:

Then I created a Tag in GTM.

Tag Type: Google Analytics - Universal Analytics

Track Type: Transaction

Trigger: On thank you page (where the script is)

And now, transactions are tracking perfectly :D

Upvotes: 1

Eike Pierstorff
Eike Pierstorff

Reputation: 32780

Your code for the datalayer.push will work either when you include it after the GTM code (because GTM initializes the dataLayer variable), or if you declare the dataLayer variable before your push (and before the GTM code, if you initialize the dataLayer after the GTM code GTM will not work properly).

The indefatigable Simo Ahava has of course a blog post on datalayer initialization that should answer all your questions.

Upvotes: 0

Related Questions