Getting Started

Installation

yarn add google-fls

or

npm install google-fls

fls_global is the function used to generate the Google tag. Below we can see how the function is composed:

fls_global(isCookiesFriendly, config, activitySettings, customVariables)

Basic Example

import React, {useEffect} from 'react'
import fls_global from 'google-fls' // import google-fls

function App() {
    useEffect(() => {
        fls_global(true, // isCookiesFriendly true or false
        {
            format: 'global', // supported format: global, iframe and image
            advertiser_id: 8384813 // Advertiser ID
        }, {
            type: 'test', // Type
            cat: 'test' // Cat
        })
    }, [])
    return (
        <>
            Test Application
        </>
    )
}

export default App;

Let's start with a basic setup, firstable we have to import React and useEffect to make all possible. After that we can use fls_global inside useEffect to load the function at the first load page.

Now, let's see as the function is build.

| Value | Type | Required | Description | | :--- | :--- | :--- | :--- | | isCookiesFriendly | Boolen | True | Used to activate o deactivate Google's cookies. If you set it false the tag will not trigger. | | config | Object | True | Set-up yor format and advertiser_id | | activitySettings | Object | True | Set-up yor type and cat |

format supported are: global, iframe and image.

Cookies Example

import React, {useEffect, useState} from 'react'
import fls_global from 'google-fls'
import styled from "styled-components";

function App() {
    const [cookies, setCookies] = useState(false)
    const handleChange = () => {
        setCookies(true)
    }
    useEffect(() => {
        fls_global(cookies,{
            format: 'global',
            advertiser_id: 8384813
        }, {
            type: 'test',
            cat: 'test'
        })
    }, [])
    return (
        <>
            {cookies
                ?  null
                : <CookiesButton onClick={handleChange}>Accept Cookies</CookiesButton>
            }
        </>
    )
}

export default App;

const CookiesButton = styled.button`
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    background-color: #5e656f;
    padding: 10px 15px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
`;

Custom variables

Actually custom variables is available only for iFrame and image format. As Google describe you can add a max of 25 variables.

import React, {useEffect} from 'react'
import fls_global from 'google-fls'

function App() {
    useEffect(() => {
        fls_global(cookies,{
                format: 'image', // or iframe
                advertiser_id: 8384813
            }, {
                type: 'test',
                cat: 'test'
            }, { // customVariables
                u1: 'qwerty1',
                u2: 'qwerty2'
            }
        })
    }, [])
    return (
        <>
            Test Application
        </>
    )
}

export default App;