@tincre/promo-sync-gtag NPM

promo-sync-gtag, by Tincre`.dev`

Event tracking for Google Tag Manager via Promo ads. Use in conjunction with the promo-button, your Google Tag Manager and/or Google Analytics and Tincre Promo.

🤯 for your ads on the web, with Google.

Installation

Use your favorite package manager to rock installation of promo-sync-gtag.

Yarn

yarn add @tincre/promo-sync-gtag # -D if you want this as a dev dep

Npm

npm install @tincre/promo-sync-gtag # --save-dev if you want it as a dev dep

Setup

As high as possible in the <head> tag on each page of your site add the following:

import { promoGtag } from '@tincre/promo-sync-gtag';

<script type="module" src="https://unpkg.com/browse/@tincre/promo-sync-gtag@0.0.3/dist/promo-sync-gtag.esm.js">
  import { loadPromoGtag } from '@tincre/promo-sync-gtag';
  loadPromoGtag();
</script>

As usual you can grab our minified build and link to that as a universal script, loaded prior to the code snippet directly above (and without the import statement).

Next.js setup

As we at Tincre are proud Next.js users, below is a snippet you can use for performant Next.js sites.

In your pages/_app.{js,jsx,ts,tsx} file:

import Script from 'next/script';
import { promoGtag } from '@tincre/promo-sync-gtag';

export default function MyApp({component, pageProps,}) {

  return (
    <>
      <Script id="google-tag-manager" strategy={"afterInteractive"}>{promoGtag}</Script>
      <Component {...pageProps} />
    </>
  )
}

Usage

To use a Google Tag (Analytics) event simply import it into your framework of choice and fire the function.

🌶️ Typically this is in a useEffect hook within the function body if you're a React user.

import { promoEventPageView } from '@tincre/promo-sync-gtag';

export default function PageOrComponent() {
  promoEventPageView()  
  return <></>;
}

`useEffect` example

import { useEffect } from 'react';
import { promoEventPageView } from '@tincre/promo-sync-gtag';

export default function PageOrComponent() {
  useEffect(() => {
    promoEventPageView()  
  }, [])
  return <></>;
}